SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Change Element Style (without ID or NAME)

    Hey there,

    I want to change the margin of a UL element. This UL element doesn't have an ID or NAME attribute. How can I use getElementsByTagName(); ?

    Here is my code :

    HTML Code:
    <ul id="nav">
    <li>
        <ul>
            <li>
                <!-- need to change the margin of this UL using JavaScript -->
                <ul></ul>
            </li>
        </ul>
    </li>
    </ul>
    It's a little IE browser hack I'm working on. It's the only way around.
    Please help me out. I will really appreciate it.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use CSS?

    Code:
    #nav ul {
        margin:10px;
    }
    You can access the ul with the following JavaScript
    Code:
    var nav = document.getElementById("nav");
    var firstUL = nav.getElementsByTagName("ul")[0];

  3. #3
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks!
    Unfortunately this is a browser hack, so I cannot put it directly in my stylesheet.

    I'm assuming that for the second UL, it will look like this :

    HTML Code:
    var mainNav = document.getElementById('nav');
    var secondUL = mainNav.getElementsByTagName('ul')[1];
    Does that look right?
    I'm going to give it a test just now and post back here.

    Thanks for your help!
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome, works great!
    I used this to work with XML before, but I wasn't really sure.
    Not a javascript guru at all.
    Learnt something here. Thanks again!
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  5. #5
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Contrid View Post
    Unfortunately this is a browser hack, so I cannot put it directly in my stylesheet.
    It's a CSS rule, so it doesn't belong in your JavaScript. You're just making it more difficult to maintain in the long run.

    Most browsers can be directly targetted with CSS hacks/conditional comments.

  6. #6
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley View Post
    It's a CSS rule, so it doesn't belong in your JavaScript. You're just making it more difficult to maintain in the long run.

    Most browsers can be directly targetted with CSS hacks/conditional comments.
    Thank you for your comments.
    Can you please elaborate on your ideas and tell me what you have in mind?
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Contrid View Post
    Thank you for your comments.
    Can you please elaborate on your ideas and tell me what you have in mind?
    Which browser are you specifically trying to deliver the extra CSS rule for?

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Happy you learned something from this


  9. #9
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Technically, getElementsByTagName returns a Collection object, not an Array. So this line:

    Code:
    var secondUL = mainNav.getElementsByTagName('ul')[1];
    should be:

    Code:
    var secondUL = mainNav.getElementsByTagName('ul').item(1);
    Not that it appears to matter much in this case.

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You're better off using conditional comments as opposed to javascript.
    Code:
    <!--[if gt IE6]> {CSS rules for IE7 here} <![endif]-->
    the "gt IE6" means "greater than IE6", i.e. IE7 only.

  11. #11
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    You're better off using conditional comments as opposed to javascript.
    Code:
    <!--[if gt IE6]> {CSS rules for IE7 here} <![endif]-->
    the "gt IE6" means "greater than IE6", i.e. IE7 only.
    Why not just use "if IE" ?
    Something like this :

    HTML Code:
    <!--[if IE]>
    
    ul#nav li ul
    {
    	margin-left:-120px;
    }
    
    <![endif]-->
    Seems to work just fine...
    Thanks alot for all the responses guys! I really appreciate it.
    I really didn't know about these CSS rules.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happens when the next version of IE comes out? I'd recommend using "if IE 7" instead of "if gt IE 6" (you forgot the space that needs to come before the version number).

    Quote Originally Posted by World Wide Weird View Post
    Technically, getElementsByTagName returns a Collection object, not an Array. [...] Not that it appears to matter much in this case.
    Actually it returns a NodeList, not an HTMLCollection.

    In the JavaScript (ECMA Script) binding of the DOM you can use the array notation instead of item(). I never use item() or namedItem(). There is no good reason to write 4 or 9 extra characters every time you reference a node in a NodeList or HTMLCollection.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, that does work, but Kravvitz is right, that might break IE8, whenever it comes out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •