...

View Full Version : DDs Drag and Drop modification - scrolling jitters



Graeme Hackston
01-10-2003, 04:29 AM
I modified DD's drag and drop script to allow vertical scrolling while dragging. Here is the original:

http://www.dynamicdrive.com/dynamicindex4/image3.htm

Is there a way to make the image move more evenly when scrolling? Also, can the scrolling itself be made more positive (so you don't have to wiggle the mouse to keep it moving)?

I can hide the image while scrolling and replace the cursor with some sort of "image moving" .cur but I thought I'd check to see if there's a better way first. Thanks for your input.



<html>
<head>
<title>Drag Drop</title>
<style>
.drag {
position: relative;
cursor: hand;
}
#container {
position: absolute;
top: 200px;
}
#space {
height:300%;
}
</style>
</head>
<body>

<div id ="container">
<img id="image" class="drag" src="http://www.dynamicdrive.com/dynamicindex4/tn00607a.gif" width="100" height="50">
</div>


<script>

/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var dragapproved = false

var z,x,y

document.onmousedown = drags

document.onmouseup = new Function("dragapproved = false; ScrollingUp = false; ScrollingDown = false;")

StartPosition = document.getElementById('image').offsetTop + document.getElementById("container").offsetTop

var ScrollingUp = false
var ScrollingDown = false

function Scroll() {
if (dragapproved) {
CliHei = document.body.clientHeight
ScrTop = document.body.scrollTop
if (event.clientY > CliHei - Moving_Image_Height) {
ScrollingDown = true
window.scrollTo(0, ScrTop + 20)
} else {
ScrollingDown = false
}
if (event.clientY < Moving_Image_Height) {
ScrollingUp = true
window.scrollTo(0, ScrTop - 20)
} else {
ScrollingUp = false
}
}
}

function move() {
Scroll()
if (event.button == 1 && dragapproved) {
z.style.pixelLeft = temp1+event.clientX-x
if (ScrollingUp || ScrollingDown) {
if (ScrollingUp) {
z.style.pixelTop = - StartPosition + document.body.scrollTop
}
if (ScrollingDown) {
z.style.pixelTop = - StartPosition + document.body.scrollTop + document.body.clientHeight - Moving_Image_Height
}
temp2 = z.style.pixelTop
y = event.clientY
} else {
z.style.pixelTop = temp2+event.clientY-y
}
return false
}
}


function drags() {
if (event.srcElement.className == "drag") {
Moving_Image_Height = event.srcElement.offsetHeight
dragapproved = true
z = event.srcElement
temp1 = z.style.pixelLeft
temp2 = z.style.pixelTop
x = event.clientX
y = event.clientY
document.onmousemove = move
}
}

</script>

<div id="space">
</div>
</body>
</html>

joeframbach
01-10-2003, 02:02 PM
how about making it so that if the user moves the mouse within 15 pixels or so of the edge of the screen, it automatically scrolls, to make scrolling smoother.

Graeme Hackston
01-11-2003, 01:04 AM
Thanks Joe, I tried that and you can tune the point where it switches to or from scroll to be smooth but it's tailored to an image height. I think that wouldn't be much of a deal if I can get rid of the jitters while scrolling.

It might even be just my computer but I'm seeing some fast north south movement while scrolling. It's seems to be directly proportional to how much I'm adding to (or subtracting from) the scrollTop in my window.scrollTo statements. Have I got things happening in the wrong order?

joeframbach
01-12-2003, 06:32 PM
i wouldnt make the scrolling propertional to the speed they scroll it, instead make some sort of algorithm that scrolls it a bit at a time. i really cant explain, its just an idea i had:rolleyes:

Graeme Hackston
01-12-2003, 09:46 PM
Thanks again Joe. I think I know what you mean. Any auto scrolling examples would be apreciated. This seems to be a very little bit better.



<html>
<head>
<title>Drag Drop</title>
<style>
.drag {
position: relative;
cursor: hand;
}
#container {
position: absolute;
top: 200px;
}
#space {
height:300%;
}
</style>
</head>
<body>

<div id ="container">
<img id="image" class="drag" src="http://www.dynamicdrive.com/dynamicindex4/tn00607a.gif" width="100" height="50">
</div>


<script>

/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var dragapproved = false

var z,x,y

document.onmousedown = drags

document.onmouseup = new Function("dragapproved = false; ScrollingUp = false; ScrollingDown = false;")//show image

StartPosition = document.getElementById('image').offsetTop + document.getElementById("container").offsetTop

var ScrollingUp = false
var ScrollingDown = false

