VGMaps

Main Boards => VGMaps Social Board => Topic started by: JonLeung on March 20, 2011, 04:29:47 pm

Title: Stupid HTML question...
Post by: JonLeung on March 20, 2011, 04:29:47 pm
Silly of me to ask, but a while ago, I'm sure the web site looked fine on an iPhone and iPad.  Now, I don't have any Apple products so it's not so easy for me to regularly check, but I think on the front page, the frame that shows the "Current News" isn't a scrollable area, and is instead shown in its entirety on the iPhone/iPad.  This seriously messes up the intended the page layout.  I think when this started happening I remember scratching my head and wondering what I did to cause it, because I don't remember making any dramatic changes, and I can't seem to see how to undo whatever I did.

Since just about everyone in the world is better than me at HTML coding, can anyone point out to me what the issue is?

Thanks!
Title: Re: Stupid HTML question...
Post by: Revned on March 20, 2011, 05:05:00 pm
I don't know the details, but I'd guess it's a problem with iframes. I see the same issue with the Android browser. If you think about it, how would you expect nested scrollbars to behave on touch-based devices? how would the browser know which section to scroll when you drag your finger? There isn't the same concept of focus as on a traditional browser.
Title: Re: Stupid HTML question...
Post by: Peardian on March 21, 2011, 07:00:40 am
It might be more of a change in mobile browsers than a change on our end. You'll have to put extra consideration into the mobile CSS if you want the page to be usable, but it will be hard without a mobile device. I don't have one either, or I'd volunteer to help.
Title: Re: Stupid HTML question...
Post by: DarkWolf on March 21, 2011, 08:56:33 am
With the iPad using a single finger, and multiple fingers has different actions for scrolling.  I can't remember, which is which, but there is a method to nested scrolling.

You might try getting away from frames.  You can use a sized div with the CSS property overflow:auto.  The user agent should add a scroll bar if the content overflows the size of the parent div.  The only thing that would break are the archive links at the bottom of the news section.  But that could be fixed easily with jquery.