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:17
problem with relative position
Poster: zvrtus
Dated: Friday January 20 2006 - 15:12:57 GMT
Hi,
I use my menu with position="relative" attribute. Sometimes (I am not able to specify exactly on which occasion) in IE the submenu "jumps" into the upper left corner (like if postition=absolute) were set ...
thanks for help
zvrt
Poster: Ruth
Dated: Friday January 20 2006 - 18:06:10 GMT
Hi,
Without seeing the page it's going to be hard to be specific. If the menu is not in the table correctly, given the position="relative"; I'm assuming it's in a table, there can be a problem with submenu position in particular in IE for the Mac. If that's not the issue, we'll need to see the page or a test page set up the same.
Ruth
Is there any way to do a relative positioning?
Poster: rogerpoole
Dated: Friday January 20 2006 - 21:33:02 GMT
Ruth,
I'm having a similar problem with the horizonal menu. I'm not using tables, using css.
I've tried putting the nav in a div that was absolutely positioned in a larger nav that was relatively positioned. It worked in Firefox but nothing else. The submenus dropped down and right the same pixel distance as the div containing it was from the page top. (Ok, everyone is saying "What the ?")
If the div containing the main bar is top:20 pixels / left:200 pixels, then the main menu will be in the right place. BUT then sub menu drops down 20 pixels and goes to the right 200 pixels.
Is there any way to do a relative positioning? Can I do negative numbers for positioning the submenu?
Thanks
Rog
Poster: Ruth
Dated: Friday January 20 2006 - 21:51:48 GMT
Hi,
It is not recommended that you put the menu in a div, though I know some do and since I use IE there doesn't seem to be a problem, but I can't swear to how that works on other things like the older Opera, Netscape, Firebird and such. Also, you are using divs on a page, so you've got a div with divs in it and then in that inside div the menu which also has and is made up of divs, tables, spans ects. The various browsers seem to treat divs and in particular their placement and relation to each other differently.
To address this kind of issue we really do need to see the page, we need to see if the conflict is something to do with a stylesheet, with incorrect placement with regard a table, or a div though as I said it's not recommended. I suggest if it's going to be in a div, reiterating that I'm not recommending this, you use the same requirement as for placing it using position="relative"; in a table.
That's all I can give you without the page to see what's up.
Poster: zvrtus
Dated: Monday January 23 2006 - 8:59:06 GMT
I have the menu i a table cell:
Code:
<tr>
<td colspan="2">
<script language="JavaScript" type="text/javascript" src="js/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=js/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=js/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="js/data.php"></script>
<script type="text/javascript" src="js/treemenu.js"></script>
<script type="text/javascript" src="js/openmenusbyurl.js"></script>
</td>
</tr>
<td colspan="2">
<script language="JavaScript" type="text/javascript" src="js/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=js/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=js/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="js/data.php"></script>
<script type="text/javascript" src="js/treemenu.js"></script>
<script type="text/javascript" src="js/openmenusbyurl.js"></script>
</td>
</tr>
and there is the code of data.php
Code:
require "../inc/!_var.php";
echo
"
_scrollAmount=5; // Used for Netscape 4 scrolling
_scrollDelay=10; // Used for Netscape 4 scrolling
_menuCloseDelay=500; // The delay for menus to remain visible on mouse off
_menuOpenDelay=150; // The delay for opening menus on mouse over
_subOffsetTop=0; // Sub menu offset Top position
_subOffsetLeft=0; // Sub menu offset Left position
Goverfilter=\"Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)\";
Goverfilter=\"Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)\";
Goutfilter=\"randomdissolve(duration=0.3)\";
Goutfilter=\"\";
Goverfilter=\"\";
AllMargin=0;
treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=false; // Informs the system to on;y have one menu open at a time
with(tstyle1=new mm_style()){
ondecoration=\"underline\";
borderstyle = \"solid\";
subimage=\"js/white_arrow.gif\";
onsubimage=\"js/white_arrow_down.gif\";
bordercolor=\"black\";
borderwidth=0;
padding = \"0 0 0 6\";
fontfamily=\"Verdana, Tahoma, Arial\";
fontsize=\"11px\";
fontstyle=\"normal\";
fontweight=\"bold\";
subimageposition=\"middle right\" ;
separatorcolor=\"#ffffff\";
separatorsize=1;
subimagepadding=0;
imagepadding=0;
itemheight=23;
itemwidth=193;
offbgcolor=\"#cc0000\";
offcolor=\"#ffffff\";
//onbgcolor=\"#ddffdd\";
onbgcolor=\"#dad8e8\";
//oncolor=\"#000099\";
oncolor=\"#333399\";
clicksubimage=\"js/white_arrow_down.gif\";
pagebgcolor=\"#333399\";
}
sub1Style=new copyOf(tstyle1);
sub1Style.offcolor = \"#ffffff\";
sub1Style.offbgcolor=\"#8EA2BB\";
sub1Style.separatorcolor=\"#556E8C\";
sub1Style.padding = \"0 0 0 16\";
sub1Style.fontsize=\"11px\";
sub1Style.fontweight=\"normal\";
sub1Style.pagebgcolor=\"#8EA2BB\";
sub1Style.pagecolor=\"#000000\";
sub2Style=new copyOf(tstyle1);
sub2Style.offcolor = \"#000000\";
sub2Style.offbgcolor=\"#D6DDE6\";
sub2Style.separatorcolor=\"#8EA2BB\";
sub2Style.padding = \"0 0 0 26\";
sub2Style.fontsize=\"10px\";
sub2Style.fontweight=\"normal\";
sub2Style.pagebgcolor=\"#D6DDE6\";
sub2Style.pagecolor=\"#cc0000\";
tstyle1.clickcolor=\"#ffffff\";
tstyle1.clickbgcolor=\"#D70B0B\";
//tstyle1.clickimage=\"js/red_blip.gif\";
//tstyle1.clicksubimage=\"js/white_arrow_down.gif\";
with(new menuname(\"main Tree Menu\")){
orientation='vertical';
top=130;
left=0;
style = tstyle1;
alwaysvisible = 1;
itemwidth=193;
//margin=AllMargin;
position=\"relative\";
aI(\"text={$popisky['hlavni_strana']};url={$root_dir}?sekce=hlavni;\");
aI(\"text={$popisky['novinky']};url={$root_dir}?sekce=novinky\");
aI(\"text={$popisky['produkty']};showmenu=produkty;type=tree;\");
aI(\"text={$popisky['terminaly']};showmenu=terminaly;type=tree;\");
aI(\"text={$popisky['partneri']};url={$root_dir}?sekce=partneri\");
aI(\"text={$popisky['cenova_poptavka']};url={$root_dir}?sekce=cenova_poptavka\");
}
with(new menuname(\"produkty\")){
style = sub1Style;
margin=AllMargin;
aI(\"text={$popisky['_uvod']};url={$root_dir}?sekce=_uvod\");
aI(\"text={$popisky['_primy_vlak']};showmenu=primy_vlak;type=tree;\");
aI(\"text={$popisky['_jednotlive_zasilky']};url={$root_dir}?sekce=_jednotlive_zasilky\");
aI(\"text={$popisky['_podminky_prepravy']};url={$root_dir}?sekce=_podminky_prepravy\");
}
with(new menuname(\"primy_vlak\")){
style = sub2Style;
margin=AllMargin;
aI(\"text={$popisky['__o_produktu']};url={$root_dir}?sekce=__o_produktu\");
aI(\"text={$popisky['__navazna_spojeni']};url={$root_dir}?sekce=__navazna_spojeni\");
aI(\"text={$popisky['__jizdni_rad']};url={$root_dir}?sekce=__jizdni_rad\");
aI(\"text={$popisky['__objednavky_rezervace']};url={$root_dir}?sekce=__objednavky_rezervace\");
}
with(new menuname(\"terminaly\")){
style = sub1Style;
margin=AllMargin;
aI(\"text={$popisky['_terminaly_crsr']};url={$root_dir}?sekce=_terminaly_crsr\");
aI(\"text={$popisky['_terminaly_evropa']};url={$root_dir}?sekce=_terminaly_evropa\");
}
drawMenus();
";
echo
"
_scrollAmount=5; // Used for Netscape 4 scrolling
_scrollDelay=10; // Used for Netscape 4 scrolling
_menuCloseDelay=500; // The delay for menus to remain visible on mouse off
_menuOpenDelay=150; // The delay for opening menus on mouse over
_subOffsetTop=0; // Sub menu offset Top position
_subOffsetLeft=0; // Sub menu offset Left position
Goverfilter=\"Alpha(style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)\";
Goverfilter=\"Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)\";
Goutfilter=\"randomdissolve(duration=0.3)\";
Goutfilter=\"\";
Goverfilter=\"\";
AllMargin=0;
treeOffset=0; // Used to set the offset of sub menus
singleMasterMenu=false; // Informs the system to on;y have one menu open at a time
with(tstyle1=new mm_style()){
ondecoration=\"underline\";
borderstyle = \"solid\";
subimage=\"js/white_arrow.gif\";
onsubimage=\"js/white_arrow_down.gif\";
bordercolor=\"black\";
borderwidth=0;
padding = \"0 0 0 6\";
fontfamily=\"Verdana, Tahoma, Arial\";
fontsize=\"11px\";
fontstyle=\"normal\";
fontweight=\"bold\";
subimageposition=\"middle right\" ;
separatorcolor=\"#ffffff\";
separatorsize=1;
subimagepadding=0;
imagepadding=0;
itemheight=23;
itemwidth=193;
offbgcolor=\"#cc0000\";
offcolor=\"#ffffff\";
//onbgcolor=\"#ddffdd\";
onbgcolor=\"#dad8e8\";
//oncolor=\"#000099\";
oncolor=\"#333399\";
clicksubimage=\"js/white_arrow_down.gif\";
pagebgcolor=\"#333399\";
}
sub1Style=new copyOf(tstyle1);
sub1Style.offcolor = \"#ffffff\";
sub1Style.offbgcolor=\"#8EA2BB\";
sub1Style.separatorcolor=\"#556E8C\";
sub1Style.padding = \"0 0 0 16\";
sub1Style.fontsize=\"11px\";
sub1Style.fontweight=\"normal\";
sub1Style.pagebgcolor=\"#8EA2BB\";
sub1Style.pagecolor=\"#000000\";
sub2Style=new copyOf(tstyle1);
sub2Style.offcolor = \"#000000\";
sub2Style.offbgcolor=\"#D6DDE6\";
sub2Style.separatorcolor=\"#8EA2BB\";
sub2Style.padding = \"0 0 0 26\";
sub2Style.fontsize=\"10px\";
sub2Style.fontweight=\"normal\";
sub2Style.pagebgcolor=\"#D6DDE6\";
sub2Style.pagecolor=\"#cc0000\";
tstyle1.clickcolor=\"#ffffff\";
tstyle1.clickbgcolor=\"#D70B0B\";
//tstyle1.clickimage=\"js/red_blip.gif\";
//tstyle1.clicksubimage=\"js/white_arrow_down.gif\";
with(new menuname(\"main Tree Menu\")){
orientation='vertical';
top=130;
left=0;
style = tstyle1;
alwaysvisible = 1;
itemwidth=193;
//margin=AllMargin;
position=\"relative\";
aI(\"text={$popisky['hlavni_strana']};url={$root_dir}?sekce=hlavni;\");
aI(\"text={$popisky['novinky']};url={$root_dir}?sekce=novinky\");
aI(\"text={$popisky['produkty']};showmenu=produkty;type=tree;\");
aI(\"text={$popisky['terminaly']};showmenu=terminaly;type=tree;\");
aI(\"text={$popisky['partneri']};url={$root_dir}?sekce=partneri\");
aI(\"text={$popisky['cenova_poptavka']};url={$root_dir}?sekce=cenova_poptavka\");
}
with(new menuname(\"produkty\")){
style = sub1Style;
margin=AllMargin;
aI(\"text={$popisky['_uvod']};url={$root_dir}?sekce=_uvod\");
aI(\"text={$popisky['_primy_vlak']};showmenu=primy_vlak;type=tree;\");
aI(\"text={$popisky['_jednotlive_zasilky']};url={$root_dir}?sekce=_jednotlive_zasilky\");
aI(\"text={$popisky['_podminky_prepravy']};url={$root_dir}?sekce=_podminky_prepravy\");
}
with(new menuname(\"primy_vlak\")){
style = sub2Style;
margin=AllMargin;
aI(\"text={$popisky['__o_produktu']};url={$root_dir}?sekce=__o_produktu\");
aI(\"text={$popisky['__navazna_spojeni']};url={$root_dir}?sekce=__navazna_spojeni\");
aI(\"text={$popisky['__jizdni_rad']};url={$root_dir}?sekce=__jizdni_rad\");
aI(\"text={$popisky['__objednavky_rezervace']};url={$root_dir}?sekce=__objednavky_rezervace\");
}
with(new menuname(\"terminaly\")){
style = sub1Style;
margin=AllMargin;
aI(\"text={$popisky['_terminaly_crsr']};url={$root_dir}?sekce=_terminaly_crsr\");
aI(\"text={$popisky['_terminaly_evropa']};url={$root_dir}?sekce=_terminaly_evropa\");
}
drawMenus();
";
Poster: Ruth
Dated: Monday January 23 2006 - 12:04:47 GMT
You have placed the menu in the table incorrectly based on what you posted here. The calls for the files other than the actual main menu that goes in the table are not placed in the table cell, they go after the body tag.
http://www.milonic.com/tablemenu.php
Ruth
Relative positioning
Poster: rogerpoole
Dated: Monday January 23 2006 - 14:57:28 GMT
Ruth wrote:
Hi,
It is not recommended that you put the menu in a div, though I know some do and since I use IE there doesn't seem to be a problem, but I can't swear to how that works on other things like the older Opera, Netscape, Firebird and such. Also, you are using divs on a page, so you've got a div with divs in it and then in that inside div the menu which also has and is made up of divs, tables, spans ects. The various browsers seem to treat divs and in particular their placement and relation to each other differently.
To address this kind of issue we really do need to see the page, we need to see if the conflict is something to do with a stylesheet, with incorrect placement with regard a table, or a div though as I said it's not recommended. I suggest if it's going to be in a div, reiterating that I'm not recommending this, you use the same requirement as for placing it using position="relative"; in a table.
That's all I can give you without the page to see what's up.
It is not recommended that you put the menu in a div, though I know some do and since I use IE there doesn't seem to be a problem, but I can't swear to how that works on other things like the older Opera, Netscape, Firebird and such. Also, you are using divs on a page, so you've got a div with divs in it and then in that inside div the menu which also has and is made up of divs, tables, spans ects. The various browsers seem to treat divs and in particular their placement and relation to each other differently.
To address this kind of issue we really do need to see the page, we need to see if the conflict is something to do with a stylesheet, with incorrect placement with regard a table, or a div though as I said it's not recommended. I suggest if it's going to be in a div, reiterating that I'm not recommending this, you use the same requirement as for placing it using position="relative"; in a table.
That's all I can give you without the page to see what's up.
Ruth, here's a sample page.
Note, it is important for the bulk of the page to center in the browser.
http://www.wh2pdirect.com/tsp/interiorNAVjs.html
Thank you!
Roger
Poster: Ruth
Dated: Monday January 23 2006 - 16:02:00 GMT
Hi Roger,
I'm not really sure what you want. I can't see anyplace that you are using position="relative"; It looks like you have just put all the calls for the menu files in a div and want it there.
Where exactly do you want the menu? It looks centered, 20px from the top and offset to the right some pixels.
If that's the case, have you tried just setting it as
top=20;
screenposition="center";
left="offset=x";
where x is how far toward the right you want to shift it from center. So, if you want it 80px more toward the right you'd make it left="offset=80"; that will center the menu and then shift it 80 more pixels toward the right side of the page.
If that will work, then just move the calls for the menu to the first thing after the body tag.
I don't work with divs much so, I'm still playing trying to figure out what exactly that layout will be at various resolutions. I'll post back if I come up with anything else.
Ruth
Poster: rogerpoole
Dated: Wednesday January 25 2006 - 18:43:29 GMT
Ruth wrote:
Where exactly do you want the menu? It looks centered, 20px from the top and offset to the right some pixels.
A picture's gotta be worth a million words.
Here's a couple of Jpgs that show the problem.
On a tight screen
<http://www.wh2pdirect.com/tsp/menuprob/tightpage.jpg>
On a wide screen
<http://www.wh2pdirect.com/tsp/menuprob/loosepage.jpg>
It's the submenu that's killing me
I can't get it to float right.
Thanks again Ruth.
Rog
Poster: Ruth
Dated: Wednesday January 25 2006 - 21:30:24 GMT
Hi,
As I said, I don't work with divs so I don't know about your divs and how the page layout becomes centered, but as to the menu here is a solution that seems to work fine.
1. cut the main menu from the menu_data.js file and put it into its own file. Code the menu properties like this:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
add a drawMenus(); to the end of the file, and save it as embedded_main.js.
2. Save the menu_data.js file without the main menu in it.
3. put the call for the program files and the menu_data.js file immediately after the body tag:
Code:
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>
4. change your #pg div coding to top:40px;
5. right after the call for the menu files and before the div id=pg put this
Code:
<table align="right" border=0 cellpadding=0 cellspacing=0 WIDTH="760">
<tr><td height="20"> </td><td></td></tr>
<tr>
<td width=20%> </td><td><SCRIPT src="embedded_main.js" type=text/javascript></SCRIPT></td>
</tr>
</table>
<tr><td height="20"> </td><td></td></tr>
<tr>
<td width=20%> </td><td><SCRIPT src="embedded_main.js" type=text/javascript></SCRIPT></td>
</tr>
</table>
The table aligns right so the menu is now just where it was and the submenus open correctly. This gets around any problem with the menu being in a div, which is most likely what is causing the subs to open incorrectly. Placing it in the table like this, which is how it's supposed to be placed means that it will not have problems in some of the odd browsers like Mac IE.
Ruth