Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:10
Menu bouncing
Poster: LindaO
Dated: Monday March 20 2006 - 17:25:44 GMT
Whenever an item is selected in the menu it causes the content below the menu to bounce. It looks like the menu loading causes this. Does anyone know how to fix this problem? It is on our intranet so I can't provide a link.
Thanks
Poster: vikenk
Dated: Monday March 20 2006 - 17:33:50 GMT
Hi,
Can you give us a bit more information? For instance, it'll help to know if it happens in all browsers or just one type of browser.
Also, although you cannot provide a link, it'll help if you could cut and paste your menu_data.js file and/or some html.
I'm not sure what you mean about the "content below it to bounce". Do you mean that the content moves down the page to make room for the menu?
Also, is your menu in a table?
Just a little more info would be great for us to help you, which we'd be glad to do! :>)
Poster: Migru
Dated: Monday March 20 2006 - 17:38:25 GMT
Hi
looks like not properly installed in the table.
If so (it is in a table) please see:
http://www.milonic.com/tablemenu.php
Michael
Poster: LindaO
Dated: Monday March 20 2006 - 17:43:09 GMT
I thought I would quickly answer a couple of your questions. It looks like the content is moving down for the menu to load. I just tested it using Netscape and it doesn't bounce, but the menu doesn't react or look the same in Netscape. In netscape there is no drop shadow and the menu just pops in. In IE it looks like it kind of slowy loads and there is a drop shadow.
Poster: Migru
Dated: Monday March 20 2006 - 17:50:29 GMT
The "drop shadow" is visualized in IE only, not in any other browser. So this is nothing unusual.
Michael
Poster: LindaO
Dated: Monday March 20 2006 - 18:00:48 GMT
<body>
<!--Begin Masthead-->
<table cellpadding="0" cellspacing="0" border="0" width="760" height="68">
<tr valign="top">
<td width="110" class="bbg" height="46">
<img border="0" src="http://www.crossville-connections.com/inv/pics/logo2.jpg" width="287" height="40"></td>
<td width="650" class="mbbg" align="right" height="46">
<table align="right" cellspacing="0" cellpadding="0" border="0" height="29">
<tr class="cty-tou">
<td class="upper-masthead-corner" width="17" rowspan="2" style="background-image: url('http://www.crossville-connections.com/inv/pics/upper-nav-cnr.gif')" height="18"><a href="#main">
<td align="left" height="17">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><span class="spacer"> <font color="#FFFFFF"> </font></span><font color="#FFFFFF"><b>Home</b></font></td>
<td class="upper-masthead-divider" width="29" style="background-image: url('http://www.crossville-connections.com/inv/pics/upper-masthead-divider.gif')"> </td>
<td align="left"><b>
<font color="#FFFFFF">Signoff</font></a></b></td>
</tr>
</table>
</td>
<td width="40" height="17"></td>
</tr>
<tr>
<td colspan="2" height="1" class="cty-tou-border">
<img width="1" height="1" alt="" src="c.gif" /></td>
</tr>
<tr>
<td colspan="3" height="1"><img width="1" src="c.gif" height="8" alt="" /></td>
</tr>
<tr>
<td height="13"></td>
<td colspan="2" align="center" height="13">
</form>
<font color="#FFFFFF"><b>Inventory Management</b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="blbg" height="22" style="border-color: #FFFFFF; background-color: #FFFFFF">
<table width="760" cellspacing="0" cellpadding="0" border="0" height="9">
<tr>
<td height="9">
<table cellspacing="0" cellpadding="0" border="0" width="762">
<tr>
<td width="762">
<div class=milonic style="width: 756; height: 14">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="81%">
<tr>
<td width="100%"> <SCRIPT language=JavaScript src="../inv/milonic_src.js" type=text/javascript></SCRIPT>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=../inv/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=../inv/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="../inv/menu_data.js"></script></td>
</tr>
</table>
</td>
Poster: Migru
Dated: Monday March 20 2006 - 18:04:37 GMT
Hi
exactly what I said:
PLEASE, SEE:
http://www.milonic.com/tablemenu.php
and you should be able to do it as suggested.
Michael
Poster: vikenk
Dated: Monday March 20 2006 - 18:06:56 GMT
[quote="LindaO"]I thought I would quickly answer a couple of your questions. It looks like the content is moving down for the menu to load. [quote]
Is this happening only during the inital page loading of the menu, or does it happen every time a submenu appears?
The menu will not look the same in Netscape/Firefox because, as Michael pointed out, they do not support the drop shadow and may render the html differently.
If it's only happening on initial page load, and the menu is in a table, then what could be happening is that the rest of the content of the site is filling in before the menu so, when the menu comes in, the content pushes down to make room for it.
One way to resolve this is to make your table-cell height a fixed height in pixels (equal to the height of your menu) so the browser automatically reserves that amount of space for the menu and would elimiate the hopping effect.
Of course, I'm assuming that you're using the menu in a table and that it only happens during the initial menu load.
Poster: vikenk
Dated: Monday March 20 2006 - 18:09:46 GMT
Wow...you both wrote two replies while I was busy typing mine :>)
Poster: LindaO
Dated: Monday March 20 2006 - 18:10:45 GMT
It happens whenever the page is reloaded. We have a drop down selection thing on the page and when ever they choose an item the page reloads and that causes the bouncing effect.
Poster: LindaO
Dated: Monday March 20 2006 - 18:17:20 GMT
Thanks guys for your quick responses and help.
Vikenk I tried what you said and it fixed it. Thank you so much.
You guys are great!
Poster: vikenk
Dated: Monday March 20 2006 - 18:23:45 GMT
You're welcome, LindaO.
I assume, though, that you corrected the menu/table implementation as Michael suggested?
Poster: LindaO
Dated: Monday March 20 2006 - 18:34:39 GMT
No I didn't, it worked just by adjusting the cell height.
Poster: vikenk
Dated: Monday March 20 2006 - 18:40:32 GMT
I'm glad it worked for you, but you should correct the menu implementation in the table. Someday, it may cause a different headache for you if not implemented correctly in the table.
Also, the menu will load much faster if you place the script files as the first item after the opening <body> tag, as opposed to near the bottom, as you currently have it.