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
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Disabling Grab Scroll Script on Forms?

    I've got this script working for grabbing and scrolling a website, and it's perfect; the only problem is I'd like to disable it when clicking a form (basically, not being able to drag scroll when clicking inside a form or input tag). This could be either by specifying a class or ID, whatever works best.

    This is the script, in case the website goes down or something:

    Code:
    <script type="text/javascript">
    document.onmousedown = function(){
      var e=arguments[0]||event;
      var x=zxcWWHS()[2]+e.clientX;
      var y=zxcWWHS()[3]+e.clientY;
      document.onmousemove=function(){
      var e=arguments[0]||event;
        window.scroll(x-e.clientX, y-e.clientY);
        return false;
      }
      document.onmouseup=function(){
        document.onmousemove=null;
      }
      return false;
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     else if (document.getElementById("mailForm").onmousedown=null);
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    </script>
    Also, would there be a way to enable grab scrolling just on the background? I mean, disabling it on images, text and any other element, and just leaving the empty spaces of the website with the ability to scroll.

    Thanks a lot in advance.
    Last edited by firebrewd; 02-23-2012 at 09:15 PM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    <script type="text/javascript">
    
    document.onmousedown = function(evt)
    {
      var e= evt || window.event;
      
      var x=document.body.scrollLeft+e.clientX;
      
      var y=document.body.scrollTop+e.clientY;
      
      document.onmousemove=function( evt )
      {
        var e = evt || window.event,
            srcElem = e.target || e.srcElement,
            wasBody = srcElem.nodeName === 'BODY';
    
        if( wasBody )
          scrollTo(x-e.clientX, y-e.clientY);
    
        return !wasBody;
      }
      document.onmouseup=function()
      {
        document.onmousemove = null;
      }
      return false;
    }
    </script>
    Last edited by Logic Ali; 02-24-2012 at 12:19 AM.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    Code:
    <script type="text/javascript">
    
    document.onmousedown = function()
    {
      var e=arguments[0]||event;
      var x=document.body.scrollLeft+e.clientX;
      var y=document.body.scrollTop+e.clientY;
      document.onmousemove=function( e )
      {
        var evt = e || window.event,
             srcElem = evt.target || evt.srcElement,
             wasBody = srcElem.nodeName === 'BODY';
    
        if( wasBody )
          scrollTo(x-e.clientX, y-e.clientY);
    
        return !wasBody;
      }
      document.onmouseup=function(){
        document.onmousemove=null;
      }
      return false;
    }
    </script>
    Thanks for the reply. But now the script doesn't work at all, even on the body itself. I updated the original post because the script wasn't complete, and there was a function mssing.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by firebrewd View Post
    Thanks for the reply. But now the script doesn't work at all, even on the body itself. I updated the original post because the script wasn't complete, and there was a function mssing.
    I needed to edit the code for I.E. Here's a complete working example.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Drag on Body Only</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
     <form action='#'>
      <div style='border:solid red 2px;padding:2em'>
       <input type='text'>
      </div> 
     </form>
    
    <script type="text/javascript">
    
    document.onmousedown = function(evt)
    {
      var e= evt || window.event;
      
      var x=document.body.scrollLeft+e.clientX;
      
      var y=document.body.scrollTop+e.clientY;
      
      document.onmousemove=function( evt )
      {
        var e = evt || window.event,
            srcElem = e.target || e.srcElement,
            wasBody = srcElem.nodeName === 'BODY';
    
        if( wasBody )
          scrollTo(x-e.clientX, y-e.clientY);
    
        return !wasBody;
      }
      document.onmouseup=function()
      {
        document.onmousemove = null;
      }
      return false;
    }
    
    </script>
    
    Drag on body only not child elements ====================================================================================================================================================================================================
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    <Br>-
    <Br>\
    <Br>+
    </body>
    </html>

  • Users who have thanked Logic Ali for this post:

    firebrewd (02-24-2012)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks man, it works, but there's a tiny problem: what I want to achieve by not being able to drag on forms is to keep the ability to click and write on input tags. If I try to write in the form, though I no longer can drag, I also can write.

    Basically, I'd like to entirely disable the script on forms, so the ability to write on them is kept intact. Something like "If the click was done inside a form, do nothing; else, run this script (the one to click and drag)". Can you help on that bit? Thanks a lot, really.
    Last edited by firebrewd; 02-24-2012 at 06:40 AM.

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by firebrewd View Post
    Basically, I'd like to entirely disable the script on forms, so the ability to write on them is kept intact.
    Just remove the return false statement at the bottom of the outer function.

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    Just remove the return false statement at the bottom of the outer function.
    It works great! But now when I drag the text and everything else gets selected. Any way to improve that? The perfect solution would be to have return false for everything except forms.

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone, please? It's just disabling the script on forms, whatever way it works best.


  •  

    Tags for this Thread

    Posting Permissions

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