Indexhibit Support

Hi,

I am a complete beginner to this, so I apologise if I explain this poorly. I have managed to create a collapsable menu, using the help of Ross Cairns tutorial and I was wondering if there is a way I can get the menu to go back up when I click on another part of the menu?

The site I am working on is http://www.feltbranding.com/index.php?/about-felt/

Thank you in advance to anyone who can help, or push me in the right direction.

Tom / Felt Branding

In fact, you can use "thenine" javascript modified by Vaska (search the forum for that) as I do on my site (still working on) but be carefull that the slideshows don't work anymore with it, at least without a lot of work.

Thanks for your help. I will have a go, and see if I can figure it all out, and let you know how I get on.

Hello again,

I have found the thread that you mentioned, but I am unsure where to put the coding within the index.php file.

Also do I need to keep the plugin (expandingMenus.js)? Or should I start again with a new index.php file?

Many thanks again.

Tom / Felt Branding

Felt,
you can erase the content of the expandingmenus.js on your server, and fill this document with the code you found on this thread. If you do that, it will be good.
-M-

Also, be aware that your horizontal/crab is a bit too low.
On my 1280x800, with Firefox and multiple sites in my browser window, I don't see the bottom of your pics.
-M-

Thanks again Lemathieu,

I think I must be putting the coding somewhere incorrectly on the index.php file because it isn't working at all now. Any advice would be greatly appreciated.

Also thanks for the advice on the sizing – I am currently resizing all the images, and the ones in there were just me experimenting with what I had to hand. But thank you for the advice, it's really helpful to have other peoples input.

Tom / Felt Branding

In your index.php, I see that

1. $(document).ready(function()
2. {
3. ¬†¬†¬†¬†setTimeout('move_up()', 1);
4. });

You need that

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

Also (yes I'm the king of the "also"), you can style the cursor by adding

1. a#top-section { cursor: pointer; }

just behin d your #top-section in your css

Lemathieu,

Thank you so much for being amazingly helpful. I fear I've really messed it up because I've done as you said and it still isn't working.

I copy and pasted the coding that Vaska put up into a .js file and then linked the index.php to the file I made in a similar manner to the way Ross Cairns described

and then I followed what you said.

Have you any ideas where I've gone wrong?

I am really grateful for your advice, and I am sorry that I can't seem to get a grasp of it.

Many thanks
Tom / Felt Branding

p.s. With regards to the cursor at where do I copy and paste that into on my style.css? I don't appear to have a #top-section

My code doesn't work...which is why it was pulled.

We don't have sigs in this forum because they are unnecessary advertising/spam under each post...

Thanks Vaska.

I'll start again with what I had, and try experimenting with that. I have seen that other users have managed to achieve the effect that I am after – can you point me in the right direction as to where I should start?

What is the thread that has it all? I think if you search on 'expand' you will find it - it's the long post. Might even say something about Spanish in the title...

And since the code is public...if you find a site that does what you want take a look at their code and compare with yours...

This is what I use :

1. $(document).ready(function()
2. {
3. // First we hide all exhibitis 
4. $("#menu ul li.section-title").nextAll().hide();
5. // then the active exhibit is showed
6. $("#menu ul").each(function()
7. {
8. $(this).find("li.active").prevAll().nextAll().show();
9. });
10. // This is the toggle function
11. // first it hides all sections
12. $("#menu ul li.section-title").click(function()
13. {
14. $("#menu ul li.section-title").nextAll().hide();
15. $(this).nextAll().slideToggle("fast");
16. });
17. });

That's working for me.

@ Vaska : sorry for the signature

1. And for the cursor, sorry. Put that in your css :
2. #menu ul li.section-title { cursor: pointer; }

Thank you both for all you help. I'm going to keep experimenting today, and see what I can come up with. I will post back with results, and hopefully no more queries.

Haha...mathieu...I wasn't referring to yours... ;)

My code, I believe, required new Jquery - if you are still using that. The problem was that it broke other exhbitions formats...so it needed to be pulled.

Apologies for my signature too Vaska – I did it without thinking.

I cannot get the code that Mathieu put up to work at all. Does it go in the Index.php file? Or do I have to create a .js file.

For the time being I have reverted to the rcairns version. I'm enjoying the challenge of learning to use Indexhibit, but this one seems a bit above me at the moment.

Any help would be appreciated, but I understand if you want to give up on this one ;

You create a .js file and call it on the index.php like you do with ross's.

ps.
it woks best if you give it a funny name like: jumpinfrog.js or elephantdrone.js

;)

Cool thanks Cruz – do I still keep the part in my index.php that says -

$(document).ready(function()
{    setTimeout('move_up()', 1);
    expandingMenu(1)
    expandingMenu(2)
});

Yep. ;)
also be sure to add extra expandingMenu(s) as needed.

I've done what you advised but it doesn't seem to work still. Can you take a quick look at it?

http://www.feltbranding.com/index.php?/about-felt/

Is there a way you can view the .js file that I've created? Sorry for my complete lack of knowledge, I'm still getting used to the whole thing.

Your code is not the same as Mathieu's...it's missing code...should be like this...

1. $(document).ready(function()
2. {
3. // First we hide all exhibitis 
4. $("#menu ul li.section-title").nextAll().hide();
5. // then the active exhibit is showed
6. $("#menu ul").each(function()
7. {
8. $(this).find("li.active").prevAll().nextAll().show();
9. });
10. // This is the toggle function
11. // first it hides all sections
12. $("#menu ul li.section-title").click(function()
13. {
14. $("#menu ul li.section-title").nextAll().hide();
15. $(this).nextAll().slideToggle("fast");
16. });
17. });

I'm not sure why the expandingMenu() function calls are in there still...this code does not use them as far as I can see...

felt,
I see your js. You cut the beginning and the end of the script.
It start like that :

1. # $(document).ready(function()
2. # {

and finish with

1. });

twice.

My code, I believe, required new Jquery - if you are still using that.

The problem was that it broke other exhbitions formats...so it needed to be pulled.

did anyone find out how come the expand animation doesn't work smoothly on IE? it looks like a rheumatic animation
: /

I thought I had updated my jquery. I downloaded the latest version of the website, and dropped it into my JS file. Is that not correct?

I really cannot work this out. I have copied the code that Vaska put up into a js file and then have put a call on it in the index.php. Am I completely missing something?

Again thanks to everyone for all their help, and apologies for my slowness in picking it all up.

Finally I've got it to work! Thank you all so much. It really does feel good when you persevere and you achieve what you want.

I was calling up the old jquery file rather than the updated version. So thank you for pointing that out for me – I just didn't realise that I had to call it up like that.

Thanks again everyone!

It's a neat feeling when things start working...

;)

Yes!

couldn't have done it without you! thanks guys.