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 4 of 4
  1. #1
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Post scroll with mouse movement

    I have wrote this for a friend in another forum, But I thought it might be useful, at least for start for similar apllication.

    Tho code scrolles the page if mouse moves in the 1/3 zones (left, right, up, down) of the page (clientWidth/Height). It might be modify (a better ideea, since I don't like scrolled full pages - at least the X-scrolled) for scrollable frames, iframes or layers). I would be grateful if any comments will simplify he code or will help me to build a similar application based on simple position of the mouse (not only on mousemove)

    PHP Code:
    <html>
    <
    head>
    <
    script>
    function 
    setUp() { 
      if( 
    typeofwindow.innerWidth ) == 'number' ) {
        
    /* Non-IE */
        
    winW window.innerWidth;
        
    winH window.innerHeight;
      } else if( 
    document.documentElement &&
          ( 
    document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        
    /* IE 6+ in 'standards compliant mode' */
        
    winW document.documentElement.clientWidth;
        
    winH document.documentElement.clientHeight;
      } else if( 
    document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        
    /*IE 4 compatible*/
        
    winW document.body.clientWidth;
        
    winH document.body.clientHeight;
      }
    setL winW/3;// zone left first 1/3 from client width
    setR winW*2/3;// zone right third 1/3 from client width
    setU winH/3;// zone up first 1/3 from client height
    setD winH*2/3;// zone down third 1/3 from client width
    pix=4// scroll speed control pixels/mousemove
    }
    function 
    checkS(e){
    // capture the mouse position
        
    var posx 0;
        var 
    posy 0;
        if (!
    e) var window.event;
        if (
    e.pageX || e.pageY)
        {
            
    posx e.pageX;
            
    posy e.pageY;
        }
        else if (
    e.clientX || e.clientY)
        {
            
    posx e.clientX
            
    posy e.clientY
        }
    // initialize the scrollBy parameters
    x=0;
    y=0;
    // set the new scrollBy parameters
    if(posx<setL){
    x=-pix;
    }
    if(
    posx>setR){
    x=pix;
    }
    if(
    posy<setU){
    y=-pix;
    }
    if(
    posy>setD){
    y=pix;
    }
    // scroll
    window.scrollBy(x,y);
    }
    </script>
    </head>
    <body onload="setUp()" onmousemove="checkS(event)">
    <table width="1200" height="900" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="middle" bgcolor="#CCCCCC">blabla</td>
      </tr>
    </table>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just a few comments:

    1. you need to recalc the zones on browser resizing.
    2. Don't know if you realized this but if the document is to big compared to the window size you method of scrolling requires you move the mouse up and down in the up down zones to get to the top or bottom and same goes for the left rigth zones.
    3. I would advise against using the mouse position to scroll, simply cause experience tells me it will be hard for the user to control the scrolling but an idea to do it on is to used onmousemove to launch an settimeout or setInterval function, this would work in theory since the mouse position only changes onmousemove, you would of cause need to clear the settimeout or interval on each new mousemove.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    thanx for the comments

    1. yes, I'll insert an onresize event handler too.
    2. maybe onmousedown would be a better handler?
    3. yes. good ideea with setInterval (or setTimeout)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    according your notes, the code looks now like:

    PHP Code:
    <html>
    <
    head>
    <
    script>
    function 
    setUp() { 
      if( 
    typeofwindow.innerWidth ) == 'number' ) {
        
    /* Non-IE */
        
    winW window.innerWidth;
        
    winH window.innerHeight;
      } else if( 
    document.documentElement &&
          ( 
    document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        
    /* IE 6+ in 'standards compliant mode' */
        
    winW document.documentElement.clientWidth;
        
    winH document.documentElement.clientHeight;
      } else if( 
    document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        
    /*IE 4 compatible*/
        
    winW document.body.clientWidth;
        
    winH document.body.clientHeight;
      }
    setL winW/3;// zone left first 1/3 from client width
    setR winW*2/3;// zone right third 1/3 from client width
    setU winH/3;// zone up first 1/3 from client height
    setD winH*2/3;// zone down third 1/3 from client width
    pix=1// scroll speed control, in pixels/mousemove
    time=20// scroll speed control time setTimeout, in milliseconds
    }
    function 
    checkS(e){
    // capture the mouse position
        
    var posx 0;
        var 
    posy 0;
        if (!
    e) var window.event;
        if (
    e.pageX || e.pageY)
        {
            
    posx e.pageX;
            
    posy e.pageY;
        }
        else if (
    e.clientX || e.clientY)
        {
            
    posx e.clientX;
            
    posy e.clientY;
        }
    // initialize the scrollBy parameters
    x=0;
    y=0;
    // set the new scrollBy parameters
    if(posx<setL){
    x=-pix;
    }
    if(
    posx>setR){
    x=pix;
    }
    if(
    posy<setU){
    y=-pix;
    }
    if(
    posy>setD){
    y=pix;
    }
    scro();
    }
    function 
    scro(){
    window.scrollBy(x,y);
    zz=setTimeout('scro()',20)
    }
    function 
    clearT(){
    clearTimeout(zz)
    }
    </script>
    </head>
    <body onload="setUp()" onresize="setUp()" onmousedown="checkS(event)" onmouseup="clearT()">
    <table width="1200" height="900" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="middle" bgcolor="#CCCCCC">blabla</td>
      </tr>
    </table>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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