Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful. 3 2961
<vu******@gmail.comschreef
Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful.
Can post an url to an example page? It sounds a tad overcomplicated. I
understand you want to scroll when the window when the object being dragged
gets close to the edge. Is that right? Then you need adjust the position of
the dragged object with the amount that the window scrolls. So instead of
looking at the mouse at this point, look at the distance that the window
travels.
HTH
Ivo http://4umi.com/web/javascript/
Thank you. I'll see if I can post an example.
Ivo wrote:
<vu******@gmail.comschreef
Hello,
I have a floating div which I drag all over the page. I want to enable
window.scrollBy function when div is dragged close to top or bottom of
the page, so users would drag this div to the very top or bottom of the
long page. However, when my page gets scrolled up or down, the div I
drag with my mouse scrolls with page too, and I no longer hold the div.
I added a functionality to change the top position of the div to be the
same as mouse top position but that does not seem to work well.
Can anyone suggest something for my case? I'd really be grateful.
Can post an url to an example page? It sounds a tad overcomplicated. I
understand you want to scroll when the window when the object being dragged
gets close to the edge. Is that right? Then you need adjust the position of
the dragged object with the amount that the window scrolls. So instead of
looking at the mouse at this point, look at the distance that the window
travels.
HTH
Ivo http://4umi.com/web/javascript/
here is my beautiful example
<html><head>
<style type="text/css">
..drag{
position:relative;
cursor:move;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null,
dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if
(isNaN(parseInt(this.targetobj.style.left))){this. targetobj.style.left=0}
if
(isNaN(parseInt(this.targetobj.style.top))){this.t argetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clie ntX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clien tY-this.y+"px"
return false
}
}
}
dragobject.initialize()
function getPosition(ev){
ev = ev || window.event;
var mousepos = getMouseCoords(ev)
if(mousepos.y < posTop()+50){
pageScrollUp(mousepos.y,ev)
}
}
function getMouseCoords(ev){
if(ev.pageX || ev.pageY){
return{x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function posTop(){
return typeof window.pageYOffset != 'undefined' ? windowPageYOffset :
document.documentElement
&& document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ?
document.body.scrollTop : 0;
}
function pageScrollUp(mousePosY,ev){
window.scrollBy(0,-80);
var d = document.getElementById('myDiv');
ev = ev || window.event;
var mousepos = getMouseCoords(ev);
d.style.top = (mousePosY - 80)+'px';
}
</script>
</head><body>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
<div id="myDiv" class="drag" style="border:blue solid
1px;background-color:lightyellow;width:100px;"
onMouseMove='getPosition();'>Drag Me<br>Anywhere</div>
<h1>Test test</h1><h1>Test test test</h1><h1>Test test test
test</h1><h1>Test test test test test</h1>
<h1>Test test test test test test</h1><h1>Test test test test
test</h1><h1>Test test test test</h1>
<h1>Test test test</h1><h1>Test test</h1><h1>Test test</h1><h1>Test
test test</h1><h1>Test test test test</h1>
<h1>Test test test test test</h1>
</body></html> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Adam |
last post by:
Hi
I had Ruby 1.6.8-8 for Windows installed on my WinXP Pro machine prior
to installing Python 2.3. After installing Python 2.3, I tried to
<----- screen output of python interactive command...
|
by: your name here |
last post by:
I've been trying to get the scrollby javascript feature to scroll
through frames. My end goal is to make my own scroll buttons to use
for navigation through the frame but I figured I would start...
|
by: JF |
last post by:
Hi,
I need to change the location of the parent window and after
that scroll a little bit (because of "position:fixed" css buttons,
which obscure the title).
I have...
|
by: BGC |
last post by:
I'm attempting something like this:
win1 =
window.open("pop_up.html","_blank","width=325,height=272,top=0,left=0,scrollbars=0,resizable=0");
win1.window.scrollBy(100,50);
I've done this...
|
by: Robert Gamble |
last post by:
9899:1999 5.1.2.3 Example 4 reads:
"EXAMPLE 4 Implementations employing wide registers have to take care
to honor appropriate semantics. Values are independent of whether they
are represented in a...
|
by: Michi |
last post by:
Hallo.
I just try to implement a scrolling effect to a drag and drop script.
If you try to drag something to an area beneath the visible area of
your browser window, the window should scroll...
|
by: vunet.us |
last post by:
Hello JavaScript experts,
I have a floating div which I drag all over the page. If the page has
scrollbars and users drag the floating div to the very top, page
scrolls up too. The problem occurs...
|
by: lotus18 |
last post by:
Hello World
I have a problem in detecting the conflict schedule (Day and Time).
Day
1. M
2. T
3. W
4. TH
5. F
|
by: lotus18 |
last post by:
Hello all
I have these records on my Day Table for my complete database table please click here
1. M
2. T
3. W
4. TH
5. F
6. S
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |