> iScroll 4

iscroll4

iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.

iScroll 5 is out! Go get the new version! This page is kept just for historical reasons.


Project info

Last code update: 2012.07.14 – v4.2
Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
Discussion group
QR Code opens demo page.

Support development

If this script saved your day and you wish to support future developments you may consider sending some funds via PayPal or Flattr.





Overview

iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.

While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs.

In addition to all previous iScroll features, version 4 introduces:

  • Pinch / Zoom
  • Pull up/down to refresh
  • Improved speed and momentum
  • Snap to element
  • Customizable scrollbars

Please note that iScroll 4 is not a drop-in replacement for iScroll 3. The APIs have changed.

Also consider that the script is still in beta, and some APIs may slightly change.

Getting started

In the archive you’ll find plenty of examples to get you started. Before asking for help, please, look at the demos and read through all this document. I know it’s boring, but it holds all the secrets of the iScroll Ninja.

iScroll needs to be initialized for each scrolling area you need. There’s no limit to the number of iScrolls you can have on any single page, if not that imposed by the device memory/cpu. The type and length of the contents influence the number of iScrolls you can use simultaneously.

Try to keep the DOM structure as simple as possible, remove all the unnecessary tags and avoid too many nested elements.

The optimal iScroll structure is:

<div id="wrapper">
	<ul>
		<li></li>
		...
		...
	</ul>
</div>

In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.

Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:

<div id="wrapper">
	<div id="scroller">
		<ul>
			<li></li>
			...
			...
		</ul>

		<ul>
			<li></li>
			...
			...
		</ul>
	</div>
</div>

In this example the scroller element will be scrolled (together with the two ULs).

iScroll be must instantiated (ie: called for the first time) when the DOM is ready. You have mainly four options:

  • onDOMContentLoaded event
  • onLoad event
  • inline, place the code below the html bit you want to scroll

onDOMContentLoaded

If you have only text and all images have fixed dimensions (ie: explicit width/height) you may use the DOMContentLoaded event.

In the document HEAD add:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

Note that the myScroll variable is global, so that you can access all the scroller functions from anywhere.

onLoad

Sometimes the DOMContentLoaded is a bit hasty and get fired when the contents are not ready. If you slip into some weird behaviors (eg: rubber band effect), try the following:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
	setTimeout(function () {
		myScroll = new iScroll('wrapper');
	}, 100);
}
window.addEventListener('load', loaded, false);
</script>

In this case iScroll is started only 100ms after the page is completely loaded (graphics included). This is probably the safest way to call the iScroll.

Inline initialization

With this method the iScroll is instantiated as soon as the wrapper and its contents are written to the page. I wouldn’t suggest this approach, but I see many javascript gurus using it… so who am I to disagree?

First of all include the iscroll.js in the page HEAD and then create the iScroll object just below the scroller.

<div id="wrapper">
	<ul>
		<li></li>
		...
		...
	</ul>
</div>

<script type="text/javascript">
var myScroll = new iScroll('wrapper');
</script>

Alternatively you may use your preferred framework ready function (eg:jquery ready()).

Passing parameters to the iScroll

iScroll behavior can be customized with the optional second parameter. Eg:

<script type="text/javascript">
var myScroll = new iScroll('wrapper', { hScrollbar: false, vScrollbar: false });
</script>

The second parameter is always an object. In the example above the scroller won’t show the scrollbars. The most common options you will use are:

  • hScroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper.
  • vScroll, same as above for vertical scroll.
  • hScrollbar, set this to false to prevent the horizontal scrollbar to appear.
  • vScrollbar, same as above for vertical scrollbar.
  • fixedScrollbar, on iOS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on iOS.
  • fadeScrollbar, set to false to have the scrollbars just disappear without the fade effect.
  • hideScrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true.
  • bounce, enable/disable bouncing outside of the boundaries. Default: true.
  • momentum, enable/disable inertia. Default: true. Useful if you want to save resources.
  • lockDirection, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false.

