Indexhibit Support

Hello,

I know there have been various posts on this topic - and I have read through them BUT I am still having problems trying to customise my expanding menu. (http://www.elliethompson.co.uk)

Basically what I want is for the menu to only expand one section at a time, so for instance if 'Print' is open, and you click 'websites', then the print menu will close and then the website menu will open.

I have seen another thread that uses the following code:

$(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");
});

});

BUT i cant seem to get this to work - I have been trying to place it into my index.php file. I would be really greatful if someone could give me some advice. And sorry if I am repeating topics, but im getting quite desperate now!

thanks.

i just made the same thing but with this javascript

and then i added

1. cursor: pointer; to the 

1. #menu ul li.section-title {

in my style.css

wow that wasnt right. my post should look like this:

i just made the same thing but with this javascript

and then i added:

1. cursor: pointer;

to the

1. #menu ul li.section-title {

-part of my style.css

Hello,

Thanks for your help... I have tried that, however it seems to not be working for me (see http://www.elliethompson.co.uk). Perhaps i'm not doing it quite right. If you could advise that would be great, otherwise I may have to abandon it!

Many thanks

have you tried the Cairns script? though, i'm not sure if that is what you are looking for, but it is quite easy to implement...

1. /*¬†¬†¬†¬†Expanding Menus for Indexhibit
2.  *¬†¬†¬†¬†¬†¬†¬†¬†uses jquery
3.  *
4.  *¬†¬†¬†¬†Created by Ross Cairns  Mar 2008
5. */

function expandingMenu(num) {
    var speed = 500;
    
    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 () {
            items.show(speed);
        }, function () {
            items.hide(speed);
        }
    )
}

Then in your index.php file add, depending on the number of secions...

1. <script type='text/javascript'>
2. path = '<%baseurl%>/files/gimgs/';

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

@ellie :
in your index.php, you made a mistake.

1. behind these lines
2. < script type='text/javascript'>
3. path = 'http://www.hmplus.net/files/gimgs/';

you already "call" the script (that's good)

1. <script type='text/javascript' src='http://www.elliethompson.co.uk/ndxz-studio/site/js/expandingMenus.js'></script>

but (the misunderstood is here) you implement the script at the place of this

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. });
11. </script>

so remove 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. });

and put what I wrote above.

And come back here to say what's happening.

@divisions

thanks for that - That was the cose I was using originally, but wanted only 1 section to open at a time (with this code you can open all the sections if you dont click them again to make them close).

Thanks

@lemathieu

I tried to follow your instrustions and still couldnt make it work - thanks for your help though. I have now reverted the script to the original one (where all sections can open), as at least this is nearly what I want to happen!

I appreciate your help, thanks.

Lemathieu, I tried to follow your instructions to but I can't make it work, I also want only one section to expand and then when I click on the next one the first one is closing.
any idea?

Didi you use the nine's script (get it here) ?

If you use it (as I do), you may upgrade your jquery to the last version : open yours and copy-paste the one you will find at jquery home.
But be aware that some exhibition formats won't work anymore (slideshow).

I'm trying to implement Ross's expanding menu's and it doesn't seem to work....:?
http://www.etaudst.org/home
Any help please

you have 2

1. });

after

1. ¬†¬†¬†¬†setTimeout('move_up()', 1);
2. ¬†¬†¬†¬†expandingMenu(0); 
3.     expandingMenu(1);
4.     expandingMenu(2);
5.     expandingMenu(3);
6.     expandingMenu(4);
7.     expandingMenu(5);

Hello,

I have a quick Q maybe someone can answer. I can't crack it. I have my menu now aligned to the right but now the vertical accordion motion has been replaced with the list flying in from the left? how can i change this? Is that even possible?

many thanks!

m

Link?

my bad sorry

www.mauriceredmond.com

Ok, bare with my answer here...

First off, the problem here lies with Jquery. I believe that if you had a newer version it will not come from the left.

It might also be the speed...but setting it to a faster speed besides zero won't solve it with this version of Jquery.

