SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Target css class with javascript

    <li id="menuitem_4_private" class="mainlevel_active_private"><a id="menulink_4_private" class="mainlevel_active_private" href="#">Portfolio</a>
    <ul id="menulist_4_private" style="visibility: hidden; top: 87px;">
    <li id="menuitem_4_1_private" class="sublevel_private">
    <a id="menulink_4_1_private" class="sublevel_private" href="#">Testimonials</a></li>
    <li id="menuitem_4_2_private" class="sublevel_current_private">
    <a id="menulink_4_2_private" class="sublevel_current_private" href="#">Case Studies</a></li><li id="menuitem_4_3_private" class="sublevel_private"><a id="menulink_4_3_private" class="sublevel_private" href="#">Gallery</a></li>
    </ul>
    </li>

    This is a section of my menu and I wish to target the <ul> below "mainlevel_active_private" depending on which menu item is active tried various things such as mootools etc. My menu is rendered in Joomla and makes use of "easymenu" - any suggestions or if you need more info let me know.

    Richard

  2. #2
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having a quick look at the mootools docs I reckon you can get at that element by using
    Code:
    var ul = $E(".mainlevel_active_private").nextSibling;
    Using Prototype.js which I am more familiar with you would go
    Code:
    var ul = $$(".mainlevel_active_private").next("ul");
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've given this a bash but it doesn't seem to work I get the following error;
    $$(".mainlevel_active_private").next is not a function

    DO you just include prototype.js
    and then do the following or is there more to it and im missing the point;
    var ul = $$(".mainlevel_active_private").next("ul");

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's how you could do it with the Yahoo UI Library:
    Code:
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript">
    // First get your target li
    var li = YAHOO.util.Dom.getElementsByClassName('mainlevel_active_private')[0];
    // Get the first 'ul' child
    var ul = YAHOO.util.Dom.getFirstChildBy(li, function(el) {
        return (el.tagName == 'UL');
    });
    </script>

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I copied the yahoo code you suggested above and that doesn't seem to work either I get Q has no properties.

    Is this likely to be other js files causing some kind of conflict?

  6. #6
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by trx View Post
    I've given this a bash but it doesn't seem to work I get the following error;
    $$(".mainlevel_active_private").next is not a function

    DO you just include prototype.js
    and then do the following or is there more to it and im missing the point;
    var ul = $$(".mainlevel_active_private").next("ul");
    Apologies. You are quite right, $$ returns a node list not a single node. It should be:
    Code:
    var ul = $$(".mainlevel_active_private")[0].next("ul");
    Again I have not tested this against your html so I can't say it will definitely work. Maybe you should try:
    Code:
    var active = $$(".mainlevel_active_private");
    alert(active.length); //See if you got anything
    if(active.length) {
      var ul = active[0].next("ul");
      alert(ul); //See if you got anything
      if(ul) {
        //Do stuff with ul
      }
    }
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Mr Moo,

    I've gone down the yahoo root at the moment just tweeking some styles but I've managed to target what I want so far!

  8. #8
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, no problem. Hope it all works out for you.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game


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
  •