Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder tylerjca's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    162
    Thanks
    1
    Thanked 0 Times in 0 Posts

    element to follow scroll position and popup when needed

    I would like to know how to make a <div> for example follow the scrolling position, but be set to:
    Code:
    div.mask{
    color: #000000;
    background-color: #cccccc;
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    }
    ...
    ....
    .....
    <a href="#" onclick="showPopup()">Do it</a>
    and then when i need it, it will popup starting at the top left side of the browser window. I know I can set it to show at the top left corner of the page, but that won't move if the user scrolls down the page so they will have to scroll back up to see the element.

    I'm sure i will probably need javascript for this. can anyone help me out?

    Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Here's a basic example using scrollTop
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /*<![CDATA[*/
    * { margin: 0;padding: 0; }
    body { background: #ffffff; color: #000000;}
    a:link { color: #ff0000; }
    a:visited { color: #0000ff; }
    a:active { color: #ff00ff; }
    div.mask{
    color: #000000;
    background-color: #cccccc;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    function showPopup() {
    var d=document;
    var y=d.documentElement.scrollTop ? d.documentElement.scrollTop:d.body.scrollTop; 
    d.getElementById('mask').style.top=y+'px';
    d.getElementById('mask').style.display='block';
    d.getElementById('sy').innerHTML=y; // just to show it
    }
    /*]]>*/
    </script>
    </head>
    <body>
    
    <div id="mask" class="mask" onclick="this.style.display='none'"> </div>
    
    <div id="spacer1" style="height: 500px;width: 10px;border: 1px dotted #ff0000;"> </div>
    
    <a href="#" onclick="showPopup(); return false">Do it</a> <span id="sy"></span>
    
    <div id="spacer2" style="height: 500px;width: 10px;border: 1px dotted #ff0000;"> </div>
    
    
    </body>
    </html>


  •  

    Posting Permissions

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