Indexhibit^TM
Index + Exhibit

Hi,
I have a question:
I would like make this in the main menu:

Exemple
Ex1
Ex2
Ex2.01
Ex2.02
Ex3

How i can do it?
I'm sorry for my english, i'm french.

Thanks you.

http://www.pointdefuite.net

Hello,
Sorry, you can't do that without a lot of coding skills.

Désolé.

Thank you for your answer.
Can you tell me how to procede in few words please...
and i will manage on my own
Please. I'm motivated
Thank you very much.

Learn PHP. This is really not that simple...takes a good deal of skill.

Ok...
Thanks for your quickness.

Hi all,

I've been working on an approach to two-level menus that may suit you.

My goals were the following:

1. Generate menus with two level of depth
2. Implement expanding menus on top of it
3. Minimize the tampering with the core of indexhibit or its data model

The way you manage the nesting in the administration tool is as follows:

* Exhibits are created in the normal way, no matter the nesting level they are.
* When you need nested exhibits, you give them a "nested" name of the format <subsection title> / <exhibit title>. (Please notice the blanks before and after the slash.)
* The code provided below will do the trick:
    - It detects the nested exhibits and creates a subsection that groups all the correlative exhibits that share the same subsection title.
    - The menu displays the nested exhibits without the subsection title (i.e. <exhibit title>)
    - Macro <%title%> will still provide the full name of the slide <subsection title> / <exhibit title>

I found this approach very simple and straightforward.

Following your example:

Exemple
  Ex1
  Ex2
    Ex2.01
    Ex2.02
  Ex3

You'll create under section Exemple the following exhibits:
* Ex1
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

Et Voilà!

1. You will get the following HTML output:
2. <ul class='<strong>section</strong>'>
3. ¬†¬†<li class='<strong>section-title</strong>'><em>Exemple</em></li>
4. ¬†¬†<li><a href='...'><em>Ex1</em></a></li>
5. ¬†¬†<li class='<strong>subsection-title</strong>'><span><em>Ex2</em></span>
6. ¬†¬†¬†¬†<ul class='<strong>subsection</strong>'>
7. ¬†¬†¬†¬†¬†¬†<li><a href='...'><em>Ex2.1</em></a></li>
8. ¬†¬†¬†¬†¬†¬†<li><a href='...'><em>Ex2.2</em></a></li>
9.     </ul>
10.   </li>
11. ¬†¬†<li><a href='...'><em>Ex3</em></a></li>
12. </ul>

As you can see, sections/subsections and titles are given appropriate classes to allow for easy styling and simple manipulation with JQuery.

In order to achive this, I made the following changes to the basic indexhibit installation:

1. Changes to /ndxz-studio/site/plugin/index.php:

Modify function sectional() in order to render menus with the structure described above.
Note: The variable $separator (see line highlighted in bold below) defines the string used as "nesting separator". The value can be customized of course as needed. It is " / " by default. (Please notice the blanks before and after the slash.)

