From c127181615a76555122a799a2a3e969940fe1dba Mon Sep 17 00:00:00 2001 From: Spencer Oberstadt Date: Tue, 11 Feb 2014 17:31:36 -0500 Subject: [PATCH 1/2] Demos: fix style on listview-linkbar demo --- demos/listview-autodividers-linkbar/autodividers-linkbar.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/listview-autodividers-linkbar/autodividers-linkbar.css b/demos/listview-autodividers-linkbar/autodividers-linkbar.css index 1bebfe325c6..bd623005ea7 100644 --- a/demos/listview-autodividers-linkbar/autodividers-linkbar.css +++ b/demos/listview-autodividers-linkbar/autodividers-linkbar.css @@ -1,7 +1,7 @@ -#sorter .ui-li.ui-li-static.ui-btn-up-c { +#sorter li { height: 3.8%; padding: 0; - font-size: 8px; + font-size: 14px; padding-left: 5px; line-height: 1.8em; } From 47562da4bc7d4f6bc4bb7ac97856f5330aae17ac Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Tue, 18 Feb 2014 11:17:51 -0500 Subject: [PATCH 2/2] Listview: linkbar demo scroll handler not working and updating to 1.4 Fixes gh-7129 Closes gh-7131 --- .../autodividers-linkbar.css | 7 +- .../autodividers-linkbar.js | 80 +++++++++++-------- 2 files changed, 51 insertions(+), 36 deletions(-) diff --git a/demos/listview-autodividers-linkbar/autodividers-linkbar.css b/demos/listview-autodividers-linkbar/autodividers-linkbar.css index bd623005ea7..ab151617bcf 100644 --- a/demos/listview-autodividers-linkbar/autodividers-linkbar.css +++ b/demos/listview-autodividers-linkbar/autodividers-linkbar.css @@ -1,9 +1,14 @@ #sorter li { height: 3.8%; padding: 0; - font-size: 14px; + 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 ); });