CSS Codes
CSS Layouts
Results 1 to 4 of 4

Thread: Floating draggable Div?

  1. 01-31-2006, 08:07 PM #1
    sprockett
    sprockett is offline New Comer (less than 5 posts)
    Join Date
    Jan 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Floating draggable Div?

    I've been searching high and low, but can't seem to find a script that does this.


    Basically would be needed is a floating div (it stays in the same spot when you scroll the page) that is DRAGGABLE.


    Anyone have any suggestions?

    Billion thanks..
    Reply With Quote Reply With Quote
  2. 02-01-2006, 08:39 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
* html {
overflow: hidden;
}
* html body {
margin: 0;
padding: 0;
height:100%;
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
overflow: auto;
}
* html #container {
margin:15px 10px;
}
#floater{
position:fixed!important;
position:absolute;
border:1.5px solid black;
line-height:20px;
left:110px;
top:150px;
}
</style>
<script type="text/javascript">
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown	= Drag.start;
o.hmode			= bSwapHorzRef ? false : true ;
o.vmode			= bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX	= typeof minX != 'undefined' ? minX : null;
o.minY	= typeof minY != 'undefined' ? minY : null;
o.maxX	= typeof maxX != 'undefined' ? maxX : null;
o.maxY	= typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart	= new Function();
o.root.onDragEnd	= new Function();
o.root.onDrag		= new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX	= e.clientX;
o.lastMouseY	= e.clientY;
if (o.hmode) {
if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove	= Drag.drag;
document.onmouseup		= Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey	= e.clientY;
var ex	= e.clientX;
var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper)		nx = o.xMapper(y)
else if (o.yMapper)	ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX	= ex;
Drag.obj.lastMouseY	= ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup   = null;
Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
</script>
</head>
<body><div id="floater" class="drag" style="position:absolute;width:100px; height: 50px;background-color: red; color: white; font-size: 120%;left:110px;top:150px;">Hi!</div>
<!--[if IE]>
<div id="container">
<![endif]-->
<br>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<p>a paragraph</p>
<br>
<script type="text/javascript">
var draggers=document.getElementsByTagName('div')
for (var i_tem = 0; i_tem < draggers.length; i_tem++)
if ( draggers[i_tem].className=='drag' )
Drag.init(draggers[i_tem])
</script>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 04-01-2008, 01:06 PM #3
    st10
    st10 is offline New Comer (less than 5 posts)
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default hey all , i have a question about this script

    hey admin , thx for your nice reply ,
    i would like to know how can i get to know whts going on in this script ?
    letme show ya whats obscure for me !
    he placed some functions ino one variable . thats drag !
    so in INIT we can see several arguments :
    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    what are those !!?
    PHP Code:
    if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
    if (    o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
    if (!    o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
    if (!    o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
    o.minX    = typeof minX != 'undefined' ? minX : null;
    o.minY    = typeof minY != 'undefined' ? minY : null;
    o.maxX    = typeof maxX != 'undefined' ? maxX : null;
    o.maxY    = typeof maxY != 'undefined' ? maxY : null; 
    this section is alittle hard to find out wht he wants to get !
    how about it :
    PHP Code:
    fixE : function(e)
    {
    if (    typeof e == 'undefined') e = window.event;
    if (    typeof e.layerX == 'undefined') e.layerX = e.offsetX;
    if (    typeof e.layerY == 'undefined') e.layerY = e.offsetY;
    return     e;
    } 
    was he trying to find out whts the browser type?
    this script has been written professionally i think , do ya have any more simple script that the div will be draged ino a table or a restricted area ?
    thank you very much for your useful website
    Reply With Quote Reply With Quote
  4. 09-16-2008, 12:06 PM #4
    chennaiMan
    chennaiMan is offline New Comer (less than 5 posts)
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi i used the same but when i use scroll bar in that div it give problem. Please give me solution, the code is below
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    * html {
    overflow: hidden;
    }
    * html body {
    margin: 0;
    padding: 0;
    height:100%;
    height:expression(document.documentElement.clientHeight+'px');
    width:expression(document.documentElement.clientWidth+'px');
    overflow: auto;
    }
    * html #container {
    margin:15px 10px;
    }
    #floater{
    position:fixed!important;
    position:absolute;
    border:1.5px solid black;
    line-height:20px;
    left:110px;
    top:150px;
    visibility:hidden;
    }
    .scroll {overflow:scroll;
    }
    </style>
    <script type="text/javascript">
    /**************************************************
    * dom-drag.js
    * 09.25.2001
    * www.youngpup.net
    * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
    **************************************************
    * 10.28.2001 - fixed minor bug where events
    * sometimes fired off the handle, not the root.
    **************************************************/
    var Drag = {
    obj : null,
    init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
    {
    o.onmousedown = Drag.start;
    o.hmode = bSwapHorzRef ? false : true ;
    o.vmode = bSwapVertRef ? false : true ;
    o.root = oRoot && oRoot != null ? oRoot : o ;
    if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
    if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
    if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
    if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
    o.minX = typeof minX != 'undefined' ? minX : null;
    o.minY = typeof minY != 'undefined' ? minY : null;
    o.maxX = typeof maxX != 'undefined' ? maxX : null;
    o.maxY = typeof maxY != 'undefined' ? maxY : null;
    o.xMapper = fXMapper ? fXMapper : null;
    o.yMapper = fYMapper ? fYMapper : null;
    o.root.onDragStart = new Function();
    o.root.onDragEnd = new Function();
    o.root.onDrag = new Function();
    },
    start : function(e)
    {
    var o = Drag.obj = this;
    e = Drag.fixE(e);
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    o.root.onDragStart(x, y);
    o.lastMouseX = e.clientX;
    o.lastMouseY = e.clientY;
    if (o.hmode) {
    if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
    if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
    } else {
    if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
    if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
    }
    if (o.vmode) {
    if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
    if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
    } else {
    if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
    if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
    }
    document.onmousemove = Drag.drag;
    document.onmouseup = Drag.end;
    return false;
    },
    drag : function(e)
    {
    e = Drag.fixE(e);
    var o = Drag.obj;
    var ey = e.clientY;
    var ex = e.clientX;
    var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
    var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
    var nx, ny;
    if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
    if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
    if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
    if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
    nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
    ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
    if (o.xMapper) nx = o.xMapper(y)
    else if (o.yMapper) ny = o.yMapper(x)
    Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
    Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
    Drag.obj.lastMouseX = ex;
    Drag.obj.lastMouseY = ey;
    Drag.obj.root.onDrag(nx, ny);
    return false;
    },
    end : function()
    {
    document.onmousemove = null;
    document.onmouseup = null;
    Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
    parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
    Drag.obj = null;
    },
    fixE : function(e)
    {
    if (typeof e == 'undefined') e = window.event;
    if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
    if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
    return e;
    }
    };
    function popup(){
    var obj;
    obj = document.getElementById("floater");

    var e= window.event;
    /* get the mouse left position */
    x = event.clientX + document.body.scrollLeft;
    /* get the mouse top position */
    y = event.clientY + document.body.scrollTop + 35;
    /* set the pop-up's left */
    obj.style.left = x;
    /* set the pop-up's top */
    obj.style.top = y;
    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
    obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
    }
    </script>
    </head>
    <body>
    <a href="#" onClick="popup()" target="_self">Click here to open YYYYY</a>
    <div id="floater" class="drag" style="position:absolute;width:300px; height: 350px;background-color: #FBF6D0; color: white; font-size: 120%;"> Click here to close<a href="#" onClick="popup()"> XXXXX </a><BR><div style="height:50px; background-color: #ffffff;" class="scroll"> Located on the highest point of Ravello, the hotel is perched on a cliff 1,150 ft. above sea level, overlooking the Amalfi Coast. Situated 350 metres above the sea, perched on a craggy cliffside, Ravello commands the ultimate panorama over the Amalfi coast, a magical location that the French poet, Andre Gide, evocatively described as "between the sky and the sea". </div></div>
    <!--[if IE]>
    <div id="container">
    <![endif]-->
    <br>
    bfhjasbfhsbdh
    <br>
    <script type="text/javascript">
    var draggers=document.getElementsByTagName('div')
    for (var i_tem = 0; i_tem < draggers.length; i_tem++)
    if ( draggers[i_tem].className=='drag' )
    Drag.init(draggers[i_tem])
    </script>
    <!--[if IE]>
    </div>
    <![endif]-->
    </body>
    </html>
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules