jQuery Accordion - will it scroll to the top of the open item?

jQuery Accordion - will it scroll to the top of the open item?

With the jQuery accordion control, how can I have it scroll to an item I've selected when it is off the screen?

When:

• I have an accordion item with contents larger than the viewable window
• I scroll down to the second accordion item
• I click the second accordion item to display it
• The first accordion option collapses, and the second opens, but slides off screen.

Is there an option for the accordion to scroll to the second item?

Answer by Ken Redler for jQuery Accordion - will it scroll to the top of the open item?

You can try using the scrollTo jQuery plugin. It lets you do things like this:

$.scrollTo('div#foo'); // scroll the browser window so div#foo is in view  $('div#foo').('#bar'); // scroll within div#foo so #bar is in view  

Bind ScrollTo() to the accordionactivate event, like this:

$('#youraccordion').bind('accordionactivate', function(event, ui) {    /* In here, ui.newHeader = the newly active header as a jQ object                ui.newContent = the newly active content area */    $( ui.newHeader ).ScrollTo(); // or ui.newContent, if you prefer  });  

When is the accordionactivate event triggered?

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.

References: jQuery UI Accordion

Answer by cris for jQuery Accordion - will it scroll to the top of the open item?

Hey did have the same issue. Here is what worked for me at least what seems the easiest way. Using the scrollTo plugin.

Hope it might be of use for someone.

Answer by chas688 for jQuery Accordion - will it scroll to the top of the open item?

I implemented the first answer and liked this option best because it is one function for all accordion panels. But, I noticed that I kept getting an error when trying to (re)close the same accordion panel - it would halt the script at this line in the ScrollTo plugin:

attr[key] = val.slice && val.slice(-1) == '%' ?   

The val was returning empty, so I found another answer here that said to check for it empty and added / replaced this function - so it works now.

else{  var val = targ[pos];  // Handle percentage values  if(val) {      attr[key] = val.slice && val.slice(-1) == '%' ?      parseFloat(val) / 100 * max      : val;      }  }  

Answer by carcus88 for jQuery Accordion - will it scroll to the top of the open item?

I had problems with binding the event when you used the accordion click to close function. Adding just a single if statement fixed it thought.

$('#accordion').bind('accordionchange', function(event, ui) {      if(!ui.newHeader.length) { return; }    /* In here, ui.newHeader = the newly active header as a jQ object                ui.newContent = the newly active content area */    $.scrollTo( ui.newHeader ); // or ui.newContent, if you prefer  });    

Answer by nobody for jQuery Accordion - will it scroll to the top of the open item?

I know this question is old, but none of the above worked as desired for me. This is how I accomplished it. The -50 was just in case this was going to appear in an iPad or iPhone webapp so that the page didn't scroll the top of the accordion header behind the status bar.

$('#accordion').accordion({    collapsible: true,    autoHeight: false,    animated: false  });  $('.ui-accordion-header').bind('click',function(){      theOffset = $(this).offset();      $(window).scrollTop(theOffset.top - 50);  });  

Answer by Martin for jQuery Accordion - will it scroll to the top of the open item?

As I want collapse to be true I added an if test to cancel out the error of all items being collapsed. I also didn't want the header to be exactly at the top of the page, so I lowered the scrollTop location by 100:

  $(document).ready(function() {      $(".ui-accordion").bind("accordionchange", function(event, ui) {        if ($(ui.newHeader).offset() != null) {          ui.newHeader, // $ object, activated header          $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);        }      });    });  

Answer by user3016319 for jQuery Accordion - will it scroll to the top of the open item?

Simply use this function on window.load

$(function() {      var icons = {      header: "ui-icon-circle-plus",      activeHeader: "ui-icon-circle-minus"      };      $( "#accordion" ).accordion({      icons: icons, autoHeight: false, collapsible: true, active: false,      activate: function(event, ui){          var scrollTop = $(".accordion").scrollTop();          var top = $(ui.newHeader).offset().top;       //do magic to scroll the user to the correct location         //works in IE, firefox chrome and safari          $("html,body").animate({ scrollTop: scrollTop + top -35 }, "fast");         },            });        });  

perfectl wokring

Answer by Stan Kroshchenko for jQuery Accordion - will it scroll to the top of the open item?

Solution from Martin works great. However when you add this code it will scroll to the top always, no matter if your accordion is visible on the page or not.

If you want to scroll to the top only when your accordion content larger than the viewable window, then use next code:

$(document).ready(function() {        function isScrolledIntoView(elem)      {          var docViewTop = $(window).scrollTop();          var docViewBottom = docViewTop + $(window).height();            var elemTop = $(elem).offset().top;          var elemBottom = elemTop + $(elem).height();            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));      }        $(".accordion-inner").bind("accordionchange", function(event, ui) {        if ($(ui.newHeader).offset() != null) {          if (!isScrolledIntoView(ui.newHeader))          {              ui.newHeader, // $ object, activated header              $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)-100}, 500);          }        }      });    });  

Answer by user3378141 for jQuery Accordion - will it scroll to the top of the open item?

It works for me and tested,

$( "#accordion" ).accordion({  heightStyle: "content",  collapsible: true,  active: false,  activate: function( event, ui ) {      if(!$.isEmptyObject(ui.newHeader.offset())) {          $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');      }  }  

});

http://jsfiddle.net/ilyasnone/aqw613em/

Answer by Pranav Labhe for jQuery Accordion - will it scroll to the top of the open item?

Please refer this answer by techfoobar

$(function() {      $("#accordion").accordion({          autoHeight: false,          collapsible: true,          heightStyle: "content",          active: 0,          animate: 300 // collapse will take 300ms      });      $('#accordion h3').bind('click',function(){          var self = this;          setTimeout(function() {              theOffset = $(self).offset();              $('body,html').animate({ scrollTop: theOffset.top - 100 });          }, 310); // ensure the collapse animation is done      });  });  

It is working for me with above modification.

$("#accordion").accordion({                      heightStyle: "content",                      collapsible: true,                      activate: function (event, ui) {                            try                          {                              var self = this;                              theOffset = $(self).offset();                              $('body,html').animate({ scrollTop: theOffset.top - 100 });                          } catch (e) {                              alert(e);                          }                      }                  });   

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71