1 function ResizePageContentHeight(page) {
3 $content = $page.children( ".ui-content" ),
4 hh = $page.children( ".ui-header" ).outerHeight() || 0,
5 fh = $page.children( ".ui-footer" ).outerHeight() || 0,
6 pt = parseFloat($content.css( "padding-top" )),
7 pb = parseFloat($content.css( "padding-bottom" )),
8 wh = window.innerHeight;
10 $content.height(wh - (hh + fh) - (pt + pb));
13 $( ":jqmData(role='page')" ).live( "pageshow", function(event) {
14 var $page = $( this );
16 // For the demos that use this script, we want the content area of each
17 // page to be scrollable in the 'y' direction.
19 $page.find( ".ui-content" ).attr( "data-" + $.mobile.ns + "scroll", "y" );
21 // This code that looks for [data-scroll] will eventually be folded
22 // into the jqm page processing code when scrollview support is "official"
23 // instead of "experimental".
25 $page.find( ":jqmData(scroll):not(.ui-scrollview-clip)" ).each(function () {
26 var $this = $( this );
27 // XXX: Remove this check for ui-scrolllistview once we've
28 // integrated list divider support into the main scrollview class.
29 if ( $this.hasClass( "ui-scrolllistview" ) ) {
30 $this.scrolllistview();
32 var st = $this.jqmData( "scroll" ) + "",
33 paging = st && st.search(/^[xy]p$/) != -1,
34 dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null,
37 direction: dir || undefined,
38 paging: paging || undefined,
39 scrollMethod: $this.jqmData("scroll-method") || undefined
42 $this.scrollview( opts );
46 // For the demos, we want to make sure the page being shown has a content
47 // area that is sized to fit completely within the viewport. This should
48 // also handle the case where pages are loaded dynamically.
50 ResizePageContentHeight( event.target );
53 $( window ).bind( "orientationchange", function( event ) {
54 ResizePageContentHeight( $( ".ui-page" ) );