Setting several styles within one javascript function

Discussion in 'HTML' started by Spartanicus, Sep 29, 2005.

  1. Spartanicus

    Spartanicus Guest

    How should the styles of various elements be manipulated with one
    function? The following doesn't work:

    function panel() {
    document.getElementById('panel').style.display='hidden';
    document.getElementById('content').style.marginLeft='30px';
    }

    Apologies for requesting a shortcut instead of learning javascript
    proper, I don't use it enough to make that worthwhile.

    --
    Spartanicus
    Spartanicus, Sep 29, 2005
    #1
    1. Advertising

  2. Spartanicus

    Dylan Parry Guest

    Using a pointed stick and pebbles, Spartanicus scraped:

    > function panel() {
    > document.getElementById('panel').style.display='hidden';
    > document.getElementById('content').style.marginLeft='30px';
    > }


    I had problems with a similar function a while back. IIRC the problem
    was caused by having the /wrong kind of quotes/ and changing them to "s
    made all the difference. I might be wrong, of course ;)

    --
    Dylan Parry
    http://electricfreedom.org -- Where the Music Progressively Rocks!
    Dylan Parry, Sep 29, 2005
    #2
    1. Advertising

  3. On 29/09/2005 16:35, Dylan Parry wrote:

    > Using a pointed stick and pebbles, Spartanicus scraped:
    >
    >> function panel() {
    >> document.getElementById('panel').style.display='hidden';


    The value, hidden, doesn't apply to the display property, so this is a
    CSS issue, not one of scripting. So, which is it: display/none, or
    visibility/hidden?

    A well-written script will be robust, and test its environment before
    using any features. In this instance, though, it might be better to
    prepare beforehand:

    /* Establish if the getElementById method is implemented by the
    * host. If not, create a replacement so that the method can be
    * called successfully, even if the result will never be viable.
    *
    * Support for older, obscure object models can be added here.
    * See the clj FAQ notes with regard to 'IDed Element Retrieval'.
    */
    if(!document.getElementById) {
    (document.getElementById = function() {
    return null;
    }).notViable = true;
    }

    function setStyle(element, property, value) {
    (element.style || element)[property] = value;
    }

    function panel() {
    var content, panel;

    if((panel = document.getElementById('panel'))
    && (content = document.getElementById('content')))
    {
    setStyle(panel, 'display', 'none');
    setStyle(content, 'marginLeft', '30px');
    }
    }

    This is not necessarily the best alternative. It may depend on what the
    rest of the code does.

    [snip]

    > I had problems with a similar function a while back. IIRC the problem
    > was caused by having the /wrong kind of quotes/ and changing them to "s
    > made all the difference. I might be wrong, of course ;)


    Probably. There is no difference between single and double quotes in
    ECMAScript.

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
    Michael Winter, Sep 29, 2005
    #3
  4. Spartanicus

    Spartanicus Guest

    Michael Winter <> wrote:

    >>> function panel() {
    >>> document.getElementById('panel').style.display='hidden';

    >
    >The value, hidden, doesn't apply to the display property


    Oops, the result of simplifying the code for the post, I inserted the
    wrong code.

    A minimized test case that closely resembles what I'm actually trying to
    do is: http://homepage.ntlworld.com/spartanicus/temp.htm

    This "works" if I comment out the second statements, if I leave them in
    it fails and produces runtime errors.

    >A well-written script will be robust, and test its environment before
    >using any features.


    I'm not skilled enough to understand feature detection, or to write
    elegant javascript code. All my javascript is used for optional fluff
    only, no harm done if it doesn't work.

    --
    Spartanicus
    Spartanicus, Sep 29, 2005
    #4
  5. Spartanicus wrote:
    > Michael Winter <> wrote:
    >
    >
    >>>>function panel() {
    >>>> document.getElementById('panel').style.display='hidden';

    >>
    >>The value, hidden, doesn't apply to the display property

    >
    >
    > Oops, the result of simplifying the code for the post, I inserted the
    > wrong code.
    >
    > A minimized test case that closely resembles what I'm actually trying to
    > do is: http://homepage.ntlworld.com/spartanicus/temp.htm
    >
    > This "works" if I comment out the second statements, if I leave them in
    > it fails and produces runtime errors.
    >
    >
    >>A well-written script will be robust, and test its environment before
    >>using any features.

    >
    >
    > I'm not skilled enough to understand feature detection, or to write
    > elegant javascript code. All my javascript is used for optional fluff
    > only, no harm done if it doesn't work.
    >



    JavaScript code block on more than one line should be contained in braces
    <your code>
    function panel() {
    if (document.getElementById('panel').style.display == 'none')
    document.getElementById('panel').style.display='block';
    document.getElementById('content').style.marginLeft='14em';
    else {
    document.getElementById('panel').style.display='none';
    document.getElementById('content').style.marginLeft='1em';
    }
    }
    </your code>

    <fixed code>
    function panel() {
    if (document.getElementById('panel').style.display == 'none'){
    document.getElementById('panel').style.display='block';
    document.getElementById('content').style.marginLeft='14em';
    }
    else {
    document.getElementById('panel').style.display='none';
    document.getElementById('content').style.marginLeft='1em';
    }
    }

    </fixed code>


    But as Michael said this in not very robust code!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 29, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joe Kovac

    javascript and styles within asp:Content

    Joe Kovac, May 7, 2007, in forum: ASP .Net
    Replies:
    1
    Views:
    348
    Joe Kovac
    May 7, 2007
  2. Victor \Zverok\ Shepelev

    RDOC: several related modules in several C files

    Victor \Zverok\ Shepelev, Mar 6, 2007, in forum: Ruby
    Replies:
    3
    Views:
    175
    Max Lapshin
    Mar 16, 2007
  3. sagar
    Replies:
    3
    Views:
    258
    Thomas 'PointedEars' Lahn
    Dec 23, 2005
  4. ThunStorm
    Replies:
    0
    Views:
    89
    ThunStorm
    Feb 15, 2006
  5. Replies:
    0
    Views:
    83
Loading...

Share This Page