How to Use class 'active'

snoep / 2008-07-25 09:46:29   

Hi there you Pros!

I want to do a vertical collapsable menu, and I used the script of Ross Cairns which works fine.

Now I want to use this for a sub-menu. Therefore I need to know how the class 'active' works, and in which file it is used. I need to show a section, which has no exhibitions.

I got stuck in the index.php (plugin folder) where the sectional order is shown, but than I am lost.

Besides, how do you handle sub-sections (workaround??) in the backend.

the site: www.arieltecture.alack.de
(the indexhibit link is under 'impressum' which I thought was ok. Do you tink so too??

Thx in advance.

Stefan.

snoep / 2008-07-25 12:35:54   

Hi,

I tried to solve the problem like this:

1. call buildSubMenu(1,4,'Projekte'); from the index.php, which means -> iterate through 1 to 4 and give it the headline "Projects"

2. add classes w/ jquery to the "virtual" submenu-items

3. format w/ css

any suggestions/comments for a sexier way?

thx, stefan.

AntoineLafontaine / 2008-07-25 13:40:36   

This seems to work fine, good work!

But you run into the trouble to always having to manually change you code if you add a new exhibit... That should be avoided if possible if you want to achieve sexiness ;)

I'll try to look at some things I've done and come back with a more constructive answer than just pointing the downside of your solution.

But it is not an easy thing to do...

snoep / 2008-07-25 14:29:27   

Thx Antoine,

that´s right. I have to cange code manually, if a new Section is inserted. New Exhibitions will appear automatically, as they are within a section, and I grouped the sections.

Additionally I want to hide all the exhibitions of the active section, when a different section is clicked.

This is how I tried --- and lost ;)

function expandingMenu(num) {
    var speed = 250;
    
    var item_title = $("#menu ul").eq(num).children(":first");
    var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
    
    
    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

    /* add click functions + pointer to title */
    item_title.css({cursor:"pointer"}).toggle(
        function () {
                    
            
            if (activeSub != '') {
                activeSub.children().hide(speed);
            }
            
            activeSub = item_title;
            
            
            items.show(speed);
        
        
        }, function () {
            items.hide(speed);
        }
    )
}

Could you have a glance?

snoep / 2008-07-25 14:34:29   

One solution to the problem of having to code manually could be to use each section that contains no exhibitions as a grouping title or "supersection".

snoep / 2008-07-25 15:10:51   

This is how it works now!

But unfortunatley only until I click an exhibition???

What´s going on there?

function expandingMenu(num) {
    var speed = 250;
    
    var item_title = $("#menu ul").eq(num).children(":first");
    var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
    
    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

    /* add click functions + pointer to title */
    item_title.css({cursor:"pointer"}).click(function(){
                    
            if (activeItems) {        
                activeItems.hide(speed);        
            }        
                    
            activeItems = items;
            
            items.show(speed);

        });
}

snoep / 2008-07-28 12:45:52   

Hi there!

Is there anybody having an idea why this code on www.arieltecture.alack.de doesn´t work. I always get an "hasClass... is not a function". Any syntax error? Please help.

Stefan

function expandingMenu(num, first, last) {
    var speed = 250;
    var item_title = $("#menu ul").eq(num).children(":first");    
    var items = $("#menu ul").eq(num).children()
.filter(function (index) { return index > 0; });
        
    /* hide items if not active */
    if (items.is(".active") == false) {
        items.hide();
    }

    /* add click functions + pointer to title */
    item_title.css({cursor:"pointer"}).click(function(){    
    if ( $(this).hasClass("activeSub") ) {
    $(this).removeClass("activeSub");    
    items.hide(speed);
    }    else {
                
    // find activeSub, remove class and hide
    $("#menu ul li").find("activeSub").hide(speed);
    $("#menu ul li").find("activeSub").removeClass("activeSub");
    items.addclass("activeSub");
    items.show(speed);
}    
});
        
}

snoep / 2008-07-28 13:25:00   

I got it working quite nicely now (if anyone is interested, I can post it.

But anyway: I still got the problem, that once I click on an exhibition, the menu doesn´t close.

Please help! regards, Stefan.

Vaska A / 2008-07-28 14:15:57   

Yes...please post or send it to contact [at] indexhibit [dot] org...we'll be organizing these things soon and offering them back (with credits, links, etc).

Thanks

snoep / 2008-07-28 14:34:52   

... this seems to be some kind of a reload-problem ...

i have no idea ... =(

snoep / 2008-07-28 15:33:50   

ok, once again. maybe someone can help on this.
the site: www.arieltecture.alack.de
the problem: once i click on an exhibition and it is shown in the content area, the class "subMenuActive" is removed and if i then click a different section, the active one doesn´t hide.

know what i mean?
thnx for your help!

  1. function expandingMenu(num) {
  2. ¬†¬†¬†¬†var speed = 500;
  3. ¬†¬†¬†¬†var item_title = $("#menu ul").eq(num).children(":first");¬†¬†¬†¬†
  4. ¬†¬†¬†¬†var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  5. ¬†¬†¬†¬†/* hide items if not active */
  6. ¬†¬†¬†¬†if ( items.is(".active") == false ) {
  7.         items.hide();
  8.     }
  9. ¬†¬†¬†¬†/* add click functions + pointer to title */
  10.     item_title.css({cursor:"pointer"}).click(function(){
  11. ¬†¬†¬†¬†¬†¬†¬†¬†if ( items.is(".subMenuActive") == true ) {
  12.             items.hide(speed);
  13.             items.removeClass("subMenuActive");
  14. ¬†¬†¬†¬†¬†¬†¬†¬†}¬†¬†¬†¬†else {¬†¬†¬†¬†
  15. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†// find activeSub, remove class and hide
  16.             $(".subMenuActive").hide(speed);
  17.             $(".subMenuActive").removeClass("subMenuActive");                
  18.             items.addClass("subMenuActive");
  19.             items.show(speed);
  20.         }    
  21.     });
  22.     
  23. }

aylin / 2008-07-31 12:32:55   

hello stefan,

i was looking for a way to make a vertical collapsable menu and i came across this thread.
i am really new to all this so im sorry if this is a silly question but may i ask what this "script of Ross Cairns" is that helped you achieve a vertical collapsable menu?

thanx in advance
aylin

(my site: www.studidosis.com)

redhood / 2008-07-31 14:23:41   

aylin, here is the thread with Ross's menu plus the original from thenine.

http://www.indexhibit.org/forum/thread/761/

aylin / 2008-07-31 17:45:47   

thank you so so much redhood!
i had not seen that, sorry!
but i already have my collapsable menu up and running thanks to that step by step tutorial and download by ross cairns that was posted in that thread :)

pluspunkt / 2009-08-11 14:33:05   

hi snoep.
did you finally solved your last problems?

i mean this one:

the problem: once i click on an exhibition and it is shown in the content area, the class "subMenuActive" is removed and if i then click a different section, the active one doesn´t hide.
lemathieu A / 2009-08-11 15:12:38   

He!
Hope you're a supa lucky guy!
More than a year after his last post…

Drop him a mail, you'll be maybe more lucky.

This thread has been closed, thank you.