If you upgrade to a newer version of Jquery some exhibition formats might not work - I believe Slideshow won't work anymore.

So...you can see it's a bit of a pickle here...

thanks vaska.

I actually updated my jquery the other day to 1.2.6 to solve an issue with the djuve plugin.. i am not using slideshow now anyway.

not to worry. i just upped the speed to 100, which is will do.

i can't wait to get my paws on this new version of indexhibit :D

thanks as always.

mosss

hmm just check and the latest version is in fact 1.3.2. still doesn't resolve it. Oh well can't have everything.

With 1.3.2 maybe you need a shift + refresh before it will work?

I'll show you soon Maurice...need a little time before I put it online.

;)

hi im a beginner at this so bear with me. where do i put all of the expand scripting. in the style css file or in my index php file?

thnx

Hey...
Did you try the search box on the right? There's buzillions (!) of threads for the expanding menu... Try keywords like expanding menu and ross cairns...

Hi, I would like to use the close function implemented in the nine script mentioned above. But with the menu expanding and closing on hover.

So when one section title is active the other closes etc.

I'am using the most recent jquery.

http://present-london.com/

my Js code

Its almost there.

Any help appreciated.

Thanks,

Double post, but i got what i was after from the nine script.

I just deleted the .show() from the active exhibit line and added .hover to the toggle function.

if thats not clear, you can see my js file in the link above.

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

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

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

Hi,

I really tried everything since 7 days to customize my menu to expanding. So I can´t tell you what is the status now.
Now I am so confuse. Can someone help me please!?
It is this side:
www.studio-sima.de

as I said you previously, I don't see anything connected to the "expanding menu" in your source code : no javascript called, nothing after setTimeout('move_up()', 1);

and you can't do it with the eatock template. switch to advanced mode and choose the sample theme.
then make the changes needed to have the expanding menu in site/sample/style.css and index.html

Hi lemathieu,

I am totally confused.
Which code I have to connect to "expanding menu". I got the js expandingMenus.js.
I think one of these many PHP codes. But which one?
And can you tell me extactly which part of the code I have to change into?

Here is my site/sample/style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: ; }

#menu {
width: 220px;
overflow: auto;
top: 0;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

#menu ul li.branding { cursor: pointer; }

#content {
height: 100%;
margin: 0 0 0 220px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

But Sorry, I am an amateur. - Where is the index.html?

www.studio-sima.de

ok, you switched to the sample theme…

after that, look at this thread.

Hi lemathieu,

the thing with eatock I understood now.
I read and read thousand times the forum.
Now it sounds clear.
But it doesn´t work.
Can you have a look again?
http://www.studio-sima.de/indexhibit/indexhibitv070e/

this is my
indexhibitv070e\ndxz-studio\site\js
expandingMenus.js

1. function expandingMenu(num) {
2. var speed = 200;
3.
4. var item_title = $("#menu ul").eq(num).children(":first");
5. var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });
6. /* hide items if not active */
7. if (items.is(".active") == false) {
8. items.hide();
9. }
10. /* add click functions + pointer to title */
11. item_title.css({cursor:"pointer"}).toggle(
12. function () {
13. items.fadeIn(speed);
14. }, function () {
15. items.fadeOut(speed);
16. }
17. )
18. }

Should I change something? Names or Numbers?

And this my style.css

/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 9px;
    font-family: Georgia, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: none; }

#menu {
width: 220px;
overflow: auto;
top: 20;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

$("#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");
});

#content {
height: 100%;
margin: 0 0 0 220px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

no. Go there and copy paste all the content of this page in your expandingMenus.js

you have to (as well) erase all the javascript lines in your css

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

Yes! I got it!
Thanx.

One small thing I have to solve.
Is it possible to change the position of text and images.
I want the text underneath the image.

Hey out there,

though trying like crazy, I can´t get my expanding menu running. Tried Ross Cairns' read a lot of threads but still no way out in sight. Any hints welcom!

http://www.fkarch.de

...it's one of these mistakes that are annoying - you typed:

1. expandingMenu(O);

