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 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts

    how do you do a floating movable div/layer

    i've been looking for tutorials/scrips all day and i can not find anything. i assume that its not too difficult, just updating the x y position of the layer with the mouse x y etc, im just not too sure about the rest of the package. any ideas?

    thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts
    thank you, i thought i looked through all of dd

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    best google for position:fixed

    but
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcWWHS(){
     if (document.all){
      zxcCur='hand';
      zxcWH=document.documentElement.clientHeight;
      zxcWW=document.documentElement.clientWidth;
      zxcWS=document.documentElement.scrollTop;
      if (zxcWH==0){
       zxcWS=document.body.scrollTop;
       zxcWH=document.body.clientHeight;
       zxcWW=document.body.clientWidth;
      }
     }
     else if (document.getElementById){
      zxcCur='pointer';
      zxcWH=window.innerHeight-15;
      zxcWW=window.innerWidth-15;
      zxcWS=window.pageYOffset;
     }
     zxcWC=Math.round(zxcWW/2);
     return [zxcWW,zxcWH,zxcWS];
    }
    
    
    window.onscroll=function(){
     var img=document.getElementById('fred');
     if (!document.all){ img.style.position='fixed'; window.onscroll=null; return; }
     if (!img.pos){ img.pos=img.offsetTop; }
     img.style.top=(zxcWWHS()[2]+img.pos)+'px';
    }
    //-->
    </script>
    
    </head>
    
    <body >
    <div id="fred" style="position:absolute;left:100px;top:100px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=200 height=200 style="position:absolute;top:0px;left:0px;" >
    </div>
    <div style="position:absolute;overflow:hidden;left:0px;top:0px;width:100%;" >
    <br>
    <br>
    <center> Here Is some Content
    <br>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="1" height="1000">
    The End
    </center></div>
    </body>
    </html>
    should give you a start


  •  

    Posting Permissions

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