function move() {
if (event.button == 1 && dragapproved) {
z.style.pixelLeft = temp1+event.clientX-x
if (ScrollingUp || ScrollingDown) {
temp2 = z.style.pixelTop
y = event.clientY
z.style.cursor='move'
//document.getElementById(Moving_Image_Id).style.visibility = 'hidden';
if (ScrollingUp) {
z.style.pixelTop = - StartPosition + document.body.scrollTop - Moving_Image_Height/4
}
if (ScrollingDown) {
z.style.pixelTop = - StartPosition + document.body.scrollTop + document.body.clientHeight - Moving_Image_Height
}
} else {
z.style.cursor='hand'
//document.getElementById(Moving_Image_Id).style.visibility = 'visible';
z.style.pixelTop = temp2+event.clientY-y
}
CliHei = document.body.clientHeight
ScrTop = document.body.scrollTop
ScrHei = document.body.scrollHeight
if (event.clientY > CliHei - 40 && ScrTop + CliHei < ScrHei - Moving_Image_Height/4) {
ScrollingDown = true
window.scrollTo(0, document.body.scrollTop + Moving_Image_Height/4)
} else {
ScrollingDown = false
}
if (event.clientY < 40 && ScrTop > Moving_Image_Height/4) {
ScrollingUp = true
window.scrollTo(0, document.body.scrollTop - Moving_Image_Height/4)
} else {
ScrollingUp = false
}
return false
}
}


function drags() {
if (event.srcElement.className == "drag") {
Moving_Image_Height = event.srcElement.offsetHeight
dragapproved = true
z = event.srcElement
temp1 = z.style.pixelLeft
temp2 = z.style.pixelTop
x = event.clientX
y = event.clientY
document.onmousemove = move
}
}

</script>

<div id="space">
</div>
</body>
</html>



