Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-23-2012, 06:40 PM   PM User | #1
firebrewd
New to the CF scene

 
Join Date: Apr 2011
Posts: 8
Thanks: 2
Thanked 0 Times in 0 Posts
firebrewd is an unknown quantity at this point
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 08:15 PM..
firebrewd is offline   Reply With Quote
Old 02-23-2012, 08:02 PM   PM User | #2
Logic Ali
Regular Coder

 
Logic Ali's Avatar
 
Join Date: Sep 2010
Location: London
Posts: 961
Thanks: 0
Thanked 198 Times in 193 Posts
Logic Ali will become famous soon enoughLogic Ali will become famous soon enough
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-23-2012 at 11:19 PM..
Logic Ali is offline   Reply With Quote
Old 02-23-2012, 08:17 PM   PM User | #3
firebrewd
New to the CF scene

 
Join Date: Apr 2011
Posts: 8
Thanks: 2
Thanked 0 Times in 0 Posts
firebrewd is an unknown quantity at this point
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.
firebrewd is offline   Reply With Quote
Old 02-23-2012, 11:20 PM   PM User | #4
Logic Ali
Regular Coder

 
Logic Ali's Avatar
 
Join Date: Sep 2010
Location: London
Posts: 961
Thanks: 0
Thanked 198 Times in 193 Posts
Logic Ali will become famous soon enoughLogic Ali will become famous soon enough
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>
Logic Ali is offline   Reply With Quote
Users who have thanked Logic Ali for this post:
firebrewd (02-24-2012)
Old 02-24-2012, 05:36 AM   PM User | #5
firebrewd
New to the CF scene

 
Join Date: Apr 2011
Posts: 8
Thanks: 2
Thanked 0 Times in 0 Posts
firebrewd is an unknown quantity at this point
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 05:40 AM..
firebrewd is offline   Reply With Quote
Old 02-24-2012, 11:45 AM   PM User | #6
Logic Ali
Regular Coder

 
Logic Ali's Avatar
 
Join Date: Sep 2010
Location: London
Posts: 961
Thanks: 0
Thanked 198 Times in 193 Posts
Logic Ali will become famous soon enoughLogic Ali will become famous soon enough
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.
Logic Ali is offline   Reply With Quote
Old 02-24-2012, 05:47 PM   PM User | #7
firebrewd
New to the CF scene

 
Join Date: Apr 2011
Posts: 8
Thanks: 2
Thanked 0 Times in 0 Posts
firebrewd is an unknown quantity at this point
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.
firebrewd is offline   Reply With Quote
Old 02-26-2012, 01:20 AM   PM User | #8
firebrewd
New to the CF scene

 
Join Date: Apr 2011
Posts: 8
Thanks: 2
Thanked 0 Times in 0 Posts
firebrewd is an unknown quantity at this point
Anyone, please? It's just disabling the script on forms, whatever way it works best.
firebrewd is offline   Reply With Quote
Reply

Bookmarks

Tags
acrobat, disable, grab, pdf, scroll

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:36 AM.


Advertisement
Log in to turn off these ads.