Tips: to preserve resources try to remove the scrollbars (h/vScrollbar option).

Pull to refresh

This feature has become famous thanks to the Twitter app and many other native applications on the Apple Store. You can watch a preview in this screencast.

I’ve recently removed the “pull to refresh” from the script core and replicated the same functionality as an external plugin. Please have a look at the included example to get an idea of how it works.

All you have to do is to customize the pullDownAction() function. You’ll probably need an ajax call that loads new contents, remember to call the refresh method once the new data is attached to the DOM. Also please note that the example adds a 1 second delay to simulate network congestion. Of course you don’t want it in production, so remember to remove the setTimeout.

Pinch / Zoom

Let’s face it: scrolling is boring. That’s why iScroll 4 lets you also zoom in and out. By setting the zoom option to true the scroller reacts to pinch/zoom gestures. Believe your eyes if you don’t believe me.

Double tap to zoom in/out is also supported.

The minimum setup to activate zooming is:
var myScroll = new iScroll('wrapper', { zoom: true });.

You may further customize the zoom behavior with the following option:

  • zoomMax, this is the maximum allowed scale. Defaulted to 4, it means 4 times the original size.

Tip: to have good looking zoomed images place them into the hardware compositing layer. Or –to speak in plain English– apply -webkit-transform:translate3d(0,0,0) to all images that need to be scaled. Important: hardware acceleration takes a lot of resources, use it sparingly or your app will just crash. Don’t say I didn’t warn you.

Snap and snap to element

The snap feature locks the scroller to predefined positions. This can be used to create fancy carousels.

By default iScroll subdivides the scroller into quadrants or pages of the same size of the wrapper. iScroll 4 also adds the option to snap to any element inside the scroller regardless of the wrapper size.

If you wish to create carousels I suggest to use the default “quadrant” subdivision. The perfect setup is:

var myScroll = new iScroll('wrapper', {
	snap: true,
	momentum: false,
	hScrollbar: false,
	vScrollbar: false });

To snap to elements, pass a string representing the query of the DOM elements the scroller should snap to. Eg:

var myScroll = new iScroll('wrapper', {
	snap: 'li',
	momentum: false,
	hScrollbar: false,
	vScrollbar: false });

In this example the scroller will snap to the top left corner of all LI elements inside the scroller.

Note that the snap string is applied to the scroller (ie: scroller.querySelectorAll(snap_string)), so '#scroller li' is wrong, while just 'li' is correct.

Custom scrollbars

You can now customize the scrollbars appearance with a bunch of CSS. To apply a class to the scrollbars you just need to pass the scrollbarClass option:
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });.

In this example the myScrollbarH class will be applied to horizontal bar and myScrollbarV to the vertical bar. Note that the scrollbar is composed by two elements: container and indicator. The container has the same height of the scroller wrapper, while the indicator is the scrollbar itself.

The scrollbar HTML structure:

<div class="myScrollBarV">
	<div></div>
</div>

How to style it:

.myScrollbarV {
	position:absolute;
	z-index:100;
	width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;

	/* The following is probably what you want to customize */
	background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
	border:1px solid #800;
	-webkit-background-clip:padding-box;
	-webkit-box-sizing:border-box;
	-webkit-border-radius:4px;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

Have a look at the demo CSS to get an idea.

Public methods

iScroll has some public methods you can access any time to interact with the scroller. The most important of all is refresh, it must be called each time the content inside the scroller changes.

Public methods are accessed thank to the global variable used to instantiate the iScroll. In the examples I used myScroll, so you can access all the methods with: myScroll.name_of_the_function(parameters).

Continue reading for more details.

Mastering the refresh() method

iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM.

This is achieved by calling the refresh function with the right timing. Please follow me closely, understanding this will save you hours of scrolling frustration.

Every time you change elements height/width or you modify the html structure in any way (eg: appendChild or innerHTML) the browser renderer updates the page. Once the browser applied the changes you can access the new DOM (and properties) from javascript again. Sometimes this process is not instant.

To ensure that javascript gets the updated parameters you can force reading the DOM in a new instance. Look at the following code:

ajax('page.php', onCompletion);

function onCompletion () {
	// Here modify the DOM in any way, eg: by adding LIs to the scroller UL
	
	setTimeout(function () {
		myScroll.refresh();
	}, 0);
};

Here we placed the refresh call into a zero timeout, doing so we gave the browser the time to refresh itself and the new element dimensions are correctly taken. There are other ways to ensure the browser actually updated the DOM, but so far the zero-timeout has proven to be the most solid.

So the golden rule is: if unsure call the refresh inside a timeout.

Javascript scrolling

You can scroll programmatically with scrollTo, scrollToElement and scrollToPage (if your are using the snap feature).

scrollTo(x, y, time, relative) scrolls the wrapper contents to the x/y coordinates in a give timeframe: myScroll.scrollTo(0, -100, 200) position the scroller 100 pixels down in the wrapper within 200 milliseconds.

You can also scroll relatively to the current location by passing the forth parameter: myScroll.scrollTo(0, 10, 200, true). The scroller is shifter by 10 pixels in the y axis starting from the current location.

scrollToElement(element, time) scrolls to any element inside the scrolling area: myScroll.scrollToElement('li:nth-child(10)', 100). This code scrolls to the 10th element in the list. The first parameter is a CSS3 selector or the element node itself.

If snap is active you can also use the scrollToPage(pageX, pageY, time) function: myScroll.scrollToPage(1, 0, 200). This will position to the second horizontal page in 200 ms. Pages are zero based (ie: page 1 is 0, page 2 is 1, …).

Destroy!

To completely destroy the iScroll and free some (a lot of) memory, call the destroy() method.

Best way to destroy an iScroll:

myScroll.destroy();
myScroll = null;

iScroll Lite Edition

iScroll is evolving and adding many new features to the basic scrolling functionality. If all you need is the plain old scroller for mobile webkit, you should really use iscroll-lite.js instead.

iScroll Lite is a frippery free version of iScroll 4. It supports scrolling on mobile devices only (no desktop compatibility). Snap, zoom, pull to refresh and superpowers are all stripped away. Fat free, eat as much as you can.

Known issues and future development

The followings are known issues I’m currently working on:

  • Form fields compatibility
  • Zoom glitches
  • Better desktop browser compatibility
  • onScroll event
  • hash and hash change support (ie: http://example.com/#element-id)
  • automatic refresh upon DOM change

Credits

iScroll is evolving thank to the help of all those who sent suggestions, bug reports and ideas on github, here on my blog and googlecode. This is by no means the work of a sole man.

In pure rnd() order: beedesk, Daniel J. Pinter, Aseem Kishore, Alex Gibson, Christoph Pojer, Shimon Dookdin, Will Bailey, Aaron Infidel. (Let me know if I forgot your name).

All those who supported, linked, loved the iScroll.

Projects using/based/inspired by the iScroll library

It became impossible to track all the websites and applications using iScroll. It has been used by Apple, Playboy, People.com, LinkedIn and it is in so many Phonegap’d applications in the Apple store that it is impossible to count them all.

Comments and Support

The blog comments reveled an inadequate system to discuss iScroll features, please use the google discussion group instead.

/Share the joy

/Reactions

  • mitico!

    Reply
    • Author: Ryan
    • Posted on: 2011/03/11
    • At: 03:39

    Is there a way to hide the address bar while using this plugin? Thanks!

    Reply
      • Author: Mike Plant
      • Posted on: 2011/04/06
      • At: 16:08

      Ryan,

      Did you get this figured out? I am having the same issue, once I initialize the iScroll-4 plugin my scroll to no longer hides the address bar.

      Matteo, can you please help with this? window.scrollTo(0, 1); does not work any longer, how can we still hide the address bar while using this plugin? I need the real estate in landscape mode.

      Reply
      • Author: Vasken
      • Posted on: 2011/04/11
      • At: 22:35

      I second Mike’s motion. This is an awesome script that’s made my life a lot easier, but I really do need that piece of screen real estate back. Any ideas? Thanks in advance.

      Reply
    • okay guys, I’ll have a look at it, but I see no reasons why it shouldn’t work.

      Reply
      • Author: Xavier
      • Posted on: 2011/04/15
      • At: 16:23

      Just include these meta tags:

      They’re in the examples. Just tested it.

      Reply
      • Author: Xavier
      • Posted on: 2011/04/15
      • At: 18:49

      Sorry, meta tags didn’t come through.. They work when you add the webpage to your homescreen:

      http://stackoverflow.com/questions/3024434/ipad-webapp-full-screen-in-safari

      Reply
    • Author: MikeH
    • Posted on: 2011/03/12
    • At: 11:13

    Hi!

    Great what your are doing!

    But could you provide your QR-Tags with real links underneath? Because my iPad has no camera to read QR-Tags. So for me it is tedious to try your samples.

    Thanks!

    Reply
    • you are totally right, thanks pointing this out.

      Reply
    • Author: Jeeves
    • Posted on: 2011/03/12
    • At: 19:50

    Thanks for the great script! Unfortunately it’s really difficult to view the demos. Can you use normal links as well as the QR Codes?

    Reply
    • Author: blablaman
    • Posted on: 2011/03/13
    • At: 16:07

    Is it possible to hide the url bar in mobile safari on the iphone?

    Reply
      • Author: Name
      • Posted on: 2011/03/13
      • At: 21:35

      Javascript scroll on page load:

      window.scrollTo(0, 0);
      or
      window.scrollTo(0, 1);

      Only difference being a 1px break at the top which looks good

      Reply
    • Author: ice
    • Posted on: 2011/03/15
    • At: 15:02

    nice work :)

    i am having trouble combine it with iui script. i need iscroll header and sliding loading page with iui.

    i have found this demo: http://cubiq.org/dropbox/iui/samples/iscroll-demo/

    page 1 is perfect but it has bug on page 2 (with scrolling) and it load a javascript too get page 2info. unlike iui using html link # tag.

    i have Google but all i can found are old script . so if someone have nice tips for me plz :)

    Reply
    • Author: ze
    • Posted on: 2011/03/16
    • At: 02:56

    Hi, is there a way to integrate iscroll 4 with iui ? like the previous 3.xx version?

    any one can help?

    thanks in advace

    Reply
  • Very nice work with the update dude. It works really nice. you are pioneering our way to mobile apps native functionality and we like it! :) Keep it up.

    Reply
    • Author: Prince Joseph
    • Posted on: 2011/03/18
    • At: 07:47

    Hi,

    I want to know whether this hack will affect the layout of the web application in the normal desktop.

    Thanks

    Reply
    • Author: Marc Jarrossay
    • Posted on: 2011/03/18
    • At: 22:05

    Thanks for your work!
    Very nice!!!

    Reply
    • Author: Chad Penney
    • Posted on: 2011/03/23
    • At: 20:50

    Any word on compatibility with form fields? This is perfect except that on some of my pages I need to have combo boxes for users to select options.

    Reply
      • Author: Claudio Holanda
      • Posted on: 2011/03/24
      • At: 03:07

      Man, o just have the same issue. Support for form elements is the only thing that must be fixed before this plugin get perfect!

      Good work! We’re all waiting to fix this little problem with inputs. ;)

      Reply
    • hopefully will be fixed in 4.1

      Reply
    • Author: Suthan Bala
    • Posted on: 2011/03/24
    • At: 06:45

    Nice script boss. Keep up the good work.

    Reply
    • Author: Gavin
    • Posted on: 2011/03/24
    • At: 10:47

    Form elements rubber banding the window == annoying – i even started creating my own virtual keyboard as a long work around (via slideinmenu ;) )

    Reply
    • Author: TwisterMc
    • Posted on: 2011/03/24
    • At: 17:35

    Is there any way to disable snap if someone zooms in on an image? The two don’t play well together as snap is constantly re-positioning my zoomed in image.

    Reply
    • Author: TJ
    • Posted on: 2011/03/28
    • At: 03:06

    I have created a web app using iScroll. When I launch it in safari, and add it to the homescreen so that I can use it as a fullscreen web app, all links open in Safari as opposed to within the app.

    Is this a “feature” or am I doing something wrong? Is there an attribute which I need to add in order to force the links to open in the same place and not launch Safari?

    Reply
    • Author: wyatt biker
    • Posted on: 2011/03/28
    • At: 19:36

    I just want to say this is amazing. So far I have it running on an android emulator 2.2. Looks real good.

    I do have one problem. I added buttons with javascript alerts in the footer.

    When the alert comes up and I click OK, the browser is repositioned to the top (ie shows the URL address bar). The list content is still positioned correctly.

    Is there something that I need to do after the alert executes?

    Thanks.

    Reply
    • Author: Andrew
    • Posted on: 2011/03/30
    • At: 16:58

    I was having trouble using a carousel with two divs on the iPad. There seems to be a memory leak sometimes, if you pass

    snap: true

    When the iPad was rotated and the CSS changed, it caused the iScroll.js (line 911) to constantly compare 0 with 0 (frustratingly, only sometimes), and never broke out of the loop. Replacing it to

    snap: ‘li’

    seems to have fixed the problem. I believe the issue is if the carousel ‘snaps’ incorrectly to a section of the screen that doesn’t have any ‘real’ html, the loop is trying to figure out where to snap too, but the pos is 0, and the maxScrollX = 0 as well.

    Other then that, great work.

    Reply
  • Matteo, that is a great work, thank you!

    I use iScroll with stackLayout, the “wrapper” division contains a stacklayout element. In some subviews I use the new “pull to refresh” option in others not. So I have to re-initialize iScroll for every subView. When I first uses “pull-to-refresh” and remove this option for the next subView, the subViews content has a wrong y-offset, due to the height of the former (now removed) pull-divison.

    After I inserted a “that.refresh()” statement in line 815 of iscroll.js – all works fine.

    (Beta app is http://rhein-zeitung.de/app1)

    Greetigs

    Jochen

    P.S.: I can confirm the “li” problem which Andrew described.

    Reply
    • thanks for your reports (both Jochen and Andrew). I’ll check those issues out.

      Reply
    • Author: chris
    • Posted on: 2011/04/05
    • At: 04:06

    I am having problems after the orientation changes. I have a function called that manipulates the DOM (quite a bit) but its broken now because the window size isn’t reporting correctly. Am I just missing something?

    Reply
    • Do you bind on orientation change before or after iscroll initialization?

      Reply
    • Author: Danila
    • Posted on: 2011/04/05
    • At: 10:45

    Hi.
    I’ve implemented simple scroller to a list and it scrolls nice on iPhone, but the whole page fails to scroll. I can only zoom it by double-tap.
    It seems that
    document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
    may be the case. Can I use your scroller and scroll the page at the same time?

    Thank you

    Reply
    • depends on your page layout. removing the line you pointed is the first step for sure.

      Reply
    • Author: Henrik
    • Posted on: 2011/04/05
    • At: 11:02

    You rock man!

    Is there any way to get the current scroll offset from iScroll? So it can be subtracted from e.pageX and e.pageY to determine where in the scrollable area a click event occurred?

    Reply
    • myScroll.x/y should be what you are looking for

      Reply
    • Author: Daniel
    • Posted on: 2011/04/06
    • At: 11:42

    create!
    but ,how can i implement a horizontal scroll exactly?
    i set hScroll and hScrollbar true, but horizontal scroll is not display.
    ———————javascript————————
    var myScroll;
    function loaded() {
    setTimeout(function () {
    myScroll = new iScroll(‘wrapper’,{hideScrollbar: false,hScrollbar: true,vScrollbar: true, hScroll: true, vScroll: true});
    }, 100);
    }

    window.addEventListener(‘load’, loaded, false);
    ———————javascript————————

    Reply
    • Author: Mint
    • Posted on: 2011/04/07
    • At: 03:24

    Hey there! great work!

    I tried it using iphone and oh great!
    thats wad im looking for!

    unfortunately, this dont work in IE, do they?
    Because Im trying to build a website, using html and css to cater for both desktop and mobile devices, and the imonsters(iphone, itouch,ipad) doesnt comprehend the fixed header and footer, while this dont work in IE :(

    Sadly i ahev to give this up, but i love ur iscroll!! keep it up! :D

    Reply
    • Author: Klaas
    • Posted on: 2011/04/08
    • At: 10:48

    Hi,

    short question regarding the carousel. This seems perfect for me. I only have one problem. When I try to scroll down, it does not work when I am in the wrapper area, only when I scroll underneath or obove the carousel area. Shouldn’t this work when setting vScroll: false?

    Best regards,
    klaas

    Reply
    • it’s a bit more complex than that. I made that customization for some of my clients, but it didn’t end up in the public release.

      Reply
        • Author: Mark
        • Posted on: 2013/01/27
        • At: 10:58

        i face the same problem, how can i fix it ?

    • Author: Joe Howse
    • Posted on: 2011/04/09
    • At: 01:54

    The script seems not to behave well with anchors. If my url contains an anchor (and the anchor point is in my scrollable area), I cannot scroll above the anchor point.

    Reply
    • Author: Benjamin
    • Posted on: 2011/04/09
    • At: 15:53

    Awesome work man :) love the new script. Its the proper touch tablet scripts! Really helped me out to prototype a tablet webapplication.

    Reply
    • Author: Klaas
    • Posted on: 2011/04/10
    • At: 17:09

    Hey Matteo,

    bad to know that it does not work that simple. Good to know that there is some kind of workaround. Can you tell me how you worked around that issue?

    cheers ,
    Klaas

    Reply
    • You have to check the movement threshold (say 10px). After that threshold you know which direction the finger is moving, if it is moving horizontally you preventDefault and keep iScroll do its stuff. If moving vertically you can skip the iScroll and proceed with standard page-scroll.

      Reply
    • Author: Tim S
    • Posted on: 2011/04/11
    • At: 05:45

    Works fine on Android 2.2, but I’m noticing that on Android 2.1, it seems to only work once. After that, it just scrolls the whole page rather than only the DIV. Is this a known issue or is there a workaround?

    Reply
    • Unfortunately I cannot test on all devices. I think this is the first time I hear of such an issue, what device do you have?

      Reply
    • Author: Luis
    • Posted on: 2011/04/12
    • At: 02:30

    Hi, is possible have only one tab fixed?? (footer) and remove the header?

    Reply
    • Author: anonymous
    • Posted on: 2011/04/12
    • At: 06:37

    can the zoom be not only zooming the scroll area but also to zoom the whole html page?

    Reply
    • Author: Seema
    • Posted on: 2011/04/14
    • At: 04:31

    Hi

    I am using the scroll with iui in the div of a infowindow of google map. However, the content of the window shows up as blank. Can you please help?

    var myScroll;
    function loaded() {
    myScroll = new iScroll(‘wrapper’);
    }

    window.addEventListener(‘touchmove’, function(e) { e.preventDefault(); }, false);

    window.addEventListener(‘DOMContentLoaded’, loaded, false);

    function createMarker(point, name, info_url, img) {
    var marker = new google.maps.Marker({ position: point, draggable: false, title: name, icon: img});
    marker.info_window_url = info_url;
    google.maps.event.addListener(marker, ‘click’, function() {
    shared_info_window.close();
    var fetched_content = “new text new text testing testing testing from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlYourContent”;

    shared_info_window.setContent(fetched_content);
    shared_info_window.open(map, marker);
    });

    Reply
    • Author: Seema
    • Posted on: 2011/04/14
    • At: 04:41

    The content is tagged within a div like below and not as mentioned in the above comment

    var fetched_content = “new text new text testing testing testing from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlsome display text here from the urlYourContent”;

    Reply
    • Author: Seema
    • Posted on: 2011/04/14
    • At: 04:43

    oops… I just realized that my div tags are hidden when posted. Sorry about that

    Reply
    • Author: Robert
    • Posted on: 2011/04/14
    • At: 16:21

    Hi there,

    I am having a problem with that wonderful piece of work of yours.

    Scrolling is perfect, but when I touch a link (touchmove) it immediately opens the link even if I keep touching and want to scroll the div.
    What am I doing wrong?
    Thanks for your help.

    Reply
    • Author: weigruf
    • Posted on: 2011/04/14
    • At: 22:12

    Thanks for iScroll! It’s really amazing :)

    Can I ask if it’s possible to have a position: fixed column in the left of the wrapper so the iScroll doesn’t hide it. I basically want a nav-menu on the left of the wrapper and I want it static.

    Thanks in advance.

    Reply
      • Author: weigruf
      • Posted on: 2011/04/14
      • At: 23:26

      Nevermind, I sorted it out. Keep up the good work Matteo!

      Reply
    • Author: bullet2D
    • Posted on: 2011/04/15
    • At: 02:10

    Great work! Thanks.The iScroll works great on Chrome/Safari/iOS/iPad, but not on Firefox. The horizontal scrollbar is stuck and not-functional at all. Is there a way to make it work, or at least a way to show the default scrollbar when on firefox? Thanks.

    Reply
    • Author: dondo
    • Posted on: 2011/04/15
    • At: 07:29

    amazing scroll !.
    question. is dropdown/select list not working ?

    Reply
    • Author: Alex
    • Posted on: 2011/04/15
    • At: 17:43

    Figures. The one thing I need working to use this is the form fields. And that is completely broken…ugh

    Is there a timeframe on 4.1 so I know whether or not I should abandon this for my project?

    Reply
    • Author: anomymous
    • Posted on: 2011/04/16
    • At: 12:07

    I need to implement a page to include a iframe inside it, I tried but doesnt seem to scroll the whole iframe content

    Reply
    • Author: Jordi
    • Posted on: 2011/04/19
    • At: 17:43

    Using iscroll for a while now, but the fatal form elements bug is killing me and my app. Sorry, but this is just taking to long, I’m redesigning my app with another framework.

    Reply
    • Author: Ham
    • Posted on: 2011/04/20
    • At: 13:32

    It just works great!! I spent a lot of time to solve the scrolling problems in iPhone/iPad, until I found this!

    Your script does make all iOS WebApp developers’ life easier!

    Really nice job and hope you keep this on!
    Thanks so much!

    Reply
    • Author: henk
    • Posted on: 2011/04/21
    • At: 17:16

    hi, I am developing a web up for iphone using UIWebView.

    one of my div element is wrapped around with two scroller objects. during the touch event to execute for example a javascript it respondes two times. but on desktop ti works fine. I how I disable a touch event from one of the iScroll objects?

    Reply
    • Author: jitendra
    • Posted on: 2011/04/21
    • At: 17:32

    Please see this issue

    element not working in iphone with iscroll 4 lite

    https://groups.google.com/forum/#!topic/iscroll/heG_MDGWHoY

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>