in which you have 0 (the letter) instead of 0 (the number)...
You can spot these things easily with firebug - a plugin for firefox...

That easy..it is working already. Thanks a lot - happy new year!

hello,

i really tried it, but i don't get it.
i copyed this: http://www.rosscairns.com/downloads/expandingMenus.js
to my expandingMenues.js and i think, i don't have any javascript lines in my style.css.
but it don't work.

can please someone have a look in what mistake i did.?

thanks

www.heyfiete.com

this is my style.css
/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 10px;
    font-family: Verdana, sans-serif;
    background: #fff;
}

body.section-1 { }
body.section-2 { }
body.section-3 { }

a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }

a img { border: none; }

#menu {
width: 215px;
overflow: auto;
top: 0;
bottom: 0;
    left: 0;
position: fixed;
height: 100%;
    background-color: #fff;
}

#menu ul {
    list-style: none;
    margin: 0 0 12px 0;
}

#menu ul li.section-title { }

#content {
height: 100%;
margin: 0 0 0 215px;
top: 0;
}

.container {
padding: 5px 5px 25px 5px;
}

#content p { width: 400px; margin-bottom: 9px; }

p {
margin: 0 0 9px 0;
}

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }

#img-container    { margin: 0; padding: 0; }
#img-container p    { width: 400px; margin: 0; padding: 0 0 12px 0; }

#once { clear: left; }

oh sorry, my problem:

what I want is for the menu to only expand one section at a time, so for instance if 'Mercedes-Benz' is open, and you click 'Fujitsu Siemens', then the Mercedes menu will close and then the Fujitsu menu will open.

search the forum for the nine script...

i did,

but if i use the nine script in this way:

$(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();
});

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

});

i have the problem that every menu point is open and i can't close it.

i thought i have to use this one:

/*    Expanding Menus for Indexhibit
*        uses jquery
*
*    Created by Ross Cairns Mar 2008
*/

function expandingMenu(num) {
    var speed = 500;
    
    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 () {
            items.show(speed);
        }, function () {
            items.hide(speed);
        }
    )
}

but that's false.
i don't know what to change.

I wouldn't know... I can't go through large amounts of code, sorry.

One thing to note is that the nine-script works only with jquery 1.3.2 (and above) and the Ross Cairns script works with Jquery 1.1.2 (and above)

sorry for this.

i tried something and now it works. i think.
but there is still one big problem: every menue point which is on the first place can not be closed.
why is this so?

www.heyfiete.com

another problem is, that everytime one of the menue points (the one i opened al last) is open.
i tried so much in the expMenu but i don't know what to write in that ll menue points are closed.

has anybody an idea?

...the answer to your first question might be that the main/home page is in the first section.

By default the section an active exhibit (the exhibit you see on screen) will stay open.

Move it to another section with a hidden section title and set Hide Page from Index to Off.

The second question I don't understand, sorry...

i think the main/home page is, as you can see, the section "über mich".
i moved it to another section but i can't set it to OFF.
i do, but it's still there.

it's the only section with no "delete" button.

do you have another idea?

www.heyfiete.com

Validate your page...

You have an extra ending head tag within your body unclosed tags
Fix them and it will work!

i don't know if i really understand:

should i go to the style.css or the index.php?

start from the pre-nav area...

thanks a lot!!!

i got it!

it's me again,

another point which makes me going crazy:

if i click to "Softis" the menue opens, but i cant't close it so that at a time all menue points are closed. one of them is everytime open.

sorry for posting this, but my english isn't that good so the best way to understand:

$(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(500).animate({easing:"linear"});
$(this).nextAll().slideToggle(500);
});
});

i know i have to change something in this code, but i don't know where and what.
can you please help me a last time:)

It's because it works like that… same reason that for the "active" section open.

You know, we always love perfect things, but be conscious that your visitors won't see this little stuffs… Don't stay focused on micro bugs.

Nothing is perfect in life !
;)

you are so right:)

but i'm addictet to perfection:)
and i saw on another page that it can be done...