IPAD, gallery and text controls

[leopardus2]

Just trying my galleries on an IPAD 1 (updated to latest software).

http://www.collezionistidiflipper.it/pz/webmaster

The gallery opens, and I can see all pics of each gallery by tapping the image (I have linked the image click to hs.next())
and also the captions are there.

But there are no text controls or page dimming.

On Snow Leopard Safari, everything is fine.

Any clue?

Thanks
Rick

[RoadRash]

Hi Rick,

The CSS used for the dimmed background does not work as expected in Safari on iPad/iPhone due to the nature of the browser’s viewport.
Your dimmed background is present (at least I can see it on my iPhone – see screenshot below) and the same goes for the text controls, but they’re misplaced.
You can include the mobile.js file for better user experience on the iPad/iPhone. See this live demo: http://highslide.com/studies/mobile.htm (link to the mobile.js in the demo page)

2011-05-30_2246.png (464.11 KiB) Viewed 2458 times

[leopardus2]

Thanks for your help.

It is not clear to me whether I have to always include mobile.js or rather put it under a conditional "if"
that only triggers when a mobile device is detected...

Thanks again
Rick

[RoadRash]

You need to always include it. The mobile.js already contains an if statement.

Code: Select all

if (/(Android|BlackBerry|iPhone|iPod|Palm|Symbian)/.test(navigator.userAgent)) {...}

Test this demo page in a regular browser and on iPad/iPhone to see how it works: http://highslide.com/studies/mobile.htm

[leopardus2]

I have included the mobile.js file (I copied it from your example page) but on my iphone things are
worse than before.... see screenshot.

Could it be that I have to put the mobile.js also after the hs.config.js?

Rick

[leopardus2]

Tried that myself, nothing changes... any clue?

Thanks,
Rick

[RoadRash]

I think I finally figured out what happened: you probably opened mobile.js in the browser and copied the content. The ‹ and › which makes the mobile prev and next buttons became ‹ and ›. This wouldn’t have happened if you had downloaded the file instead. I now have replaced the ‹ and › with HTML entities. You need to download/copy the content again to correct the strange characters.

[leopardus2]

I think I finally figured out what happened: you probably opened mobile.js in the browser and copied the content. The ‹ and › which makes the mobile prev and next buttons became ‹ and ›. This wouldn’t have happened if you had downloaded the file instead. I now have replaced the ‹ and › with HTML entities. You need to download/copy the content again to correct the strange characters.

D'oh! You are correct, I did not find the mobile.js in the package or for download somewhere, you should really include it in the distribution.
Let me correct and test it again.

Thanks!
Rick

[EarlyOut]

...you should really include it in the distribution.

Probably not a good idea, since it's really just a beta.

[leopardus2]

I think I finally figured out what happened: you probably opened mobile.js in the browser and copied the content. The ‹ and › which makes the mobile prev and next buttons became ‹ and ›. This wouldn’t have happened if you had downloaded the file instead. I now have replaced the ‹ and › with HTML entities. You need to download/copy the content again to correct the strange characters.

Still does not work. Now controls show correctly but both the controls and the dimming is out of the current viewport, much
like in your screenshot above...

Rick

[leopardus2]

I think I finally figured out what happened: you probably opened mobile.js in the browser and copied the content. The ‹ and › which makes the mobile prev and next buttons became ‹ and ›. This wouldn’t have happened if you had downloaded the file instead. I now have replaced the ‹ and › with HTML entities. You need to download/copy the content again to correct the strange characters.

Still does not work. Now controls show correctly but both the controls and the dimming is out of the current viewport, much
like in your screenshot above...

Rick

I have verified that the dimmed area and the controls are always shown at the top of the page instead at current viewport position....

[RoadRash]

This is how I see your images on my iPhone 4 now:

2011-06-01_0026.png (349.85 KiB) Viewed 2379 times

The conrols is correctly placed middle left and middle right in an overlay on top of the image, meaning the position and look of the regular browsers controls is overridden for mobile devices.
I think the dimming is worse in your page than in the sample page because your page don’t have a doctype declaration.

[leopardus2]

This is how I see your images on my iPhone 4 now:

2011-06-01_0026.png

The conrols is correctly placed middle left and middle right in an overlay on top of the image, meaning the position and look of the regular browsers controls is overridden for mobile devices.
I think the dimming is worse in your page than in the sample page because your page don’t have a doctype declaration.

That's funny. Tried on the Iphone (3GS) and works like you have told, no dimming but embedded controls that are actually usable.
On the IPAD 1, I don't see that kind of embedded controls. I still see the same controls I have in my "standard" page.

I will try and put the DOCTYPE like I did for IE7+ to see if that changes anything....

[leopardus2]

This is how I see your images on my iPhone 4 now:

2011-06-01_0026.png

The conrols is correctly placed middle left and middle right in an overlay on top of the image, meaning the position and look of the regular browsers controls is overridden for mobile devices.
I think the dimming is worse in your page than in the sample page because your page don’t have a doctype declaration.

Tried with the DOCTYPE and nothing changed on my Iphone 3GS.
Controls are OK but dimming occurs at top of page and not at current viewport.

http://www.collezionistidiflipper.it/pz/webmaster

Any clues?

Thanks

Rick

[RoadRash]

I can see the same as you on my iPhone 4: the dimmed background is placed top left.
I actually can’t tell you why this happens – we need to study this closer. I suspect it might have something to do with the 1:1 render of the page set in this part of the mobile.js:

Code: Select all

      // Add a meta tag to have the iPhone render the page 1:1
      hs.createElement('meta', {
         name: 'viewport',
         content: 'width=device-width; initial-scale=1.0; maximum-scale=1.0;'

Maybe you should turn off the dimming for mobile devices. Add this to mobile.js right after the hs.allowHeightReduction line:

Code: Select all

hs.dimmingOpacity = 0;