diff --git a/demos/listview-autodividers-linkbar/autodividers-linkbar.css b/demos/listview-autodividers-linkbar/autodividers-linkbar.css index 1bebfe325c6..ab151617bcf 100644 --- a/demos/listview-autodividers-linkbar/autodividers-linkbar.css +++ b/demos/listview-autodividers-linkbar/autodividers-linkbar.css @@ -1,9 +1,14 @@ -#sorter .ui-li.ui-li-static.ui-btn-up-c { +#sorter li { height: 3.8%; padding: 0; font-size: 8px; padding-left: 5px; line-height: 1.8em; + text-align: left; +} +#sorter li span { + margin-top: 8%; + display: block; } #sorter{ position: fixed; diff --git a/demos/listview-autodividers-linkbar/autodividers-linkbar.js b/demos/listview-autodividers-linkbar/autodividers-linkbar.js index 1771dfef64d..5765bc68a5a 100644 --- a/demos/listview-autodividers-linkbar/autodividers-linkbar.js +++ b/demos/listview-autodividers-linkbar/autodividers-linkbar.js @@ -1,34 +1,55 @@ -$.mobile.document.on( "pageshow", "#demo-page", function() { - var head = $( ".ui-page-active [data-role='header']" ), - foot = $( ".ui-page-active [data-role='footer']" ), - headerheight = head.outerHeight(); - - $.mobile.window.on( "throttledresize", function() { - $( "#sorter" ).height( $.mobile.window.height() - headerheight - 20 ).css( "top", headerheight + 18 ); - }); +$.mobile.document.on( "pagecreate", "#demo-page", function(){ + var head = $( ".ui-page-active [data-role='header']" ); - $( "#sorter" ).height( $.mobile.window.height() - headerheight - 20 ).css( "top", headerheight + 18 ); + $.mobile.document.on( "click", "#sorter li", function() { + var top, + letter = $( this ).text(), + divider = $( "#sortedList" ).find( "li.ui-li-divider:contains(" + letter + ")" ); - $.mobile.window.scroll( function( e ) { - var headTop = $(window).scrollTop(); + if ( divider.length > 0 ) { + top = divider.offset().top; + $.mobile.silentScroll( top ); + } else { + return false; + } + }); + $( "#sorter li" ).hover(function() { + $( this ).addClass( "ui-btn" ).removeClass( "ui-li-static" ); + }, function() { + $( this ).removeClass( "ui-btn" ).addClass( "ui-li-static" ); + }); +}); +$( function(){ + $.mobile.window.on( "scroll", function( e ) { + var headTop = $(window).scrollTop(), + foot = $( ".ui-page-active [data-role='footer']" ), + head = $( ".ui-page-active [data-role='header']" ), + headerheight = head.outerHeight(); if( headTop < headerheight && headTop > 0 ) { $( "#sorter" ).css({ "top": headerheight + 15 - headTop, - "height": $.mobile.window.height() - headerheight - 20 + "height": window.innerHeight - head[ 0 ].offsetHeight + window.pageYOffset - 10 }); - } else if ( headTop >= headerheight && headTop > 0 && parseInt( headTop + $.mobile.window.height( )) < parseInt( foot.offset().top ) ) { + $("#sorter li").height( "3.7%" ); + } else if ( headTop >= headerheight && headTop > 0 && parseInt( headTop + + $.mobile.window.height( )) < parseInt( foot.offset().top ) ) { + $( "#sorter" ).css({ "top": "15px", - "height": $.mobile.window.height() + "height": window.innerHeight - 8 }); $("#sorter li").height( "3.7%" ); - } else if ( parseInt( headTop + $.mobile.window.height() ) >= parseInt( foot.offset().top ) && parseInt( headTop + $.mobile.window.height() ) <= parseInt( foot.offset().top ) + foot.height() ) { + } else if ( parseInt( headTop + window.innerHeight ) >= parseInt( foot.offset().top ) && + parseInt( headTop + window.innerHeight ) <= parseInt( foot.offset().top ) + + foot.height() ) { + $( "#sorter" ).css({ "top": "15px", - "height": $.mobile.window.height() - ( parseInt( headTop + $.mobile.window.height() ) - parseInt( foot.offset().top ) + 8 ) + "height": window.innerHeight - ( parseInt( headTop + window.innerHeight ) - + parseInt( foot.offset().top ) + 8 ) }); - } else if( parseInt( headTop + $.mobile.window.height() ) >= parseInt( foot.offset().top ) ) { + } else if( parseInt( headTop + window.innerHeight ) >= parseInt( foot.offset().top ) ) { $( "#sorter" ).css({ "top": "15px" }); @@ -36,23 +57,12 @@ $.mobile.document.on( "pageshow", "#demo-page", function() { $( "#sorter" ).css( "top", headerheight + 15 ); } }); +}); +$.mobile.window.on( "throttledresize", function() { + $( "#sorter" ).height( window.innerHeight - headerheight - 20 ).css( "top", headerheight + 18 ); +}); +$.mobile.document.on( "pageshow", "#demo-page", function() { + var headerheight = $( ".ui-page-active [data-role='header']" ).outerHeight(); - $( "#sorter li" ).click( function() { - var top, - letter = $( this ).text(), - divider = $( "#sortedList" ).find( "li.ui-li-divider:contains(" + letter + ")" ); - - if ( divider.length > 0 ) { - top = divider.offset().top; - $.mobile.silentScroll( top ); - } else { - return false; - } - }); - - $( "#sorter li" ).hover(function() { - $( this ).addClass( "ui-btn-up-b" ).removeClass( "ui-btn-up-c" ); - }, function() { - $( this ).removeClass( "ui-btn-up-b" ).addClass( "ui-btn-up-c" ); - }); + $( "#sorter" ).height( window.innerHeight - headerheight - 20 ).css( "top", headerheight + 18 ); });