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:25
Add my crumb trail to followscroll section of menu?
Poster: ocryan
Dated: Friday November 18 2005 - 20:15:26 GMT
Currently I have my menu set to followscroll so it appears as the user scrolls down the page, which is great. However, when the page loades, the "crumb Trail" of where the user has been is right below the menu. Since this is also a form of navigation, I would like for this crumb trail to always appear right below the menu as it scrolls down the page. Is there any way to add the crumb html code within the menu div somehow so it scrolls along with it?
Thanks in advance,
Ryan
Poster: Ruth
Dated: Saturday November 19 2005 - 8:04:47 GMT
If I remember correctly on that breadcrumb function, you had to create a div into which the 'breadcrumb' got written.
I do not know if you could get the function to write to a div that you put in a menu that sat below the original one and scrolled as it scrolled.
You should be able to find a function that allows for a moving div and set that as the div into which the breadcrumbs were written.
I have an old, old function that was for a scroll on menu. I have no idea what it is doing, what all the numbers and math and such is, but I did play around and actually got it to take the breadcrumb and to sit below the menu when the page is scrolled. But, I don't know how to set it so it is below the menu to start and also get it to scroll at the same speed.
This is where I originally saw the function. I'm pretty sure it's sort of old and maybe you could find a much better one that scrolls on like that and can modify it.
http://ca.geocities.com/randy_bennett __at__ n ... l-menu.htm
This is the page I made to experiment. I used the download of the Milonic menu on it with the coding in it.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<!--STICKY - LAYER SCROLLS WITH PAGE-->
<SCRIPT language=javaScript>
function setVariables(){
y1=0;ob=1;max=1 // this max sets the distance from the top of the page
if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";iW="window.innerWidth";iH="window.innerHeight"
}
else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";iW="document.body.clientWidth";iH="document.body.clientHeight"
}
object="object1";
checkLocationA()
}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0
function checkLocation(){
// innerX=eval(iW)-115 // place to the right
innerX=20 // controls the horizontal from the left side of the page
// innerY=eval(iH)-35 // place at the bottom
innerY=90 // controls the verticle from the top of the page
if (document.layers){innerY-=1;innerX-=1}
yy=eval(y);
xx=eval(x);
ydiff=ystart-yy;
xdiff=xstart-xx;
if ((ydiff<(-0.01))||(ydiff>(0.01))) movey=Math.round(ydiff/10),ystart-=movey
if ((xdiff<(-0.01))||(xdiff>(0.01))) movex=Math.round(xdiff/10),xstart-=movex
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
object="object1"
eval(dS+object+sD+v+(ystart+innerY+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object2"
eval(dS+object+sD+v+(ystart+innerY+spread+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object3"
eval(dS+object+sD+v+(ystart+innerY+spread*2+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object4"
eval(dS+object+sD+v+(ystart+innerY+spread*3+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object5"
eval(dS+object+sD+v+(ystart+innerY+spread*4+10));
eval(dS+object+sD+h+(xstart+innerX+10));
//eval(dS + objectX + sD + v + y);
}
else{
object=document.getElementById('object1')
object.style.top=ystart+innerY
object.style.left=xstart+innerX
object=document.getElementById('object2')
object.style.top=ystart+innerY+spread
object.style.left=xstart+innerX
object=document.getElementById('object3')
object.style.top=ystart+innerY+spread*2
object.style.left=xstart+innerX
object=document.getElementById('object4')
object.style.top=ystart+innerY+spread*3
object.style.left=xstart+innerX
object=document.getElementById('object5')
object.style.top=ystart+innerY+spread*4
object.style.left=xstart+innerX
//object=document.getElementById('object2')
//object.style.top=50+innerY
//object.style.left=50+innerX
}
setTimeout("checkLocation()",10)}
function checkLocationA(){
ystart=eval(y)+1;
xstart=eval(x)+1;}
spread=40
function scrollOn(){
items=5
if (ob<=items){
objectX="object"+ob;
y1+=10;
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
eval(dS + objectX + sD + v + y1);}
else{
object=document.getElementById(objectX)
object.style.top=y1}
//eval(dS + objectX + sD + v + y);
if (y1<max) xx=setTimeout ("scrollOn()",10)
else y1=-50, max+=spread, ob+=1, xx=setTimeout("scrollOn()",10) // this max sets the spacing
}
if (ob>5){clearTimeout(xx);checkLocation();}
}
</SCRIPT>
</head>
<body onload=setVariables();scrollOn()>
<!--
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2005 (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.
-->
<!-- ***** This is the section of code you need to paste into your web page *****-->
<script type="text/javascript" src="milonic_src.js"></script>
<a class=milonic href="http://www.milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a>
<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 type="text/javascript" src="menu_data.js"></script>
<p>Test scroll breadcrumb</p>
<DIV id=object1 style="Z-INDEX: 2; LEFT: 50px; POSITION: absolute; TOP: 30px; width:85%;border:0px solid red">
<TABLE borderColor=#000000 width=100% height="1" border=0>
<TBODY>
<TR>
<TD height="1">
</TD></TR><tr><td><table id="tselections" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td><div id="selections" style="position: absolute; top: 105px; left: 10px; text-align: left;
vertical-align: top; font-family: verdana; font-size: 10pt">
<b>Menu selections: </b><script language="javascript">
document.write(mm_selectionSequence)</script>
</div>
</td>
</tr>
</table></td></tr><tr><td height="1"></td></tr></TBODY></TABLE></DIV>
<DIV id=object2 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object3 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object4 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object5 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
</TD></TR></TABLE><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br>
Page to test scroll and breadcrumb
<p> </p>
<br>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<!--STICKY - LAYER SCROLLS WITH PAGE-->
<SCRIPT language=javaScript>
function setVariables(){
y1=0;ob=1;max=1 // this max sets the distance from the top of the page
if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";iW="window.innerWidth";iH="window.innerHeight"
}
else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";iW="document.body.clientWidth";iH="document.body.clientHeight"
}
object="object1";
checkLocationA()
}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0
function checkLocation(){
// innerX=eval(iW)-115 // place to the right
innerX=20 // controls the horizontal from the left side of the page
// innerY=eval(iH)-35 // place at the bottom
innerY=90 // controls the verticle from the top of the page
if (document.layers){innerY-=1;innerX-=1}
yy=eval(y);
xx=eval(x);
ydiff=ystart-yy;
xdiff=xstart-xx;
if ((ydiff<(-0.01))||(ydiff>(0.01))) movey=Math.round(ydiff/10),ystart-=movey
if ((xdiff<(-0.01))||(xdiff>(0.01))) movex=Math.round(xdiff/10),xstart-=movex
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
object="object1"
eval(dS+object+sD+v+(ystart+innerY+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object2"
eval(dS+object+sD+v+(ystart+innerY+spread+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object3"
eval(dS+object+sD+v+(ystart+innerY+spread*2+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object4"
eval(dS+object+sD+v+(ystart+innerY+spread*3+10));
eval(dS+object+sD+h+(xstart+innerX+10));
object="object5"
eval(dS+object+sD+v+(ystart+innerY+spread*4+10));
eval(dS+object+sD+h+(xstart+innerX+10));
//eval(dS + objectX + sD + v + y);
}
else{
object=document.getElementById('object1')
object.style.top=ystart+innerY
object.style.left=xstart+innerX
object=document.getElementById('object2')
object.style.top=ystart+innerY+spread
object.style.left=xstart+innerX
object=document.getElementById('object3')
object.style.top=ystart+innerY+spread*2
object.style.left=xstart+innerX
object=document.getElementById('object4')
object.style.top=ystart+innerY+spread*3
object.style.left=xstart+innerX
object=document.getElementById('object5')
object.style.top=ystart+innerY+spread*4
object.style.left=xstart+innerX
//object=document.getElementById('object2')
//object.style.top=50+innerY
//object.style.left=50+innerX
}
setTimeout("checkLocation()",10)}
function checkLocationA(){
ystart=eval(y)+1;
xstart=eval(x)+1;}
spread=40
function scrollOn(){
items=5
if (ob<=items){
objectX="object"+ob;
y1+=10;
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
eval(dS + objectX + sD + v + y1);}
else{
object=document.getElementById(objectX)
object.style.top=y1}
//eval(dS + objectX + sD + v + y);
if (y1<max) xx=setTimeout ("scrollOn()",10)
else y1=-50, max+=spread, ob+=1, xx=setTimeout("scrollOn()",10) // this max sets the spacing
}
if (ob>5){clearTimeout(xx);checkLocation();}
}
</SCRIPT>
</head>
<body onload=setVariables();scrollOn()>
<!--
Milonic DHTML Website Navigation Menu Version 5.0+
Copyright 2005 (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.
-->
<!-- ***** This is the section of code you need to paste into your web page *****-->
<script type="text/javascript" src="milonic_src.js"></script>
<a class=milonic href="http://www.milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a>
<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 type="text/javascript" src="menu_data.js"></script>
<p>Test scroll breadcrumb</p>
<DIV id=object1 style="Z-INDEX: 2; LEFT: 50px; POSITION: absolute; TOP: 30px; width:85%;border:0px solid red">
<TABLE borderColor=#000000 width=100% height="1" border=0>
<TBODY>
<TR>
<TD height="1">
</TD></TR><tr><td><table id="tselections" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td><div id="selections" style="position: absolute; top: 105px; left: 10px; text-align: left;
vertical-align: top; font-family: verdana; font-size: 10pt">
<b>Menu selections: </b><script language="javascript">
document.write(mm_selectionSequence)</script>
</div>
</td>
</tr>
</table></td></tr><tr><td height="1"></td></tr></TBODY></TABLE></DIV>
<DIV id=object2 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object3 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object4 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=object5 style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px; visibility:hidden">
<TABLE borderColor=#000000 width=1 height=1 border=0>
<TBODY>
<TR>
<TD>
</TD></TR></TBODY></TABLE></DIV>
</TD></TR></TABLE><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br><br><p> </p>
<br><p> </p>
<br><p> </p>
<br><p> </p>
<br>
Page to test scroll and breadcrumb
<p> </p>
<br>
</body>
</html>
I set the main menu from the download to top=10; left=10; followscroll=1; and I added an aI string with the url to a page I made to test it.
Code:
aI("text=Test Scroll Breadcrumb;url=javascript:mm_openUrl('test_scroll.htm');");
Maybe you can figure out something from that. At least it's something with which to experiment and may give you some ideas.
Ruth