It is currently Sat Sep 20, 2014 6:00 pm Advanced search

IPAD, gallery and text controls

Technical support, bug reports, feature requests and more.

IPAD, gallery and text controls

Postby leopardus2 » Mon May 30, 2011 7:48 pm

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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Mon May 30, 2011 11:30 pm

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
2011-05-30_2246.png (464.11 KiB) Viewed 3195 times
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8215
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 11:22 am

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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Tue May 31, 2011 11:42 am

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
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8215
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 12:42 pm

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
Attachments
IMG_0685.PNG
IMG_0685.PNG (107.4 KiB) Viewed 3187 times
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 12:56 pm

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

Thanks,
Rick
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Tue May 31, 2011 6:17 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8215
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 8:04 pm

RoadRash wrote: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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby EarlyOut » Tue May 31, 2011 8:09 pm

leopardus2 wrote:...you should really include it in the distribution.


Probably not a good idea, since it's really just a beta.
User avatar
EarlyOut
 
Posts: 1705
Joined: Sun Nov 11, 2007 11:22 pm
Location: Sector R

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 8:10 pm

RoadRash wrote: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
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby leopardus2 » Tue May 31, 2011 8:27 pm

leopardus2 wrote:
RoadRash wrote: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....
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Wed Jun 01, 2011 12:46 am

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

2011-06-01_0026.png
2011-06-01_0026.png (349.85 KiB) Viewed 3116 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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8215
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: IPAD, gallery and text controls

Postby leopardus2 » Wed Jun 01, 2011 8:43 am

RoadRash wrote: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
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby leopardus2 » Wed Jun 01, 2011 10:52 am

RoadRash wrote: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
leopardus2
 
Posts: 25
Joined: Sun May 29, 2011 10:42 pm

Re: IPAD, gallery and text controls

Postby RoadRash » Wed Jun 01, 2011 11:48 am

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;
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8215
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Next

Return to Highslide JS Usage

Who is online

Users browsing this forum: Google [Bot] and 5 guests