1. // sections navigation
2. function sectional()
3. {
4.   $OBJ =& get_instance();
5.   global $rs, $default;
6.  
7.   $pages = $OBJ->db->fetchArray("SELECT id, title, url, 
8.     section, sec_desc, sec_disp, year, secid    
9.     FROM ".PX."objects, ".PX."sections 
10.     WHERE status = '1' 
11.     AND hidden != '1' 
12.     AND section_id = secid  
13.     ORDER BY sec_ord ASC, ord ASC");
14.     
15.   if (!$pages) return 'Error with pages query';
16.   
17.   foreach($pages as $reord)
18.   {
19.     $order[$reord['sec_desc']][] = array(
20.       'id' => $reord['id'],
21.       'title' => $reord['title'],
22.       'url' => $reord['url'],
23.       'year' => $reord['year'],
24.       'secid' => $reord['secid'],
25.       'disp' => $reord['sec_disp']);
26.   }
27.   
28.   $s = '';
29. <strong>¬†¬†$separator¬†=¬†'¬†/¬†';¬†¬†¬†// Nesting Separator</strong>
30.   $len_separator = strlen( $separator );
31.   
32.   foreach($order as $key => $out)
33.   {
34.     $s .= "<ul class='section'>n";
35.     
36.     if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>n";
37.  
38.     $nested = "";
39.     $nesting = false;
40.     
41.     foreach($out as $page)
42.     {
43.       $active = ($rs['id'] == $page['id']) ? " class='active'" : '';
44.  
45.       // -- Compute if nested or not
46.       $title = $page['title'];
47.       $pos = strpos( $title, $separator );
48.       
49.       if ( $pos === false )
50.       {
51.         $new_nested = "";
52.       }
53.       else
54.       {
55.         $new_nested = substr( $title, 0, $pos );
56.         $title = substr( $title, $pos + $len_separator );
57.       }
58.  
59.       $close_nesting = $nesting && ( ( $new_nested == "" ) || ( $new_nested != $nested ) );
60.       
61.       if ( $close_nesting )
62.       {
63.         $nesting = false;
64.         $nested = "";
65.         $s .= "</ul></li>n";
66.       }
67.       
68.       $open_nesting = !$nesting && ( $new_nested != "" );
69.       
70.       if ( $open_nesting )
71.       {
72.         $nesting = true;
73.         $nested = $new_nested;
74.         
75.         $s .= "<li class='subsection-title'><span>" . $nested . "</span>n";
76.         $s .= "<ul class='subsection'>n";
77.       }
78.  
79.       // Regular menu entry
80.       $s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick="do_click();">" . $title . "</a></li>n";
81.     }
82.     
83.     if ( $nesting ) 
84.     {
85.       // Closes last open nesting, if any  
86.       $s .= "</ul></li>n";
87.     }
88.     
89.     $s .= "</ul>nn";
90.   }
91.  
92.   return $s;
93. }

2. Changes to /ndxz-studio/site/<your-theme>/index.php:

1. Include a new javascript file to manage menu expansion and the initialization code for the menus (marked in bold within existing code in the following excerpt):
2. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
4. <strong><script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingTwoLevelMenus.js'></script></strong>
5. <plug:front_lib_js />
6. <script type='text/javascript'>
7. path = '<%baseurl%>/files/gimgs/';
8.  
9. var old_click;
10.  
11. $(document).ready(function()
12. {
13.   setTimeout('move_up()', 1);
14.  
15. <strong>  initializeAllMenus();</strong>
16. }

3. Create javascript file /ndxz-studio/site/js/expandingTwoLevelMenus.js:

1. /*  Expanding Two-Level Menus for Indexhibit
2.  *    uses jquery
3.  *
4.  *  Created by H. Madrona  Aug 2010
5.  *
6.  *  Based on expandingMenu.js by Ross Cairns  Mar 2008
7. */
8.  
9. var _ItemsToCollapse = [];
10.  
11. function initializeAllMenus()
12. {
13.   /* Initialize menus */
14.   $("#menu ul.section").each( function (index) { expandingMenu( index ); } );
15.   
16.   /* Initialize submenus */
17.   $("#menu li.subsection-title").each( function (index) { expandingSubmenu( index ); } );
18. }
19.  
20. function expandingMenu(num) 
21. {
22.   var speed = 250;
23.   
24.   var menu = $("#menu ul.section").eq(num);
25.   var item_title = menu.children(":first");
26.   var items = menu.children( ":not(:first)" );
27.   
28.   _ItemsToCollapse.push( items );
29.   
30.   /* hide items if not active */
31.   if ( ( items.is(".active") == false  ) && ( items.children( "ul.subsection" ).find( ".active" ).length <= 0 ) ) {
32.       items.hide();
33.   }
34.  
35.  
36.   /* add click functions + pointer to title */
37.   item_title.css({cursor:"pointer"}).click(
38.     function () {
39.       if ( items.is( ":hidden" ) )
40.       {
41.         items.show(speed);
42.         for ( var i = 0; i < _ItemsToCollapse.length; i++ )
43.         {
44.           if ( i != num ) _ItemsToCollapse[i].hide(speed);
45.         }
46.       }
47.       else
48.       {
49.         items.hide(speed);
50.       }
51.     }
52.   );
53. }
54.  
55. var _SubitemsToCollapse = [];
56.  
57. function expandingSubmenu(num) 
58. {
59.   var speed = 250;
60.   
61.   var menu = $("#menu li.subsection-title").eq(num);
62.   var item_title = menu.children( "span" );
63.   var items = menu.find( "ul li" );
64.       
65.   _SubitemsToCollapse.push( items );
66.   
67.   /* hide items if not active */
68.   if ( items.is(".active") == false ) {
69.       items.hide();
70.   }
71.  
72.   /* add click functions + pointer to title */
73.   item_title.css({cursor:"pointer"}).click(
74.     function () {
75.       if ( items.is( ":hidden" ) )
76.       {
77.         items.show(speed);
78.         for ( var i = 0; i < _SubitemsToCollapse.length; i++ )
79.         {
80.           if ( i != num ) _SubitemsToCollapse[i].hide(speed);
81.         }
82.       }
83.       else
84.       {
85.         items.hide(speed);
86.       }
87.     }
88.   );
89.  
90. }

Hope this helps.

Cheers.

Can you show us this in action? A link?

Ooopss!

Some of the <code> tags considered the previous line as code since there was no blank line in between.

Hi Vaska!

Great job. Have a look at it here. I use another separator.

Blancahelga (test)

You can see nested options in sections "ilustraci√≥n" and "** test **"

Hi Vaska!

I just realized the code I posted is missing the backslashes in the "\n" chars and that the <strong> tags I inserted in the code sections have been escaped and displayed as text.

I made the following substitutions to the code before posting:
" " ==> &nbsp;
">" ==> &gt;
"<" ==> &lt;

What are the escaping rules applied to the code by default? What is really needed to be taken care of and what is done automatically?

I'll re-post the code with the appropiate corrections.

Thanks in advance.

I usually encode all entities and post the code without code tags...
Or -even better - put everything in a zip or text file, upload it in a dropbox acount and post the link here...

PS- Thanks for sharing!!!

Ok, I see it now...

Hi arsondpi,

Here is the sample code ready for download.

PS - My pleasure!!!

I think people will be interested in this. It's hard for me to review all this code (at this point) but I see nothing dangerous (and hm clearly knows what he/she is doing) here...so I give it up a thumbs up.

;)

I'm glad you liked it. The idea behind it is very simple indeed.

@hmadrona Thank you it works great. I do have one question/request for you.

Is there a way to make the 'subsection title' a link to 'subsection title' page?

so,

* Ex1
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

i.e. Make Ex2 a link to Ex2 page rather than just toggle for sub-sub menu drop down

Any help would be appreciated. What you've done so far is fantastic.

it's somebody testing this?, the link posted before doesn't work for me.

@bruno... i am using it on my site and it works. which link are you referring to? check out @hmadrona's 'download' link

sorry, now works fine.
:)

