By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,247 Members | 1,057 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,247 IT Pros & Developers. It's quick & easy.

draggable inside fixed pos. div problem

P: 1
Background: I have a fixed position div on the bottom om my page. I have then
added a dialog-div into this fixed position one. When I bring up the dialog,
everything works if the the scrollTop is 0. I can drag it around with no problem.

Problem: If the page has scrolled, lets say 100px down (y-axis) and I try to
drag the dialog around, a strange effect appair in non-ie browsers. The dialog
is instantly moved 100px UP while dragging. as soon as I release the mouse button,
the dialog pops back down 100px (to where my pointer is located).

for IE(6) i have the "bottom div" absolute positioned and then I use some
@media-screen-hack to make it fixed-positioned. and in IE i DONT have this
problem and everything works like a charm.

small note: for now in IE i use jquery.ui.draggable and for browsers != IE
i use interface.draggables. IE had issues with interface and other browsers
had issues with jquery.ui :\. im going to look into this in the future and try
to go for one.

Any help is appreciated! How do I solve my dragging-while-scrolled issue?
and maby I should be able to go for just one draggable lib?

Example code that shows the issue (works as intended in IE6, wierd in FF):

[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#bottom_area {
position: fixed;
left: 0px;
bottom: 0px;
height: 160px;
width: 500px;
}

#dialog {
position: absolute;
left:0px;
top:0px;
padding:2px;
width:255px;
height:108px;
background-color:#ffffff;
border: 1px solid #000000;
z-index: 30;
}

#dialog_handle {
font: 9px verdana,arial,helvetica;
background-color:#0000ff;
padding:2px;
text-align:left;
height: 14px;
color: #000000;
vertical-align:middle;
}
</style>

<!--[if IE]>
<style type="text/css">
#bottom_area {
position: absolute;
}

@media screen
{
#bottom_area {
position: fixed;
}
* html{
overflow-y: hidden;
}
* html body{
overflow-y: auto;
height: 100%;
}
* html #bottom_area{
position: absolute;
}
}
</style>
<![endif]-->

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.mouse.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
$(window).ready(function(){
if(jQuery.browser.msie){
jQuery("#dialog").draggable({
zIndex: 15,
ghosting: false,
handle: '#dialog_handle'
});
} else {
jQuery("#dialog").Draggable({
zIndex: 15,
ghosting: false,
handle: '#dialog_handle'
});
}
for(var i=0;i<90;i++){
$("body").append("crappy text to be able to see the scroll effect...<br>");
}
});
</script>

</head>
<body>
<div id="bottom_area">
<div id="dialog">
<div id="dialog_handle">[DRAG ME AROUND]</div>
</div>
</div>
</body>
</html> [/PHP]

Thanks!
Jan 7 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!
Problem: If the page has scrolled, lets say 100px down (y-axis) and I try to
drag the dialog around, a strange effect appair in non-ie browsers. The dialog
is instantly moved 100px UP while dragging. as soon as I release the mouse button,
the dialog pops back down 100px (to where my pointer is located).
The dialog is positioned absolutely at 0,0. Perhaps if it was relative, you may not face this problem.
Jan 7 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.