Advanced Search

Posted By

limonn on 10/09/06

Tagged

Versions (?)

Last Edited at 10/09/06 09:12am

Statistics

Viewed 218 times
Favorited by 1 user(s)

Related snippets

627
Interfaz simple de ventana con 2 botones
0
otra ventana

ventana movible

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ==============================================================
  2. Script:     Amazing Draggable Layer
  3.  
  4. Functions:  This script implements a draggable layer that
  5.             can be used much like a popup window... but with-
  6.             out the usual focus problems that popups often
  7.             imply.  Also included are simple controls to show
  8.             or hide the draggable layer. Compatible with
  9.             NS4-7 & IE.
  10.  
  11. Comments:   The script is in two parts.  A JavaScript
  12.             <script> to be placed in the <head> of the
  13.             page; and a <div> layer that should be placed
  14.             either immediately after the <body> tag or
  15.             immediately before the </body> tag.
  16.  
  17.             There are *no* changes or setups required in the
  18.             JavaScript script.
  19.  
  20.             Positioning, width, height, colors, fonts, etc.,
  21.             as well as initial visibility are set in the
  22.             layer portion of the script, in the body.
  23.  
  24. Notes:      Only a single instance of the script is allowed
  25.             per page.            
  26.  
  27. Browsers:   NS4-7 & IE4 and later
  28.  
  29. Author:     etLux
  30. ==============================================================
  31.  
  32.  
  33.  
  34. STEP 1.
  35. Inserting the JavaScript <script> In Your Page
  36.  
  37. Put the following <script> </script> in the head
  38. section of your page.  
  39.  
  40. There are no setups or changes required.
  41.  
  42.  
  43.  
  44. <script language="JavaScript1.2">
  45.  
  46. // Script Source: CodeLifter.com
  47. // Copyright 2003
  48. // Do not remove this header
  49.  
  50. isIE=document.all;
  51. isNN=!document.all&&document.getElementById;
  52. isN4=document.layers;
  53. isHot=false;
  54.  
  55. function ddInit(e){
  56.   topDog=isIE ? "BODY" : "HTML";
  57.   whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  58.   hotDog=isIE ? event.srcElement : e.target;  
  59.   while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
  60.     hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  61.   }  
  62.   if (hotDog.id=="titleBar"){
  63.     offsetx=isIE ? event.clientX : e.clientX;
  64.     offsety=isIE ? event.clientY : e.clientY;
  65.     nowX=parseInt(whichDog.style.left);
  66.     nowY=parseInt(whichDog.style.top);
  67.     ddEnabled=true;
  68.     document.onmousemove=dd;
  69.   }
  70. }
  71.  
  72. function dd(e){
  73.   if (!ddEnabled) return;
  74.   whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  75.   whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  76.   return false;  
  77. }
  78.  
  79. function ddN4(whatDog){
  80.   if (!isN4) return;
  81.   N4=eval(whatDog);
  82.   N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  83.   N4.onmousedown=function(e){
  84.     N4.captureEvents(Event.MOUSEMOVE);
  85.     N4x=e.x;
  86.     N4y=e.y;
  87.   }
  88.   N4.onmousemove=function(e){
  89.     if (isHot){
  90.       N4.moveBy(e.x-N4x,e.y-N4y);
  91.       return false;
  92.     }
  93.   }
  94.   N4.onmouseup=function(){
  95.     N4.releaseEvents(Event.MOUSEMOVE);
  96.   }
  97. }
  98.  
  99. function hideMe(){
  100.   if (isIE||isNN) whichDog.style.visibility="hidden";
  101.   else if (isN4) document.theLayer.visibility="hide";
  102. }
  103.  
  104. function showMe(){
  105.   if (isIE||isNN) whichDog.style.visibility="visible";
  106.   else if (isN4) document.theLayer.visibility="show";
  107. }
  108.  
  109. document.onmousedown=ddInit;
  110. document.onmouseup=Function("ddEnabled=false");
  111.  
  112. </script>
  113.  
  114.  
  115.  
  116. ==============================================================
  117.  
  118.  
  119.  
  120. STEP 2.
  121. Inserting The Layer Code In Your Page
  122.  
  123. Insert the following code in the body of your page.  It may be
  124. placed either immediately after the <body> tag or
  125. immediately before the </body> tag.
  126.  
  127. This is essentially a couple of nested tables inside a <div>
  128.  
  129. Colors and spacing are set with the usual table features
  130. (bgcolor, cellpadding).
  131.  
  132. The width, height, left and top position are set in the style
  133. in the <div> tag.  
  134.  
  135. Likewise, if you want the layer to be initially invisible, set
  136. visibility:visible instead to visibility:hidden in the style.
  137.  
  138. (To show or hide the layer from a JavaScript link function
  139. call see the following Step 3.)
  140.  
  141. Your content goes in the commented area, as shown.  It can be
  142. most any html code or text, though additional div  or table
  143. tags within the designated content area should be done with
  144. care, and checked in all browser versions.
  145.  
  146. To change the titlebar text, find the words Layer Title and
  147. replace them with your title.
  148.  
  149.  
  150.  
  151. <!-- BEGIN FLOATING LAYER CODE //-->
  152. <div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
  153. <table border="0" width="250" bgcolor="#424242" cellspacing="0" cellpadding="5">
  154. <tr>
  155. <td width="100%">
  156.   <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
  157.   <tr>
  158.   <td id="titleBar" style="cursor:move" width="100%">
  159.   <ilayer width="100%" onSelectStart="return false">
  160.   <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  161.   <font face="Arial" color="#FFFFFF">Layer Title</font>
  162.   </layer>
  163.   </ilayer>
  164.   </td>
  165.   <td style="cursor:hand" valign="top">
  166.   <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
  167.   </td>
  168.   </tr>
  169.   <tr>
  170.   <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
  171. <!-- PLACE YOUR CONTENT HERE //-->  
  172. This is where your content goes.<br>
  173. It can be any html code or text.<br>
  174. Remember to feed the reindeer.<br>
  175. Avoid chewable giblet curtains.
  176. <!-- END OF CONTENT AREA //-->
  177.   </td>
  178.   </tr>
  179.   </table> 
  180. </td>
  181. </tr>
  182. </table>
  183. </div>
  184. <!-- END FLOATING LAYER CODE //--> 
  185.  
  186.  
  187.  
  188. ==============================================================
  189.  
  190.  
  191.  
  192. STEP 3. (Optional)
  193. Using Show And Hide Controls
  194.  
  195. The layer can be shown or hidden via simple function calls.
  196.  
  197. To show the layer:
  198.  
  199. <a href="javascript:showMe();">show</a>
  200.  
  201. To hide the layer:
  202.  
  203. <a href="javascript:hideMe();">hide</a>
  204.  
  205.  
  206.  
  207. ============================[end]=============================

URL: http://www.codelifter.com/main/javascript/dragablelayer.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.