Bruno

@thingsthings It is certainly doable. Let me have some spare time to work on it. I'm glad you liked it too... It was a recurring topic in the Forum and I think this is an simple approach for everyone.

@thingsthings Please download and check the following version. Here is the link

Now if you want a subsection with a proper page (not just a open/close option), you just have to create an exhibit with the name of the nested section preceding the nested exhibits:

Following your example, but giving Ex2 an exhibit:

Exemple
  Ex1
  Ex2
    Ex2.01
    Ex2.02
  Ex3

You'll create under section Exemple the following exhibits:
* Ex1
* Ex2
* Ex2 / Ex2.01
* Ex2 / Ex2.02
* Ex3

If exhibit Ex2 is not created, the nesting mechanism will work as in the initial version.

You can play with a working sample in Blanca Helga (test). Go to section "** test **" and check option "ventanas".

@thingsthings - have you got an url to see?

@hmadrona - first of all thanks for sharing, great work!

I'm testing the last version you posted, here is the main page where I'm working.
I've followed the instructions and everything is working but I have a few issues:
1 - as you can notice I have 2 sections there: info and works. when you first open the page the info section (no subsections in it) is expanded while works is correctly closed.
I'd rather like to have them both closed... any idea why they display differently?
2 - when I expand the works section there are 4 list items, where the 3rd only (projects) has a subsection: why is there that space between the 3rd and 4th list item? imho there shouldn't be any... (I know I can eventually correct it via css, but I don't want to play with css yet)
3 - when projects is clicked the page opens and the subtitle item (projects / il filo) shows correctly, but if I click again on projects it doesn't close as I expected (I was using ross cairns's script before), but it closes and re-expands immediately after.
is it that the intended normal behaviour? how to keep the open/close under click control?
any hint would be much appreciated :-)

