Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2982 from agcolom/patch-20

Browse source 
Update docs/toolbars/bars-fixed.html
This commit is contained in:
Todd Parker 2011-11-08 13:09:17 -08:00
commit 209757da3f
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/toolbars/bars-fixed.html
View file

@ -40,16 +40,16 @@
<h2>Updating toolbar positioning</h2>
<p>If the height of the page changes, either through dynamic injection of markup, or by widgets that hide or collapse content, it can throw off the dynamic positioning of the toolbars. To manually tell the toolbars to re-position themselves then fade in, use <code>$.mobile.fixedToolbars.show();</code>. To have them appear immediately without the fade, use <code>$.mobile.fixedToolbars.show(true);</code>.</p>
<p>There is also a <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
<p>There is also an <code>updatelayout</code> event that can be used to trigger the toolbars to re-position. Developers who are building dynamic applications that inject content into the current page can also manually trigger this <code><a href="../api/events.html">updatelayout</a></code> event to ensure components on the page update in response to the new content that was just added. This event is used internally in the collapsible and listview filter plugins and is powerful because it's not toolbar-specific -- any widget can be built to listen for the <code>updatelayout</code> event to update the widget in response.</p>
<h2>Known limitations</h2>
<p>jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the position:fixed CSS property. Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page. We have optimized this as much as we possibly can, but there are going to be situations where fixed toolbars won't work perfectly due to browser limitations so this si important to note when considering whether to use this feature.</p>
<p>jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the <code>position:fixed</code> CSS property. Although our fixed toolbar feature works fairly well, there are a number of technical limitations that can cause the toolbars to appear to scroll with the page. Most of these rendering issues are due to the fact many mobile platforms (iOS, Android, etc.) essentially take a static screenshot of the page and display this image during scrolling instead of the actual rendered HTML. This improves scrolling performance, but when scrolling happens quickly, the toolbars will be "burned" into the page screenshot before our script can hide them so they appear to scroll with the page. We have optimized this as much as we possibly can, but there are going to be situations where fixed toolbars won't work perfectly due to browser limitations, so this is important to note when considering whether to use this feature.</p>
<h2>True fixed toolbars: touchOverflowEnabled</h2>
<p>In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve, this with web standards. In jQuery Mobile, we have added a global feature called <code>touchOverflowEnabled</code> that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows up to position the toolbars outside the scrolling body so they truly stay fixed in place at all times. Learn more about this feature on the <a href="../api/globalconfig.html">global options</a> page or <a href="../config/touchOverflow.html">demo</a> this feature (currently iOS5 only, other browsers will fall back to dynamically re-positioned fixed toolbars).</p>
<p>In order to achieve true fixed toolbars, a browser needs to either support <code>position:fixed</code> or <code>overflow:auto</code>. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called <code>touchOverflowEnabled</code> that leverages the <code>overflow:auto</code> CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows us to position the toolbars outside the scrolling body so they truly stay fixed in place at all times. Learn more about this feature on the <a href="../api/globalconfig.html">global options</a> page or <a href="../config/touchOverflow.html">demo</a> this feature (currently iOS5 only, other browsers will fall back to dynamically re-positioned fixed toolbars).</p>
<hr>
@ -148,7 +148,7 @@
<li><a href="docs-navbar.html">Navbars</a></li>
<li data-theme="a"><a href="bars-fixed.html">Fixed positioning</a></li>
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
<li><a href="footer-persist-a.html">Persistent footer navbar</a></li>
<li><a href="bars-themes.html">Theming toolbars</a></li>
</ul>