Comments for Kyle Larson Web Design Articles

Comment on Fixed Elements and Scrolling Divs in iOS 5 by Kyle Larson

Kyle Larson — Wed, 01 Feb 2012 22:28:00 +0000

Hi James,

Sounds like the default behavior of the browser. Typically it’ll bounce once when scrolling, but then like you mentioned it’ll scroll the full page. The fix would be adding one of the options above (Scrollability, iScroll, ScrollFix) and putting it on your scrolling element. It’s a bit tricky to get setup but I think it should work. Also if you scroll on any other elements it’ll still cause the page bounce unless you’ve got locked down with the PreventDefault mentioned above. Hopefully that helps a bit.

Comment on Fixed Elements and Scrolling Divs in iOS 5 by James Toone

James Toone — Wed, 01 Feb 2012 10:29:00 +0000

In my design I have a tab at the bottom of the screen which is using position fixed. When clicked on it opens a ul with the -webkit-overflow-scrolling: touch; property on it. But when I reach the top or bottom of this list the DOM then starts to scroll the page behind. Is there a way to stop this?

Comment on Fixed Elements and Scrolling Divs in iOS 5 by Kyle Larson

Kyle Larson — Mon, 12 Dec 2011 17:36:00 +0000

If you allow the user to zoom, the fixed div will increase along with the rest of the page because zoom increases the size of all content. You could probably have a javascript resize the element after zooming to be a % of the device width, but it would likely zoom first and then resize.

I haven’t tested iScroll too much to comment on it breaking divs or adjusting other elements. I switched solutions when I realized it didn’t work well with form fields.

Also, keep in mind that allowing zoom is helpful in some cases but can quickly cause usability issues with scrolling divs because of having both a scrolling browser window and a scrolling div within it.

Thanks for the reply!

Comment on Fixed Elements and Scrolling Divs in iOS 5 by Vladimir Bozic

Vladimir Bozic — Fri, 09 Dec 2011 17:23:00 +0000

Hi, great article. I have one question what happens when fixed div is less then 100% in width. When you use zoom, fixed div stay the same width. Also when you have custom scrollable divs like news sliders, IScroll brokes them.

Comment on How to Create Pie Charts with CSS3 by Kyle J Larson

Kyle J Larson — Mon, 20 Jun 2011 16:18:44 +0000

Thanks Allison, I’m glad it was helpful. I think it’s going over the top of your fixed element because of absolute positioning on the pie chart and it coming later in the code than your fixed header. If you assign a z-index with CSS on the header image you should be able to fix it. Like so – #yourHeaderImageID {z-index: 1000;}

Comment on How to Create Pie Charts with CSS3 by Allison Shapanka

Allison Shapanka — Sat, 18 Jun 2011 20:37:17 +0000

This is great! Thanks so much. One issue I ran into: The project I’m working on is a single page with a scroll to each section, and a fixed header image. I noticed that when the header scrolls over the pie chart, the “slice” glides over the image, rather than stay underneath (like the body of the pie chart). Any idea why this is happening?

Comment on Adding an Icon for iPhone, iPad & Android to Your Website by Tayna Castongvay

Tayna Castongvay — Mon, 18 Apr 2011 18:53:30 +0000

this article really helps to me,thank u

Comment on URL Structure Tips by Kyle J Larson

Kyle J Larson — Thu, 10 Mar 2011 17:40:21 +0000

Good point, I completely agree with you.

Comment on How to Setup Your Site for the iPhone by Justin

Justin — Thu, 10 Mar 2011 16:35:59 +0000

Thanks for the reference! Saved this to my bookmarks.

Comment on URL Structure Tips by Justin

Justin — Thu, 10 Mar 2011 15:55:52 +0000

I would only use sub-domains when there are totally separate things, like Apple’s store. That way your blog (wordpress) isn’t living in the same space as your store. WordPress comes out with a new version every other day and you don’t want to worry about an upgrade breaking your store, or store software breaking your website or blog.