@rickykappa Thank you. Regarding your issues, here are my comments:

1 - Section info is displayed open because the active option is info / home though it is not highlighted in any way. You can see that because the <li> wrapping exhibit home has class "active". The expandable menu code is implemented to show the active option, be it an exhibit or a nested exhibit.

2 - As you suspected, this gap is due to CSS settings. You can see that in "sytle.css", line 41, there is a rule that gives a bottom margin to any <ul> within the #menu <div>, no matter the nesting level:

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

You will have to override that rule to your liking for nested subsections.

3 - This was a coding issue (when implementing the behavior there was some JQuery DOM manipulation that didn't let me see the error). Please check the following version you can download from here

thanks a lot! :-)

Hi hmadrona & others -

couple of questions :: LINK

1. 1. I have a #menu ul li.active a giving an active highlight.  When clicking on a section that contains sub-sections, the highlight shows up on all things under the main section, and doesn't change until you click on an actual subsection.  How can i give a more specific active behavior, which only focuses on one sub section? (look at CURRENT>Tit For Twat)

2. there is one section (ABOUT>New & Press), which contains no subsections, but when you click it closes the expanded menu. I thought it had to do with the "&" in my section name, but removing or renaming doesn't seem to change anything. What's the deal?

Appreciate the help MUCHO.

sorry for the formatting problem - let me try again -

couple of questions, here is my Link

1. I have a "#menu ul li.active a" giving an active highlight. When clicking on a section that contains sub-sections, the highlight shows up on both main section and subsections, and doesn't change until you click on an actual subsection. How can i give a more specific active behavior, which only focuses initially on one sub section? (look at CURRENT>Tit For Twat)

2. Expanding menu issue - there is one section (ABOUT>New & Press), which contains no subsections, but when you click it, it closes the expanded menu. I thought it had to do with the "&" in my section name, but removing or renaming doesn't seem to change anything. Is it because it is called "News"??

Appreciate the help MUCHO.

I honestly don't know much about this particular piece of code. It's a contributed piece of code...it's a little difficult for us to support everything that people post here (and in some cases they aren't either finished or even quality pieces of code).

Hopefully, somebody will turn up with some insight on things. ;)

Found the fix to the first problem i stated above. By changing the main section page to "unpublished", while keeping the subsections "published" the active state works properly.

Still having a strange quirk with the expanding menu close on the "news and press" section. Will try my luck in a discussion more focused on expanding menu solely.

Hello people. First of all thanks for sharing would be lost without you. 2nd, I 'm still trying to get this to work but am feeling very clueless right now. i have downloaded all the files and put them in the right folders ( 'Your Theme' folder into ndxz-studio/site.'Expandingtwolevelsmenues.js' into ndxz-studio/site/js and 'Index.php' from plugin folder to replace the index.php file in my original ftp plugin folder at ndxz-studio/site/plugin ).

I've refreshed and in my admin area of indexhibit i have created some exhibts under my 'Archive' section which i'm trying to get to drop down from the 'Archive' section title into one sub menu title then from that the exhibit but nothing is happening. is the way i'm naming the exhibits wrong (date / society) or should it be / . sorry for the dumb question but i've thought of everything else and i dont know what else it can be now, i'm going loopy loopy crazy crazy. please help :/

http://www.manmadelog.com/

Hi Folks,
I don´t know what to do..
The expandingTwoLevelsMenu was working fine.. until I changed something.

I did all work before in the sample theme folder but my system was still in eatock theme. So I switched it and nothing is working anymore.
After trying thousand of time to get things right I deleted everything - even the SQL part of my server and createt a new database and startet working in a new folder setting upe everything new.
Now I am at the same part and it is not working again?
I am going nuts!!

Has anybody any idea what to do?
I had a look for a couple of threads about the id.. but now I´ve got a totaly new database.

thanks for you help

bastian

http://www.basthies.de/neu

The Reisen Part for Example
When it was working it has been
0- Reisen
1- Spanien
2- Andalusien

0- Reisen
1- Indien
2- Amritsar

sorry for three postings - I got the massage page not found...

Hi, I'm wondering if anyone can help me tweak this a little. I'm trying to make the first level of menus be expanded all the time (Exemple). Then clicking a sub menu would expand that as usual. Also is there a way to indent the sub-sub-menu expanded links a little to differentiate them from the other sub-menus? Thanks in advance.

I figured the above questions out. One more:

It seems this procedure is screwing up my urls... for example where i used to have:

http://hmillerdesign.com/index.php?/projects/harmony-fund/

I now have:

http://hmillerdesign.com/index.php?/projects/misc--harmony-fund/

(where misc is the category)
Is there any way around that?

Hi there!

First of all, thanks hmadrona for sharing! Great job! I've also seen other great examples by BrunoGiliberto, hwm187, basthies...

I'm trying to get the expandable menu working, but I can't and it's driving me crazy! This is my site, and I'm trying to create 4 sub-menus under the section "Projects". The exhibits are created, but I can't get the expandable menu work. The sub-sections and exhibits are shown in the same level and they're as stuck as I am.
Any clues?

Thanks in advance & merry christmas!

Hi there!

First of all, thanks hmadrona for sharing! Great job! I've also seen other great examples by BrunoGiliberto, hwm187, basthies...

I'm trying to get the expandable menu working, but I can't and it's driving me crazy! This is my site, and I'm trying to create 4 sub-menus under the section "Projects". The exhibits are created, but I can't get the expandable menu work. The sub-sections and exhibits are shown in the same level and they're as stuck as I am.
Any clues?

Thanks in advance & merry christmas!

Hi there!

First of all, thanks hmadrona for sharing! Great job! I've also seen other great examples by BrunoGiliberto, hwm187, basthies...

I'm trying to get the expandable menu working, but I can't and it's driving me crazy! This is my site, and I'm trying to create 4 sub-menus under the section "Projects". The exhibits are created, but I can't get the expandable menu work. The sub-sections and exhibits are shown in the same level and they're as stuck as I am.
Any clues?

Thanks in advance & merry christmas!

wow!

I'm sorry about the three posts :(
It kept telling me that there was an error uploading the post... That wasn't intentional.

Please erase two of the posts... sorry again!

I still can't find where the problem is...

Is this a problem in my theme's index.php file? In that case I guess it has something to do with the next phrases:

1. <plug:front_lib_css />
2. <plug:front_dyn_css />
3. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/jquery.js'></script>
4. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/cookie.js'></script>
5. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingMenus.js'></script>
6. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/expandingTwoLevelMenus.js'></script>
7. <plug:front_lib_js />
8. <script type='text/javascript'>
9. path = '<%baseurl%>/files/gimgs/';

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

Thanks a lot!

This doesn't work anymore, does it?

I've tried installing the custom code about 10 times and have had zero luck.

It appears to be working on the author's site though (**test** section): http://www.blancahelga.com/www/es/

first things first,
my site: http://bradleypitts.info/Index_NEW.html

