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!
