Collapsible menu glitch?

edd / 2008-12-03 08:45:56   

I have followed the advice on the 'useful threads' about collapsible menus, it works fine except for the INFO part, it hides after clicking on another exhibition link.

I have searched the code and found nothing that i would consider strange.

Is there any simple way of fixing it?

I would like to inquire if Paypay works well with indexhibit?

Thanks for any advice,

www.edwardmcmullin.com

I am slowly up dating my site, changing the menu bar.

cruz / 2008-12-03 09:12:45   

Hi edd, if you want the info section permanently open you should not include it in the script, delete the expandingMenu(5); row:

  1. $(document).ready(function()
  2. {
  3.     setTimeout('move_up()', 1);
  4.     expandingMenu(0);
  5.     expandingMenu(1); 
  6.     expandingMenu(2); 
  7.     expandingMenu(3); 
  8.     expandingMenu(4);
  9.     expandingMenu(5); 
  10. });

cheers!

cruz / 2008-12-03 09:14:34   

Hi edd, if you want the info section permanently open you should not include it in the script, delete the expandingMenu(5); row.

Ok, now without the code tag glitch.

;)

edd / 2008-12-03 09:22:01   

Hi cruz, thanks,
i was trying to get the INFO also to be collapsible as well, the expandinmenu(5) was a little test that i forgot to remove this morning it is gone now thanks.

The Info becomes collapsible when an exhibition item within the other collapsible title menus is clicked. It is not collapsible at the index or root menu. (i think thats what it is called)

arsondpi / 2008-12-03 09:28:48   

You have 5 sections in your menu.
You have set 6 sections to be expanded in your js.
...simply exclude expandingMenu(4); and expandingMenu(5); from your code. This will make INFO a non expandable section (the 5th menu simply does not exist in your menu - there's nothing to expand).

You have to include in your js, just the sections to be expanded starting from 0 - example: you want the 1st, 2nd and 5th sections to be expanded. Your code should look something like:

  1. $(document).ready(function()
  2. {
  3.     setTimeout('move_up()', 1);
  4.     expandingMenu(0);
  5.     expandingMenu(1); 
  6.     expandingMenu(4);
  7. });

As for paypal, there are people that use it. I remember asking the same question in the past and Eloisa mentioned a clothes (?) shop... can't recall any links. You're better off with a site search... (there's Dereks jquery solution also..)

cruz / 2008-12-03 09:44:28   

exactly what I meant, just forgot to count the (0)
I'm having my cup of coffee then, ;)

cruz / 2008-12-03 09:59:21   

or maybe, you want it collapsable but not automatically hidden? Right? I don't know if you can do it 'easily' just for that specific section, I guess you would have to edit the expandingMenu.js and create an exception in the hide item if not active section. Maybe someone else's know how to do it. ;)

edd / 2008-12-03 10:39:42   

Sorry for not replying promptly,
i would like the whole thing to be collapsible and hidden at from the start.

the INFO only becomes hidden when one clicks to a exhibition within the design folder or any other collapsible menu.

etc
www.edwardmcmullin.com/index.php?/design/crowdsourcing/

cruz / 2008-12-03 11:47:08   

Hmm! I see. The script is alright and it should be working the way it is. Unless, the logo is messing things up. For instance, why do you have two pages with the same content? The main and the about this site. Why not connecting the logo directly to the main? I have exactly the same code has you do, with 4 sections (one section less), and it works fine on my site.

  1. $(document).ready(function()
  2. {
  3. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  4.     expandingMenu(0);
  5.     expandingMenu(1);
  6.     expandingMenu(2);
  7.     expandingMenu(3);
  8.     
  9. });

http://cruz.at

Vaska A / 2008-12-03 11:50:55   

I have noticed that this plugin does not work with newer Jquery versions on some browsers.

Vaska A / 2008-12-03 11:51:57   

cruz, i have been so busy over the months i had not seen your site...some nice stuff there.

;)

cruz / 2008-12-03 12:27:43   

hey, thanks ;)

aarrtt / 2009-12-27 20:16:02   

greetings,
my collapsible menu has a glitch as it expands and contracts the items within each section of the menu. i changed it to function on click instead of hover, then this glitch started.
Any suggestions to make this go away, would safe my life.
thanks!
aa
Webpage

arsondpi / 2009-12-27 21:42:07   

Hello there!
...you pasted functions within functions whitout editing...

...you can try:

  1. item_title.css({cursor:"pointer"}).click(
  2. ¬†¬†¬†¬†function () {
  3.             items.show(speed);
  4. ¬†¬†¬†¬†¬†¬†¬†¬†}, function () {
  5.             items.hide(speed);
  6.         })
aarrtt / 2009-12-28 00:28:50   

hi, i put your code in my expandingmenus.js but it still does the glitch. Did i do something wrong? mmm. maybe its my server that is trippin? trippin

puppiepoppy / 2009-12-28 09:30:33   

Hi all,

My website has the Collapsable Menu with all the menu collapsed, and only expand when one click (or hover) them. :D Just what I liked!

This is in my Index.php

$(document).ready(function() {
    setTimeout('move_up()', 1);
    expandingMenu(0);
    expandingMenu(1);
    expandingMenu(2);
    expandingMenu(3);
    expandingMenu(4);
    expandingMenu(5);
    expandingMenu(6);
    expandingMenu(7);
});

However, in my Indexhibit Setting, I've 8 Menu, with the first (HOME menu) 'hidden'. So, in my Website, there are 7 menu viewable.

