From 2b7eec4a16fc377c047d3c9e4d86a59f23b7c491 Mon Sep 17 00:00:00 2001 From: Adrian Date: Tue, 31 Jan 2012 21:42:19 +0000 Subject: [PATCH] #2167 Implementing auto-scroll to top of collapsible sections on expand. Adds an event listener to enable auto scroll to the top of a collapsible section when it is expanded. Credit is due to @ricksuggs for the implementation of the scroll code. --- js/jquery.mobile.collapsible.js | 27 ++++- .../functional/collapsiblesetautoscroll.html | 111 ++++++++++++++++++ 2 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 tests/functional/collapsiblesetautoscroll.html diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index b1227c3cee1..273397b83f0 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -63,7 +63,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { }) .add( ".ui-btn-inner" ) .addClass( "ui-corner-top ui-corner-bottom" ); - + //events collapsible .bind( "expand collapse", function( event ) { @@ -93,10 +93,35 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .toggleClass( "ui-corner-bottom", isCollapse ); collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse ); } + collapsibleContent.trigger( "updatelayout" ); } }) .trigger( o.collapsed ? "collapse" : "expand" ); + + var lastExpanded; + // auto scroll to top of expanded section + collapsible.bind( "expand", function() { + var $expandable = $(this); + // wait until the lastExpanded has been collapsed, check each 200ms + var intervalId = setInterval(function() { + if (lastExpanded && lastExpanded.has( ".ui-collapsible-heading-collapsed" )) { + var expandableTop = $expandable.offset().top, + $window = $(window), + targetPos = expandableTop - $window.scrollTop() + $expandable.height(); + // a) if collapsable does not fit within displayable area or + // b) if the window scrolled below the top of the collapsable section + if (targetPos > $window.height() || expandableTop < $window.scrollTop()) { + $.mobile.silentScroll(expandableTop); + } + // once last section collapsed and processed clear check interval + clearInterval(intervalId); + lastExpanded = $expandable; + } else { + lastExpanded = $expandable; + } + }, 200); + }); collapsibleHeading .bind( "click", function( event ) { diff --git a/tests/functional/collapsiblesetautoscroll.html b/tests/functional/collapsiblesetautoscroll.html new file mode 100644 index 00000000000..329b7911f8d --- /dev/null +++ b/tests/functional/collapsiblesetautoscroll.html @@ -0,0 +1,111 @@ + + + + + + jQuery Mobile: Auto Scroll Accordion Sections + + + + + + + + + +
+
+

Auto-scroll section

+
+ +
+

Sections in this page, when expanded, should auto scroll to the top of the section

+ +
+ +
+

Section 1

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+
+ +
+

Section 2

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+
+ +
+

Section 3

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+

This is a lot of content to ensure the section is large enough to demonstrate the functionality of autoscrolling in sections.

+
+
+
+
+ +