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:57
positionning menu with respect to HTML text
Poster: Jaco
Dated: Saturday August 12 2006 - 22:24:00 BST
Hello everyone, is it possible to have a menu's position on a page linked to the position of some HTML text on a page. Right now I have several floating one line menus that are positionned absolutely in the javascript code. If I add text to the page everything shifts downwards and I have to reposition everything. see http://www.fluidedesign.com/applets.htm
Thanks for any help,
Jacques
Poster: Ruth
Dated: Sunday August 13 2006 - 10:32:48 BST
Hi,
The best way to do that is to use the popmenu positioned by images. If you do it that way you can use a lot less files, and you would not need any 'main' help menus, only the subs and they can be in one file. I'm going to set it up so you can cut down on your files and you can use it or not, if you prefer to have all the separate file.
Because your menus use the same style, except for the border color, it would be much easier to have a styles_data.js file for the styles. The menus will read that data file, and it's easy to set up one style and then a 'copyOf' that style with only the border color changed for the left side menu. .
1. copy the following and save it as style_data.js
Code:
_menuCloseDelay=500 // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150 // The time delay before menus open on mouse over
_followSpeed=5 // Follow scrolling speed
_followRate=40 // Follow scrolling Rate
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
_scrollAmount=3 // Only needed for Netscape 4.x
_scrollDelay=20 // Only needed for Netcsape 4.x
with(menuStyle=new mm_style()){
onbgcolor="#8B5736";
oncolor="#FFFFFF";
offbgcolor="#FAF8D7";
offcolor="#000000";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
onborder="1px solid #aaaaaa";
separatorcolor="#2D729D";
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="#FFFFFF";
pagebgcolor="#999999";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter='randomdissolve(duration=0.5)';
//outfilter="Fade(duration=0.4)";
overfilter="randomdissolve(duration=0.5);Alpha(opacity=85)";
}
leftStyle=new copyOf(menuStyle);
leftStyle.bordercolor="#FF0000";//red
_menuOpenDelay=150 // The time delay before menus open on mouse over
_followSpeed=5 // Follow scrolling speed
_followRate=40 // Follow scrolling Rate
_subOffsetTop=10 // Sub menu top offset
_subOffsetLeft=-10 // Sub menu left offset
_scrollAmount=3 // Only needed for Netscape 4.x
_scrollDelay=20 // Only needed for Netcsape 4.x
with(menuStyle=new mm_style()){
onbgcolor="#8B5736";
oncolor="#FFFFFF";
offbgcolor="#FAF8D7";
offcolor="#000000";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
onborder="1px solid #aaaaaa";
separatorcolor="#2D729D";
separatorsize="0";
padding=5;
fontsize="12px";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="#FFFFFF";
pagebgcolor="#999999";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter='randomdissolve(duration=0.5)';
//outfilter="Fade(duration=0.4)";
overfilter="randomdissolve(duration=0.5);Alpha(opacity=85)";
}
leftStyle=new copyOf(menuStyle);
leftStyle.bordercolor="#FF0000";//red
2. Open the menu_data.js file and remove all that top stuff and the menuStyle, it is now in that style_data.js file. In each menu in that menu_data.js file where it says style=menuStyle; change it to style=leftStyle; Now the left menu and its subs will have red borders but will use all the rest of the info from the menuStyle in the style_data.js file.
3. Open the applets_data.js file and remove all the top stuff from it. It will use the style_data.js file. ALSO, change the menu name to Main Menu1. You shouldn't have two menus with the same name, it might confuse the program sometimes.
4. If you use the pop up menus for the help screenshots you can eliminate all the help main menus and put all the help submenus into one file and no style in that file either. So instead of all those separate files for each help menu, you would have one file for those help submenus - a small version with only three subs in it is below, but you'd just add the other subs to it above the drawMenus(). The file would have all the help submenus in it with a drawMenus() at the end, no style and no main menus, they are not needed if you use the popup method since the 'main' is the image on the page itself.
Code:
with(milonic=new menuname("screenshot1")){
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/npsha/npsha.html;image=help-screenshot.jpg;");
}
with(milonic=new menuname("screenshot2")){
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/Npshr.html;image=help2-screenshot.jpg");
}
with(milonic=new menuname("screenshot3")){
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/head_to_press/Head_to_press.html;image=help3-screenshot.jpg");
}
drawMenus();
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/npsha/npsha.html;image=help-screenshot.jpg;");
}
with(milonic=new menuname("screenshot2")){
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/Npshr.html;image=help2-screenshot.jpg");
}
with(milonic=new menuname("screenshot3")){
style=menuStyle;
overflow="scroll";
aI("url=http://www.fluidedesign.com/head_to_press/Head_to_press.html;image=help3-screenshot.jpg");
}
drawMenus();
On the page you will use the same image for each one of those submenu popups. This image uses id= and name= to work. Because of that, you can use the same image and just give it a different id and name for each submenu you want to pop up.
You can make your own image, or you can use the one below I made, just right click and save it. Let me know when you get it so I can remove it from my site.
Now, setting up the page to call each one of those submenus.
1. The code you need to do that is the same in each place, you just change the name of the image and the id of the image to correspond to the menu you want to open. The reason you put both a name and an id for the image is to make sure it works in all browsers. I forget which uses what but some use name and some use id, so make sure that the name and id are the same when you code the image. I just used shot1, shot2, shot3 etc. to match the submenu names i.e. shot1 is for screenshot1 submenu.
This first popup is for the 1st page image and would be
Code:
<img src=popup.gif border=0 name=shot1 id=shot1 onmouseover="popup('screenshot1','shot1')" onmouseout=popdown()>
The part after onmouseover="popup('menu name goes here','image name goes here')" So the first parameter is the name of the menu, the second the name of the image.
The second one would be
Code:
<img src=popup.gif border=0 name=shot2 id=shot2 onmouseover="popup('screenshot2','shot2')" onmouseout=popdown()>
And so on for each menu--
2. Placement of the image and the code:
Put the image just above the page image with which it corresponds putting a paragraph code between them.
Example 1 is for the first image, I included the td cell code so you can see exactly where I put it.
Code:
<TD>
<P><FONT face="Trebuchet MS,Courier,Monaco" size=1>This image and others
below in the same style come from a wonderful book called Slurry Pump
Basic published by <A href="http://www.svedala.nl/">Svedala</A>, a major
pump manufacturer</FONT></P><img src=popup.gif border=0 name=shot1 id=shot1 onmouseover="popup('screenshot1','shot1')" onmouseout=popdown()>
<P><A title="Click here to start applet"
href="http://www.fluidedesign.com/npsha/npsha.html"><IMG height=280
alt="Click here to run applet...thanks to Svedala for this image"
src="app_img_npsh2_med.gif" width=306 border=0></A></P>
<HR>
<P></P></TD>
<P><FONT face="Trebuchet MS,Courier,Monaco" size=1>This image and others
below in the same style come from a wonderful book called Slurry Pump
Basic published by <A href="http://www.svedala.nl/">Svedala</A>, a major
pump manufacturer</FONT></P><img src=popup.gif border=0 name=shot1 id=shot1 onmouseover="popup('screenshot1','shot1')" onmouseout=popdown()>
<P><A title="Click here to start applet"
href="http://www.fluidedesign.com/npsha/npsha.html"><IMG height=280
alt="Click here to run applet...thanks to Svedala for this image"
src="app_img_npsh2_med.gif" width=306 border=0></A></P>
<HR>
<P></P></TD>
Example 2 goes with the second image on the page
Code:
<TD><img src=popup.gif border=0 name=shot2 id=shot2 onmouseover="popup('screenshot2','shot2')" onmouseout=popdown()><p><A title="Click here to start applet"
href="http://www.fluidedesign.com/Npshr.html"><IMG height=346
alt="Click here to run appplet....Oh dear, I`m cavitating......thanks to Svedala for this image"
src="app_img_npsh1_med.gif" width=306 border=0></A>
<HR>
<P></P></TD>
href="http://www.fluidedesign.com/Npshr.html"><IMG height=346
alt="Click here to run appplet....Oh dear, I`m cavitating......thanks to Svedala for this image"
src="app_img_npsh1_med.gif" width=306 border=0></A>
<HR>
<P></P></TD>
If you use this and set up the files as noted, the calls for your files would be the following
Code:
<!--
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
Please visit http://www.milonic.com/ for more information.
Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.
The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use.
Free, Commercial and Corporate Licenses are available from our website.
You also need to include a link back to http://www.milonic.com/ if you use the free license.
All Copyright notices MUST remain in place at ALL times.
This includes the first three lines of this notice on every page that uses the menu.
If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->
<SCRIPT language=JavaScript src="milonic_src.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT language=JavaScript src="style_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="applets_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="shots_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="menu_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="tooltips.js"
type=text/javascript></SCRIPT>
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
Please visit http://www.milonic.com/ for more information.
Although this software may have been freely downloaded, you must obtain a license before using it in any production environment.
The free use of this menu is only available for Non-Profit, Educational & Personal Web Sites who have obtained a license to use.
Free, Commercial and Corporate Licenses are available from our website.
You also need to include a link back to http://www.milonic.com/ if you use the free license.
All Copyright notices MUST remain in place at ALL times.
This includes the first three lines of this notice on every page that uses the menu.
If you cannot comply with all of the above requirements, please contact us to arrange a license waiver.
-->
<SCRIPT language=JavaScript src="milonic_src.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</SCRIPT>
<SCRIPT language=JavaScript src="style_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="applets_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="shots_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="menu_data.js"
type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="tooltips.js"
type=text/javascript></SCRIPT>
I hope that helps, and that I was clear enough. It's long but I wanted to make sure I gave information on everything correctly. If you need more help, just post back.
Ruth
many thanks...
Poster: Jaco
Dated: Sunday August 13 2006 - 21:26:22 BST
Thanks Ruth for all your help and hard work on this. I haven't digested everything yet but it sounds like exactly what I am looking for. I have downloaded the image.
Poster: Ruth
Dated: Monday August 14 2006 - 2:48:58 BST
Hi,
Well, since I did everything to make sure it would work, I guess I should have uploaded things.
I've put up a zip file. It has in it
Code:
applets_test.htm
which is your page with all your paths and everything. On that is coded the pop menus. I think, hope, I got them in the right place. There is also all the data files. That popup.gif you got, if you put it in your images folder, the page in the zip is coded as image/popup.gif for those popups. I figured if I named it applets_test.htm it wouldn't interfere with anything you have up and you could just upload it and everything should work so you can check it out.The page has the pop menu coded on them and I used the comments tags to do a begin and end for each pop menu so the coding would stand out when viewing the source while I was trying to test it yesterday. I left that in so it should be easy to see.
LINK REMOVED
Let me know when you get it and I'll remove it.
Ruth
Poster: Jaco
Dated: Monday August 14 2006 - 9:30:32 BST
I'm having a little problem.I have tried to make both strategies work at once to make sure that when I cancelled the old one that everything would be OK.
see http://www.fluidedesign.com/applets.htm
When I take out the line that calls for the old screen shot display the new one can't seem to find the image file. Kind of hard to explain
see http://www.fluidedesign.com/applets_new.htm
Poster: Ruth
Dated: Monday August 14 2006 - 12:38:18 BST
Hi,
You didn't upload the page I had in the zip file. When I made that page, I named it different than yours and I named all the necessary js files different so that they would not overwrite your existing files and the page could be up at the same time as the original.
Try just uploading the files I sent in the zip. The left_data.js, applets_top_data.js, shots_data.js, styles_data.js should go wherever you have the original data files, it looks like that's the root directory based on the code since there's no sub directory listed
Code:
<SCRIPT language=JavaScript src="milonic_src.js" type=text/javascript></SCRIPT>
I left the page exactly as your other, except for putting the popup calls on it, so the paths to the images should be correct. I also left the paths in the new files the same as the old so they should just call the images from where they now exist.
So, try just uploading the page as it is it should work.
If it doesn't then post back and I will check it again. I tried to be very careful to get all the paths correct, but who know
Ruth
Poster: Jaco
Dated: Monday August 14 2006 - 13:27:10 BST
Thanks for all your help Ruth but there appears to be something wrong but please don't feel that you have to fix it. I will plug away at it until I find what's wrong.
Jacques
Poster: Ruth
Dated: Monday August 14 2006 - 19:23:27 BST
Hi Jacques,
I am so sorry. The error is mine 
Can you download the new zip? I promise you it will work. I made a mistake as I was doing a find and replace in the shots_data.js file when I was trying to set it up so it had the correct path to the images based on your site.
Since I was using it my desktop, I had all the images in the same folder as the page. So the code for the images in the shots_data.js file was image=help_screenshot.jpg, for example. So, I did a find/replace so that the images would have the correct path. Unfortunately I ended up removing the image= part of the parameter and it became
Code:
aI("url=http://www.fluidedesign.com/npsha/npsha.html;http://www.fluidedesign.com/images/help-screenshot.jpg;");
There's no image= parameter so it can't find it since the menu isn't looking for it. Now I see why you put the calls for all those original help_screenshot.js files.
I am so so sorry, and I should have caught it when I was trying to see what was wrong last night.
You can just upload the things in the zip file as I renamed them so they wouldn't go over your original page or the one you've been using, the applets_new one.
I added a 1 to all the files so it would be shots_data1.js, applets_top_data1.js and so on. This should work with no problem since I didn't find any other dumb things I did
http://www.poems2u.com/1/shots1.zip
Again, I apologize for causing you all that trouble.
Ruth
Poster: Jaco
Dated: Monday August 14 2006 - 21:10:28 BST
My poor dear, this is really no problem and I thank you very much again.
Jacques
Poster: Ruth
Dated: Monday August 14 2006 - 21:33:22 BST
Hi Jacques,
Thanks
And, if you have any problems with the new one, just post back there and I'll try and find whatever other dumb thing I did
Ruth