Printable View
I have a web page in asp.net (using Visual Studio's .NET) with several fields that are color coded depending on the needs. I also have a legend at the top of the page that explains what each color coding means. What I'd like to be able to do is have this legend follow the page down as the user scrolls through the page. Could someone give me an idea of what to look at or how this feature may be programmed ?
Thank you.
Chris
I've created a menu before that floated on top. I used a table inside of a div tag like for my drop-down-menu like so:
You would have to use javascript to set the position of the div tag on a scroll event and you can use anything inside of the <div> tag not just a table.Code:<div id='mydivytag' style="position:absolute">
<!-- table in here -->
</div>
Hopefully that'll point you in some direction, sorry can't be much more help :D
Thanks tailz, that is exactly what I'm looking for.
Chris
I found the below code on another posting that solved my problem perfectly.
Chris
<!-- THREE STEPS TO INSTALL FLOATING LINK:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Richard Cleaver ([email protected]) -->
<!-- Web Site: http://www.cleaver.org.uk -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function floatButton () {
if (document.all) {
document.all.topButton.style.pixelTop = document.body.scrollTop;
}
else if (document.layers) {
document.topButton.top = window.pageYOffset;
}
else if (document.getElementById) {
document.getElementById('topButton').style.top = window.pageYOffset + 'px';
}
}
if (document.all)
window.onscroll = floatButton;
else
setInterval ('floatButton()', 100);
function initButton () {
if (document.all) {
document.all.topButton.style.pixelLeft = document.body.clientWidth - document.all.topButton.offsetWidth;
document.all.topButton.style.visibility = 'visible';
}
else if (document.layers) {
document.topButton.left = window.innerWidth - document.topButton.clip.width - 15;
document.topButton.visibility = 'show';
}
else if (document.getElementById) {
document.getElementById('topButton').style.left = (window.innerWidth - 35) + 'px';
document.getElementById('topButton').style.visibility = 'visible';
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="initButton()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<SPAN ID="topButton" STYLE="position: absolute; visibility: hidden; top: 0px;">
<A HREF="javascript: window.scrollTo(0, 0); void 0" ONMOUSEOVER="window.status = 'top'; return true;" ONMOUSEOUT="window.status = ''; return true;">Back to Top</A>
</SPAN>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.14 KB -->
Yea thats the javascript I said you'd need to hunt down :D
If you have any problems with the SPAN tag, use the DIV tag
Glad it worked out