Go Back   Dynamic Drive Forums > General Coding > JavaScript
Reload this Page Floating draggable Div?
Search Dynamic Drive Forums:

Reply
 
Thread Tools Search this Thread
  #1  
Old 01-31-2006, 08:07 PM
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
  #2  
Old 02-01-2006, 08:39 AM
jscheuer1's Avatar
jscheuer1 jscheuer1 is offline
No Kidding?
  
Join Date: Mar 2005
Location: SE PA USA
Posts: 19,000
Thanks: 19
Thanked 1,135 Times in 1,121 Posts
Blog Entries: 3
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>
__________________
WWWWWWWWWWWW
- John
________________________

Really Show Your Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Reply With Quote
  #3  
Old 04-01-2008, 02:06 PM
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
  #4  
Old 09-16-2008, 01:06 PM
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
  #5  
Old 04-13-2009, 12:38 PM
madan712 madan712 is offline
New Comer (less than 5 posts)
  
Join Date: Apr 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default Get Solution Here
Hi,
you can reffer this

http://simpleandeasycodes.blogspot.c...-disabled.html

thanks,
Reply With Quote
  #6  
Old 04-15-2009, 05:47 AM
madan712 madan712 is offline
New Comer (less than 5 posts)
  
Join Date: Apr 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default get solution here
Hi friends,

you can see complete solution code here.

http://simpleandeasycodes.blogspot.c...and-popup.html
Reply With Quote
Reply

Bookmarks

« Previous Thread | Next Thread »
Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 02:15 AM.

Dynamic Drive - Archive - Top
Home - Contact Us - Archives - Link to DD - Top 

Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.