Flex Sub-menu items not fit in the browser window?

[venkat6134]

Hi all,
I am collecting the data from different tables and i prepare one dynamic menu...
but the problem is not showing sub-categories properly.(I think this is presentation problem). It goes top in browser and not visible properly from starting onwords....
See this page when mouseover on companies for better understand....
http://rfcables.org/country_dropdown.php

Give me some suggestions...

This is the javascript:

http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm

[ddadmin]

The script will reposition any sub menu "bottoms up" when there isn't enough space downwards to fully show the sub menu. Since in your case there isn't enough space upwards either to show the sub menu, it appears clipped from the top window's edge.

You can force the script to always display the sub menus downwards by finding the below line inside the .js file and commenting it out:


//y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y

[venkat6134]

Thank you for your reply...

After commenting that line, now it is showing nice...

but is there any option to add button like windows file menu(means some other sub-items are there to visit) after 10 sub-items...

Give me some guidance to add that into it... when there are more than 10 sub-items....

Thanking you...

[ddadmin]

Another thing you can try is just to explicitly set the height of very long sub ULs so the items scroll (via a scrollbar). For example:


<ul id="flexmenu1" class="flexdropdownmenu">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
<ul style="height:300px;overflow:scroll">
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
<li><a href="#">Sub Item 3.1a</a></li>
<li><a href="#">Sub Item 3.2a</a></li>
<li><a href="#">Sub Item 3.3a</a></li>
<li><a href="#">Sub Item 3.4a</a></li>
</ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
<ul>
<li><a href="#">Sub Item 5.1a</a></li>
<li><a href="#">Item Folder 5.2a</a>
<ul>
<li><a href="#">Sub Item 5.2.1a</a></li>
<li><a href="#">Sub Item 5.2.2a</a></li>
<li><a href="#">Sub Item 5.2.3a</a></li>
<li><a href="#">Sub Item 5.2.4a</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

[venkat6134]

Thank you for reply...

i used earlier this scroller, but the problem is when there is any sub-items in sub-menus... it is not comfortable to the end-user point of you and also scroller blocks the mouseover action...

Thats why i asked to put some small arrow-down button with the addition of menus if there is more than 10 items....

[hanji]

The script will reposition any sub menu "bottoms up" when there isn't enough space downwards to fully show the sub menu. Since in your case there isn't enough space upwards either to show the sub menu, it appears clipped from the top window's edge.

You can force the script to always display the sub menus downwards by finding the below line inside the .js file and commenting it out:


//y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y


Hello

I'm having the same problem.. but with the secondary drop down. Meaning, the menu from my parent works fine, but a submenu kicking out of my menu is positioning from the bottom up, and is clipped by the browser.

I commented the line above, and it's still doing the same thing. My menus are vertical menus, and I just updated my flexdropdown code to the latest/greatest.

Any suggestions?

Thanks!
hank

[Sonja]

The script will reposition any sub menu "bottoms up" when there isn't enough space downwards to fully show the sub menu. Since in your case there isn't enough space upwards either to show the sub menu, it appears clipped from the top window's edge.

You can force the script to always display the sub menus downwards by finding the below line inside the .js file and commenting it out:


//y=(parentlioffset.top+$ul.data('dimensions').h > docbottomedge)? y-$ul.data('dimensions').h+$ul.data('dimensions').parentlih : y



I am having the same problem. Can you give an example of how to "comment it out"

Thank you

[Sonja]

I'm so sorry, I didn't even notice the slashes. Everything was a blur last night from hours of reading code. My apologies!

Btw, thanks for answering the previous posts. It work for me too!