Also, can the scrolling itself be made more positive (so you don't have to wiggle the mouse to keep it moving)?

I obviously can't continue to fire the function when the mouse has stopped moving.

You got me thinking about it again so this could be completely illogical. Iím just thinking outloud. Can this be done with VBScript? Maybe a JS set global variable from move(). Then in move() fire the VBScript function? Could someone show me what a VBScript While loop looks like?


JS:

JS_X = -1000000

function move() {
JS_X = event.clientX

//stuff

CheckMouse() // inside scroll if

//end stuff
}


VBScript:

Sub CheckMouse()
While event.clientX = JS_X
move()
End While
End Sub


Or just:

Sub CheckMouse()
While currentStyle.cursor='move'
move()
End While
End Sub

joeframbach
01-13-2003, 02:23 PM
another idea!

make <div>s around the border of the page, 15px or something tall...

onMouseover=scroll!!!

Graeme Hackston
01-14-2003, 01:01 AM
Great idea Joe.

I did a quick slaugther of another DD script. When I get some time later on I'll try it out (see below).

I also tried some auto scroll scripts but couldn't do anything else while they were running. I didn't spend much time on it. I might be able to combine the image moving with an auto scroll. I'll play with that later also.



<html>
<head>
<title>Page</title>
<STYLE TYPE="text/css">
html, body {
margin: 0;
padding: 0;
height:100%;
}
#space {
height:300%;
}
.menuh {
BORDER-COLOR : #FFFF99 ;
cursor : hand ;
Border-Left : #FFFF99 ;
Border-Top : #FFFF99 ;
Padding-Left : 1px ;
Padding-Top : 1px ;
Background-Color : #FFFF99 ;
}
.menu {
Background-Color : white ;
}
.home {
cursor : hand ;
}
.menulinks{
text-decoration:none;
}
</style>
</head>
<body>
<SCRIPT Language="Javascript1.2">
/*
Static menu script II (By maXimus, maximus@nsimail.com, http://maximus.ravecore.com/)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var offsetleft1 = 0
var offsettop1 = -25

function makeStatic1() {
object11.style.pixelTop=document.body.scrollTop+offsettop1
setTimeout("makeStatic1()",0);
}

document.write('<span ALIGN="CENTER" ID="object11" STYLE="Position:absolute; Top:20; Left:'+offsetleft1+'; Z-Index:5;cursor:hand;background-color:black;">')
document.write('<TABLE BORDER="1" width="100%" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')

var menui1 = new Array();
var menul1 = new Array();

menui1[0]="Dynamic Drive";
menui1[1]="What\'s New?";
menui1[2]="What\'s Hot?";
menui1[3]="What\'s Hot?";

for (i=0;i<=menui1.length-1;i++) {
document.write('<TR><TD BORDERCOLOR="white" onmouseover="" onMouseout="">')
document.write('<CENTER><FONT>'+menui1[i]+'</FONT></TD></TR>')
}

document.write('</TABLE></span>')

function menu31(){
makeStatic1()
}

</script>
<SCRIPT Language="Javascript1.2">
/*
Static menu script II (By maXimus, maximus@nsimail.com, http://maximus.ravecore.com/)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var offsetleft = 0
var offsettop = document.body.scrollTop + document.body.clientHeight - 75

function makeStatic() {
object1.style.pixelTop=document.body.scrollTop+offsettop
setTimeout("makeStatic()",0);
}

document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;">')
document.write('<TABLE BORDER="1" width="100%" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')

document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

menui[0]="Dynamic Drive";
menui[1]="What\'s New?";
menui[2]="What\'s Hot?";
menui[3]="What\'s Hot?";

for (i=0;i<=menui.length-1;i++) {
document.write('<TR><TD BORDERCOLOR="white" onmouseover="" onMouseout="">')
document.write('<CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')
}

document.write('</TABLE></span>')

function menu3(){
makeStatic()
}

onload = function() {
menu31()
menu3()
}
</script>
<div id="space">
</div>
</body>
</html>

Graeme Hackston
02-16-2003, 07:24 PM
This is as good as I can get this. It might be possible to remove the jitters if and when IE supports position:fixed;

It kind of planes out (like a flat spot on a tire :&#041; at the scroll speed it's set at now or higher. Even then there's a problem, slight vertical mouse movement during scrolling causes the image to be improperly positioned when scrolling is stopped.

Incase anyone still wants to use it, I've included how to do it with multiple images. Just add your image ids to the array.




<html>
<head>
<title>Drag Drop</title>
<script>

/*
Drag and Drop Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

Scroll_Speed = 600

Img_Ids = new Array ('image')

var dragapproved = false

var z,x,y

document.onmousedown = drags

document.onmouseup = new Function("dragapproved = false; ScrollingUp = false; ScrollingDown = false;")

var ScrollingUp = false
var ScrollingDown = false

function move() {
if (event.button == 1 && dragapproved) {
z.style.pixelLeft = temp1+event.clientX-x
Half_Moving_Image_Height = Moving_Image_Height/2

if (ScrollingUp || ScrollingDown) {
temp2 = z.style.pixelTop
y = event.clientY
z.style.cursor='move'

if (ScrollingUp) {
z.style.pixelTop = - window["Start_Position_Top" + Moving_Image_Id] + document.body.scrollTop - Scroll_Speed
}

if (ScrollingDown) {
z.style.pixelTop = - window["Start_Position_Top" + Moving_Image_Id] + document.body.scrollTop + document.body.clientHeight - Half_Moving_Image_Height + Scroll_Speed
}
} else {
z.style.cursor='hand'
z.style.pixelTop = temp2+event.clientY-y
}

CliHei = document.body.clientHeight
ScrTop = document.body.scrollTop
ScrHei = document.body.scrollHeight

if (event.clientY < Moving_Image_Height/2 && ScrTop > Moving_Image_Height) {
ScrollingUp = true
window.scrollTo(0, document.body.scrollTop - Scroll_Speed)
} else {
ScrollingUp = false
}

if (event.clientY > CliHei - Moving_Image_Height/2 && ScrTop + CliHei < ScrHei - Moving_Image_Height) {

ScrollingDown = true
window.scrollTo(0, document.body.scrollTop + Scroll_Speed)
} else {
ScrollingDown = false
}
return false
}
}


function drags() {
if (event.srcElement.className == "drag") {
Moving_Image_Height = event.srcElement.offsetHeight
Moving_Image_Id = event.srcElement.id
dragapproved = true
z = event.srcElement
temp1 = z.style.pixelLeft
temp2 = z.style.pixelTop
x = event.clientX
y = event.clientY
document.onmousemove = move
}
}

onload = function() {
for (var i=0;i<Img_Ids.length;i++) {
if (document.getElementById(Img_Ids[i])) {
window["Start_Position_Top" + Img_Ids[i]] = document.getElementById(Img_Ids[i]).offsetTop + document.getElementById("container").offsetTop
}
}
}

</script>

<style>
.drag {
position: relative;
cursor: hand;
z-index: 100;
}
#container {
position: absolute;
top: 200px;
}
#space {
height:3000%;
}
</style>

</head>
<body>

<div id ="container">
<img id="image" class="drag" src="http://www.dynamicdrive.com/dynamicindex4/tn00607a.gif" width="100" height="50">
</div>

<div id="space">
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum