PDA

Click to See Complete Forum and Search --> : [Resolved] Floating Panel

cfisher
Dec 13th, 2004, 06:25 AM
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
tailz
Dec 14th, 2004, 05:35 AM
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:


<div id='mydivytag' style="position:absolute">

<!-- table in here -->

</div>


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.

Hopefully that'll point you in some direction, sorry can't be much more help :D
cfisher
Dec 14th, 2004, 06:13 AM
Thanks tailz, that is exactly what I'm looking for.

Chris
cfisher
Dec 17th, 2004, 07:39 AM
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 (richard@cleaver.org.uk) -->
<!-- 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 -->
tailz
Dec 17th, 2004, 08:00 AM
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