advanced code snippet search

Posted By

rmdort on 09/26/10


Tagged

scroll iphone iPad jscrollpane


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

bobbym245
lromak


Jscrollpane Ipad/Iphone/iPod/iOS Scroll Support

 / Published in: jQuery
 

Add this code to jscrollpane.js

Expand | Embed | Plain Text 
  1. // Ipad Iphone
  2. 				if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))||(navigator.userAgent.match(/Android/i))) {
  3. 				 		var isTouchScreen = 1;
  4. 				 	}else{
  5. 				 		var isTouchScreen = 0;
  6. 				 	}
  7.  
  8.  
  9. 				$container.bind('touchstart', function(e){
  10. 					var cpos = dragPosition;					
  11. 					if(isTouchScreen){
  12. 									e = e.originalEvent.touches[0];
  13. 								}
  14. 					var sY = e.pageY;
  15. 					var sX = e.pageX;
  16.  
  17.  
  18. 					$container.bind('touchmove',function(ev){
  19. 						if(isTouchScreen){
  20. 							ev.preventDefault();
  21. 							ev = ev.originalEvent.touches[0];
  22. 						}						
  23.  
  24. 						var top = cpos-(ev.pageY-sY);
  25. 						positionDrag(top);
  26.  
  27. 					});
  28. 					$container.bind('touchend',function(ev){
  29. 						$container.unbind('touchmove touchend');
  30. 					});
  31. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jrotondo on September 29, 2010

I think you left out a closing bracket at the end of the script:

});

That being said, I still can't get this to work. Whether I put your code at the top or bottomw of jscrollpane.js, I get "$container is not defined". Can you offer more details on how to get this to work? Do I need a specific version of jScrollPane?

Thanks!

Posted By: Xeldar on October 1, 2010

I get it work !

Just place the code after

if (isScrollable) { (arround line 165)

Thx for the code, working for on android too ^^

Posted By: Xeldar on October 1, 2010

And for android (i forgot), add this

|| (navigator.userAgent.match(/Android/i))

after

(navigator.userAgent.match(/iPad/i))

And yes i confirm about the closing bracket missing ^^

Posted By: jrotondo on October 2, 2010

Thanks Xeldar! I've now got it working as well. I was adding the snippet into the wrong section. Appreciate the help!

Posted By: rmdort on December 19, 2010

Sorry guys. been a little busy.. I did miss out the closing bracket.. Updated the code :)

Posted By: jackster829 on March 26, 2011

I still can't seem to figure out where to past this code. There is no: if (isScrollable) { in my jscrollpane.js file. There are a few if (isScrollableV) or if (isScrollableH) {

So, could you please just post the entire jscrollpane.js with your code? Or just tell me where I'm going wrong.

Posted By: alfredd on April 16, 2011

Scrollpane works on IPad and Android but gives a problem on the IPhone: it scrolles only halfway. please take a look at http://www.womeninwood.nl/werkwijze.html (there is more content then it shows).

Posted By: land on December 23, 2011

When we place this code snippet it is workign fine on Ipad but it is throwing errors on IE desktop. Can someone please suggest if there is anyti=hign that needs to be changed. Any help is much appreciated. Thanks in advance!

Posted By: larssonk22 on January 7, 2012

Hello I'm not very experienced with js, could someone tell me the correct placement for this code (as someone already mentioned there is no if (isScrollable) { (arround line 165) )

I'm confused, are your divs called touchstart or is that required?

Also does this allow for horizontal scrolling on iphone/ipad?

Posted By: malikusman on April 26, 2013

I just created a acount for you to say THANKS. Its really sovle my problem. Thanks once again :)

You need to login to post a comment.