jQuery Forum

Your example doesn't initialize the scroller at all for me, at least on Firefox. I just get a regular scrollable page.

Use my plugin instead of the old yappo plugin. That is very minimal and hasn't been maintained.

https://github.com/watusi/jquery-mobile-iscrollview

I tried using iScrollView but I must be doing something wrong. Page validates but the header and footer are completely in the wrong place. Code looks OK and I checked Firebug and there were no errors in the console. So I'm stumped. Can you look at this page and tell me where I might have gone wrong?

Take these out. That is, take out the data-iscroll="enable".  These are not used with my plugin. It will confuse the plugin. This is for the Yappo plugin:

<div data-role="page" data-iscroll="enable" id="home">

The page setup is a bit different. You only need to have the data-iscroll or data-iscroll="true" in the wrapper(s) for the scroller(s).

As well, it wasn't designed to work with a multi-page document. It might work or might not work. Report back your findings. ;)

I don't recommend multi-page documents in any case. They are just trouble. Your site is eventually going to outgrow a multi-page document, and JQM does not support linking between different multi-pages documents or between single and multi-page with transitions. You would have to use rel="external", and that means JQM is reloaded every time you cross the boundary between single-page and multi-page.

OK, I'll try that later. However, I'm a bit curious as to your suggestions regarding the usage of one big HTML file vs. a variety of HTML files. Wouldn't the ability to slide from page to page disappear if you went the multi-page approach vs. the one page, where I know you can do that? Also, this is going to be an app, so would multi-page be OK for that situation. Finally, I also want it where in the navbar on the footer, you've got the icon highlighted for the page you're on. Would that be affected by going multi?

I'm still a bit of a NooB to all this having designed websites for many, many years. So I'm just trying to learn the best approach possible for what I need to do. Thank you for getting back to my query so quickly. Very unexpected.

Wouldn't the ability to slide from page to page disappear if you went the multi-page approach vs. the one page,

No.

JQM loads the page into the document and then does the transition. It removes pages from the DOM when they are no longer needed.

Multi-page documents are meant for very small sites of only a handful of pages. It would be better if they had not have included this "feature", because it imposes severe limitations as I outlined above.

For an app, it is especially not OK to use the single-page approach. You risk exceeding mobile browser limitations on document size.

See the JQM demo, which is multi-file. See any JQM site of any size above trivial.

Finally, I also want it where in the navbar on the footer, you've got the icon highlighted for the page you're on. Would that be affected by going multi?

No.

Well, that's certainly good to know although I've heard varying issues on the single vs. multi approach. But that's a whole different thread. I just want to concentrate on making this work.

Which, unfortunately, it still isn't. I just deleted all the references you suggested and also decided to try the single page approach. Unfortunately, that didn't work any better. Exact same issue occurred as before. Here's a new example that shows the issue. Again, single page layout.

You're using jQuery Mobile 1.1.1 with jQuery Mobile 1.0 CSS.

That's not gonna work.

Also, you didn't load jquery.mobile.iscrollview.css. It's required. (Actually, your server is returning a 404 error - Not Found.)

Yea, that was my bad. Simple mistake on my end. I just updated that page and it's a lot better. Only issue now is the content div is extending outside of what should be it's area on the page. In other words, the top part of the content is on top of the header and that shouldn't be the case.

Beyond some CSS styling, pretty much there. So thanks for the help. Haven't tried this in multipage yet, but I will down the road whether I use it or not. I am curious.

You need to set an explicit height on images inside of the scroller. (Or, at least those that affect the height of the content.) That's something I need to add to the documentation.

The problem is, the <img>tags with no dimensions supplied have a height of 0 until they are actually loaded, so iScroll has no way of knowing the true height of the content at the time that the iscrollview is constructed.

You can either use the HTML height attribute or use a CSS height attribute.

Otherwise, you could refresh the iscrollview on some time delay, to insure that it knows when the images have been loaded. There is also an iScroll option that will periodically check for height changes. (I don't really recommend that, though.)

You will have a better user experience, of course, in any case, if you set the dimensions. Jumpy page loading is unpleasant. (I'm talking to you, Yahoo...)

This is another good reason for using a static site generator if you are creating a static site. Most have an option or plugin to add width/height attributes to <img> tags. This is typically available in most CMSs and server frameworks as well.

Edit: I see you are letting the images scale according to the page size. That presents an interesting problem. ;)

Right, I'm using CSS to place 100% height and width like this:

1. img.moneyshot { float: left; width: 100%; height: 100%; }

So the design can be responsive and the images fit either the entire width of the screen or half of it on that page depending on my CSS declaration. That was always the plan so that they fit no matter what screen the user is on. Whole idea is this is supposed to be an app, not a site. But for testing purposes, it's a site for now.

The site is not meant to be static. It does connect to a CMS via a JSON connection provided by the client. On most pages, the image is fixed but on some like the homepage, we need responsive design to make it work. I suppose I could just hardcode the width="100%" in my img src, but this is unexpected. Definitely needs to be documented, no doubt.

If you want to scale images to the window, your best bet is to use some Javascript, and not rely on CSS.

That way, you can calculate the sizes at pageinit or pagebeforeshow, and give the browser concrete sizes to work with. It's practical for a home page, or any page that has a "tile"-like image layout.

BTW, I do see that Yahoo finally started providing sizes for their images. Finally! What an annoyance!

As an app, you still need to deal with flexible layout, especially for Android. For iOS, if you are willing to put forth the effort, of course, you can create an optimized layout and images for every device. For Android, that is impractical.

Well, being more of an HTML/CSS guy than a JS guy, how would you use JS to scale images? Do you happen to have a link to a site that explains that with examples? I have books on Mobile Development but they don't talk about that.