Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer DDs Drag and Drop modification - scrolling jitters

    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>
    Last edited by Graeme Hackston; 01-10-2003 at 03:35 AM.

  • #2
    Regular Coder
    Join Date
    Dec 2002
    Location
    a bit west of pittsburgh
    Posts
    236
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Location
    a bit west of pittsburgh
    Posts
    236
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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

  • #6
    Regular Coder
    Join Date
    Dec 2002
    Location
    a bit west of pittsburgh
    Posts
    236
    Thanks
    1
    Thanked 0 Times in 0 Posts
    another idea!

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

    onMouseover=scroll!!!

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •