SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Window Onload Help/Page Refresh

    Hi I am using a script that creates a floating draggable layer and I can't seem to get it to stay in it's chosen state on refresh. I added an Onload function at the botttom before the end body tag. Idealy what I'd like to do is maintain it's position and show/hide status on page refresh.

    Thank you very much

    Code:
    <html>
    
    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>Layer Title</title>
    
    <script language="JavaScript1.2">
    
    // Script Source: CodeLifter.com
    // Copyright 2003
    // Do not remove this header
    
    isIE=document.all;
    isNN=!document.all&&document.getElementById;
    isN4=document.layers;
    isHot=false;
    
    function ddInit(e){
      topDog=isIE ? "BODY" : "HTML";
      whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
      hotDog=isIE ? event.srcElement : e.target;  
      while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
        hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
      }  
      if (hotDog.id=="titleBar"){
        offsetx=isIE ? event.clientX : e.clientX;
        offsety=isIE ? event.clientY : e.clientY;
        nowX=parseInt(whichDog.style.left);
        nowY=parseInt(whichDog.style.top);
        ddEnabled=true;
        document.onmousemove=dd;
      }
    }
    
    function dd(e){
      if (!ddEnabled) return;
      whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
      whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
      return false;  
    }
    
    function ddN4(whatDog){
      if (!isN4) return;
      N4=eval(whatDog);
      N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
      N4.onmousedown=function(e){
        N4.captureEvents(Event.MOUSEMOVE);
        N4x=e.x;
        N4y=e.y;
      }
      N4.onmousemove=function(e){
        if (isHot){
          N4.moveBy(e.x-N4x,e.y-N4y);
          return false;
        }
      }
      N4.onmouseup=function(){
        N4.releaseEvents(Event.MOUSEMOVE);
      }
    }
    
    function hideMe(){
      if (isIE||isNN) whichDog.style.visibility="hidden";
      else if (isN4) document.theLayer.visibility="hide";
    }
    
    function showMe(){
      if (isIE||isNN) whichDog.style.visibility="visible";
      else if (isN4) document.theLayer.visibility="show";
    }
    
    document.onmousedown=ddInit;
    document.onmouseup=Function("ddEnabled=false");
    
    </script>
    
    </head>
    
    <body>
    
    The layer can be shown or hidden via simple function calls.
    
    To show the layer:
    
    <a href="javascript:showMe();">show</a>
    
    To hide the layer:
    
    <a href="javascript:hideMe();">hide</a>
    
    <!-- BEGIN FLOATING LAYER CODE //-->
    <div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:hidden">
    <table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
    <tr>
    <td width="100%">
      <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
      <tr>
      <td id="titleBar" style="cursor:move" width="100%">
      <ilayer width="100%" onSelectStart="return false">
      <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
      <font face="Arial" color="#FFFFFF">Layer Title</font>
      </layer>
      </ilayer>
      </td>
      <td style="cursor:hand" valign="top">
      <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
      </td>
      </tr>
      <tr>
      <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
    <!-- PLACE YOUR CONTENT HERE //-->  
    This is where your content goes.<br>
    It can be any html code or text.<br>
    Remember to feed the reindeer.<br>
    Avoid chewable giblet curtains.
    <!-- END OF CONTENT AREA //-->
      </td>
      </tr>
      </table> 
    </td>
    </tr>
    </table>
    </div>
    <!-- END FLOATING LAYER CODE //--> 
    
    
    <script type="text/javascript">
      window.onload=
        function Lyr() {
          var drg = document.getElementsByTagName('div');
          theLayer(drg[0]);
        };
    
    </script>
    
    </body>
    
    </html>

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The browser doesn't remember the DIV's last state between page views. It will always go back to the position specified in the original HTML. You need to store the coordinates in a cookie.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks for responding. I'm not sure I know how to do that tho

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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