Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

auto repositioning of opened collapsibles #5394 #5396

Closed
wants to merge 13 commits into from

4 participants

@pillex

toddparker asked me to do a pull request.

#5394

it's a first. no idea what i'm doing. so bear with me if it 's looking stupid (eg. don't know where to put the scroll function). tested this locally, seems to work as intended.

after opening a collapsible it's often badly positioned and you start scrolling immediately.

feature request:
when you open a collapsible it should automatically scroll into the best possible position

if it's fully visible: do nothing
if it's partly visible: scroll as little as to make it fully visible
if larger than viewport: scroll to top of screen
could at least be done as an option if is problematic as default.

demo included - see code

@jaspermdegroot
Collaborator

@pillex

Thanks for the PR and really cool that you just give it a try!

Your smart scroll function should go after the meta tags. See for example: https://github.com/jquery/jquery-mobile/blob/master/js/widgets/popup.js

@gseguin
Collaborator

@pillex, It seems like you haven't signed a CLA. Please visit http://contribute.jquery.org/CLA/ and sign it so we can look into your PR.

Thank you.

@arschmitz
Owner

no response to request for CLA and conflicts closing but will be happy to reopen and review once CLA is signed and PR is updated

@arschmitz arschmitz closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 21, 2012
  1. @pillex
  2. @pillex
  3. @pillex
  4. @pillex
  5. @pillex
  6. @pillex
  7. @pillex
  8. @pillex
  9. @pillex
  10. @pillex
Commits on Dec 23, 2012
  1. @pillex

    Update js/widgets/collapsible.js

    pillex authored
    added manual 'offset' and 'air'
  2. @pillex
Commits on Dec 26, 2012
  1. @pillex

    Update js/widgets/collapsible.js

    pillex authored
    changed offset behavior, updated demo
This page is out of date. Refresh to see the latest.
Showing with 70 additions and 0 deletions.
  1. +70 −0 js/widgets/collapsible.js
View
70 js/widgets/collapsible.js
@@ -5,6 +5,73 @@
//>>css.structure: ../css/structure/jquery.mobile.collapsible.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+
+
+//
+// scroll an element fully into view
+//
+// if fully visible: do nothing
+// if partly visible: scroll as little as to make it fully visible
+// if larger than viewport: scroll to top of screen
+//
+// after expanding or loading an element it's often badly positioned and you
+// start scrolling immediately. this scrolls it into the best possible position
+//
+//
+// demo: http://jsbin.com/udahoh/4/
+//
+
+
+function smart_scroll(el, offset)
+{
+
+
+offset = offset || 0; // manual correction, if other elem (eg. a header above) should also be visible
+
+var air = 15; // above+below space so element is not tucked to the screen edge
+
+var el_height = $(el).height()+ 2 * air + offset;
+var el_pos = $(el).offset();
+var el_pos_top = el_pos.top - air - offset;
+
+var vport_height = $(window).height();
+var win_top = $(window).scrollTop();
+
+// alert("el_pos_top:"+el_pos_top+" el_height:"+el_height+"win_top:"+win_top+" vport_height:"+vport_height);
+
+var hidden = (el_pos_top + el_height) - (win_top + vport_height);
+
+if ( hidden > 0 ) // element not fully visible
+ {
+ var scroll;
+
+ if(el_height > vport_height) scroll = el_pos_top; // larger than viewport - scroll to top
+ else scroll = win_top + hidden; // smaller than vieport - scroll minimally but fully into view
+
+
+ $('html, body').animate({ scrollTop: (scroll) }, 200);
+ }
+
+}
+
+
+
+
+// when using "on" 'expand' seems to fire before it's actually expanded.
+// el_height will then be height of closed collaps. won't work.
+
+//$('#boats,#cars').live('expand', function(e){ smart_scroll(e.target); });
+
+//$('#offset').live('expand', function(e){
+// smart_scroll( e.target, $('#header').height() + 20 );
+//});
+
+
+
+
+
+
+
define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -24,6 +91,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
corners: true,
mini: false,
initSelector: ":jqmData(role='collapsible')"
+ autoscroll: true,
},
_create: function() {
@@ -137,6 +205,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
collapsibleContent.trigger( "updatelayout" );
+
+ if(o.autoscroll && !isCollapse) smart_scroll($this);
}
})
.trigger( o.collapsed ? "collapse" : "expand" );
Something went wrong with that request. Please try again.