Results 1 to 5 of 5

Thread: [Resolved] Floating Panel

  1. Dec 13th, 2004, 07:25 AM #1
    cfisher
    cfisher is offline

    Thread Starter
    Member
    Join Date
    Aug 2001
    Location
    Ottawa
    Posts
    38

    [Resolved] Floating Panel

    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
    Last edited by cfisher; Dec 17th, 2004 at 08:40 AM. Reason: [Resolved]
    Reply With Quote Reply With Quote
  2. Dec 14th, 2004, 06:35 AM #2
    tailz
    tailz is offline
    Hyperactive Member tailz's Avatar
    Join Date
    Jul 2002
    Posts
    306

    Re: Floating Panel ?

    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:

    Code:
    <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
    Reply With Quote Reply With Quote
  3. Dec 14th, 2004, 07:13 AM #3
    cfisher
    cfisher is offline

    Thread Starter
    Member
    Join Date
    Aug 2001
    Location
    Ottawa
    Posts
    38

    Re: Floating Panel ?

    Thanks tailz, that is exactly what I'm looking for.

    Chris
    Reply With Quote Reply With Quote
  4. Dec 17th, 2004, 08:39 AM #4
    cfisher
    cfisher is offline

    Thread Starter
    Member
    Join Date
    Aug 2001
    Location
    Ottawa
    Posts
    38

    Thumbs up Re: Floating Panel ?

    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 -->
    Reply With Quote Reply With Quote
  6. Dec 17th, 2004, 09:00 AM #5
    tailz
    tailz is offline
    Hyperactive Member tailz's Avatar
    Join Date
    Jul 2002
    Posts
    306

    Re: [Resolved] Floating Panel

    Yea thats the javascript I said you'd need to hunt down

    If you have any problems with the SPAN tag, use the DIV tag

    Glad it worked out
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules


Click Here to Expand Forum to Full Width