One question: when I delete the     expandingMenu(7) line, everything still seems OK. I just wonder why deleting a line doesn't makes a difference. Can anyone offer his/her viewpoint?

arsondpi / 2009-12-28 10:39:05   

@aarrtt: As I said before this will allow users to click and only open the expanding menu.

  1. <script type='text/javascript'>
  2. /*Expanding Menus for Indexhibit  *uses jquery  *  *Created by Ross Cairns Mar 2008 modified by Benjamin Ashcroft Jan 2009*/
  3. function expandingMenu(num) {
  4. var speed = 100;
  5. var item_title = $("#menu ul").eq(num).children(":first");
  6. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  7. /* hide items if not active */
  8. if (items.is(".active") == false) {
  9. items.hide();
  10. }
  11. /* add click functions + pointer to title */
  12. item_title.css({cursor:"pointer"}).click(
  13.     function () {
  14.             items.show(speed);
  15.         }, function () {
  16.             items.hide(speed);
  17.         })
  18. }
  19. </script>

@ puppiepoppy: That's because expandingMenu(0); affects the first ul of your index, expandingMenu(1); the second one and so on...

Thus if you have 7 menus, the js call should stop at expandingMenu(6);

puppiepoppy / 2009-12-28 10:50:30   

Hi Arson,

So, for me to delete one of those line expandingMenu(7) would not affect my menu transition, right? Well, if I disable the hidden of my HOME menu and with one line deleted, what would happen?

Probably I should have try it out myself then... ;)

C,
Mike

aarrtt / 2010-01-22 05:31:01   

hi arsondp,

alright! i got the glitch thing to go away! wow, i am getting closer (i think ahah) by not using lines 1 and 19 of the script you gave me. But now the menus will not close back up with a second click.

http://jumping-flash.com/

thank you a billion times over.

aarrtt / 2010-01-22 20:29:45   

after editing the expandingMenus.js file, with the code you gave me, do i have to edit the index.php file as well?

aarrtt / 2010-01-23 05:00:32   

ok i figured it out and thought i would post it here in case anyone runs into the same problem...
Thanks everyone!

  1. /*Expanding Menus for Indexhibit  
  2. *uses jquery  
  3. *  
  4. *Created by Ross Cairns Mar 2008 
  5. */
  6. function expandingMenu(num) {
  7. var speed = 100;
  8. var item_title = $("#menu ul").eq(num).children(":first");
  9. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
  10. /* hide items if not active */
  11. if (items.is(".active") == false) {
  12. items.hide();
  13. }
  14. /* add click functions + pointer to title */
  15. item_title.css({cursor:"pointer"}).toggle(
  16.     function () {
  17.             items.show(speed);
  18.         }, function () {
  19.             items.hide(speed);
  20.         })
  21. }

New mission... CSS TABLES!!!

BartPajak / 2011-02-23 02:25:24   

Hello everyone,

I have a problem with my expandable menu...

So, I used script ( i think the way i supposed), My only problem is that my first bar stays open. I tried moving it in the "ndxz-studio" to the 2nd position, created two blank groups but it still doesnt work.

Can you please have a look into it?

www.bartpajak.com

Thanks
Bart

rickykappa / 2011-02-23 03:06:35   

you have this:
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
expandingMenu(5);
expandingMenu(6);
expandingMenu(7);
expandingMenu(8);
expandingMenu(9);
expandingMenu(10);
erase all except
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
that should be enough to solve the problem.
see if it works
;-)

BartPajak / 2011-02-23 03:12:48   

Thanks rickykappa but it doesnt work. Any other options?

rickykappa / 2011-02-23 03:33:34   

not really...
however you should also remove the empty javascript call
<script type='text/javascript'>
    
    
</script>
just before your
</head>

BartPajak / 2011-02-23 03:52:50   

I removed the lines you mentioned but still no difference in the menu.

rickykappa / 2011-02-23 04:07:51   

well, I don't know what else: it should work like that, but your expandingMenus.js is not the original file...

BartPajak / 2011-02-23 04:19:19   

Ok, so i have replaced my expandingMenus.js with the original file from Ross Cairns website. Still nothing.

blameme / 2011-02-23 04:26:16   

Works fine for me?

BartPajak / 2011-02-23 04:27:10   

I had to come back to the modified .js file as menu with original script was not disappearing.
It has to be a error in the code in expandingMenus.js file then.

Please see below:

$(document).ready(function()
{
// First we hide all exhibitis
$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed
$("#menu ul").each(function()
{
$(this).find("li.active").prevAll().nextAll().show();
});

// This is the toggle function
// first it hides all sections
$("#menu ul li.section-title").click(function()
{
$("#menu ul li.section-title").nextAll().hide();
$(this).nextAll().slideToggle("fast");
});
    
});

rickykappa / 2011-02-23 05:30:24   
as I said this is not the original file, I don't understand what you're looking for, what you mean with
menu with original script was not disappearing
that script works well for so many people...
BartPajak / 2011-02-23 05:34:17   

Basically original file expandingMenus.js was constructed so menus were active all the time. So for example MenuA when you clicked on it was active even when you clicked on MenuB. What i wanted to achieve was to modify the script so when you clicked MenuA it was active but when you clicked on MenuB it was deactivating MenuA. I hope thats clear now.

rickykappa / 2011-02-23 05:39:40   

many have customized it to get that result, but not in the way you attempted. there are howto threads in the forum that you can easily find using the search box and a little time in reading...
;-)

BartPajak / 2011-02-23 05:41:54   

haha thanks. trust me i have done my research before i posted it but I will have a look maybe i am missing something.

Thanks once again.

B

This thread has been closed, thank you.