i am using hmadrona's script, but can't figure a few things out. any help would be greatly appreciated...

1) how can i get the "Projects" menu to stay open all the time?

2) on my site, if you notice, there are two exhibitions named "SingularOscillations". one has a submenu titled "EvenHorizons" the other not. i would like this to work like the "BlindSpots" exhibition that displays info when you click it as well as displaying the submenu "#3". any tips as to why "SingularOscillations" is working differently?

3) is there a way to eliminate the gap below exhibitions with submenus, for example "BlindSpots"?

4) i would like to be able to have exhibitions with two words. for example "Blind Spots" instead of "BlinSpots". doing this seems to break the submenu script though. is there a fix?

5) and a non-submenu question... can the site title (in my case "B R A D L E Y P I T T S") serve as a link to bring viewers back to the home page?

thanks in advance. apologies for noob questions....
b

first things first,
my site: http://bradleypitts.info/Index_NEW.html

i am using hmadrona's script, but can't figure a few things out. any help would be greatly appreciated...

1) how can i get the "Projects" menu to stay open all the time?

2) on my site, if you notice, there are two exhibitions named "SingularOscillations". one has a submenu titled "EvenHorizons" the other not. i would like this to work like the "BlindSpots" exhibition that displays info when you click it as well as displaying the submenu "#3". any tips as to why "SingularOscillations" is working differently?

3) is there a way to eliminate the gap below exhibitions with submenus, for example "BlindSpots"?

4) i would like to be able to have exhibitions with two words. for example "Blind Spots" instead of "BlinSpots". doing this seems to break the submenu script though. is there a fix?

5) and a non-submenu question... can the site title (in my case "B R A D L E Y P I T T S") serve as a link to bring viewers back to the home page?

thanks in advance. apologies for noob questions....
b

first things first,
my site: http://bradleypitts.info/Index_NEW.html

i am using hmadrona's script, but can't figure a few things out. any help would be greatly appreciated...

1) how can i get the "Projects" menu to stay open all the time?

2) on my site, if you notice, there are two exhibitions named "SingularOscillations". one has a submenu titled "EvenHorizons" the other not. i would like this to work like the "BlindSpots" exhibition that displays info when you click it as well as displaying the submenu "#3". any tips as to why "SingularOscillations" is working differently?

3) is there a way to eliminate the gap below exhibitions with submenus, for example "BlindSpots"?

4) i would like to be able to have exhibitions with two words. for example "Blind Spots" instead of "BlinSpots". doing this seems to break the submenu script though. is there a fix?

5) and a non-submenu question... can the site title (in my case "B R A D L E Y P I T T S") serve as a link to bring viewers back to the home page?

thanks in advance. apologies for noob questions....
b

sorry for the triple post! typical noob mistake, i hope!
(fyi- the forum displays an error message when i post)

@interr0bangr - seems to be working for me. maybe if you post more info about what how your uploading the files (which folders etc.), i could try to help....

in case anyone else is interested, i figured out the answer to my question #2 above:

in the Exhibits:Main screen of your ndxz-studio/ your exhibits and sub-exhibits have to be ordered such that sub-exhibits are directly below their respective exhibits.

still searching for answers to the rest of my questions, in case anyone has tips...

ignore my question #3 above, for some reason it only happens in the indexhibit preview, but not in a browser.

chipping away....

i've applied this script successfully to a site (not live yet).

Does anyone noticed some flickering sometimes, like the menu takes time to initialize ?

I've seen it a few times in safari and firefox on MacOsX.

In chrome in MacOSX it's even worst: in every click the menu appears full opened and then slowly gets back in to place.

I think it has something to do how the browsers take care of the jquery $(document).ready
call.

Any ideas how to fix this?

Hi I tried using the script above, but for some reason I think /site/plugin/index.php file may be giving me a problem?

1. In functional sectional(), where in line 184
2. $s .= "< ul class='section'>n";
3. is showing up as simply as < ul > instead of < ul class='section' >

Any ideas on how to fix this?