7 Replies - 600 Views - Last Post: 03 May 2017 - 05:31 PM

#1 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Scroll window to active accordion item

Posted 15 April 2017 - 12:00 PM

When my accordion is accessed from a link on another page,
the tab opens to display its contents as required. However
if the tab is near the bottom of the accordion the user has
to scroll down to view it, or worse may not know it has opened at all.
Can my accordion be adapted to open the tab, then scroll that
part of the page to the top of the window, similar to when you
access an anchor from another page.

This is my accordion code -


$(document).ready(function() {	
	
    $("#accordion").accordion({
		 active: false,
         collapsible: true,
         autoHeight: false,
         navigation: true,
		 heightStyle: "content",
         header: 'a.menuitem',		
    }); 	

    $(".menuitem").click(function(event){
        window.location.hash=this.hash;
    });

    //get the hash value
    var locationHash = window.location.hash;

    //split the value
    var hashSplit = locationHash.split('#');

    //get the tab number
    var currentTab = hashSplit[1];

    window.setTimeout(function(){
        //open the tab for the current hash
        $("#accordion").accordion({ active: parseInt(currentTab)-1 });
		
		
		}, 0);
		
});



Is This A Good Question/Topic? 0
  • +

Replies To: Scroll window to active accordion item

#2 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Re: Scroll window to active accordion item

Posted 02 May 2017 - 08:17 AM

Currently I can make a single accordion tab scroll into position if I hard code the id="scrollers"
into the scrollTop function

I need to somehow get the currentTab number into scrollTop

scrollTop:$("#scrollers").offset().top -60


var currentTab = hashSplit[1]; #1 #2 #3 ETC 


This is the jquery and jqueryui libraries code -

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


This is the menu that accesses the accordion from all around the site.

<nav id="nav" class="nav">
    <ul>
 
<li><a href="services.html">Services</a>

 <ul>   <li> <a href="services.html#1">Engine Servicing</a></li>
        <li> <a href="services.html#2">Brakes</a></li>
        <li><a href="services.html#3"> Digital Wheel Alignment</a></li>
        <li> <a href="services.html#4">Diagnostics</a></li>
        <li> <a href="services.html#5">MOT'S</a></li>
        <li> <a href="services.html#6"> Tyre's</a></li>
        <li> <a href="services.html#7">Breakdown Recovery</a></li>
      </ul>
</li>
 </ul>       
  </nav>


This is the HTML that makes the accordion on the services.html page.
To keep the code as brief as possible I have only included two of the accordion tabs.

<div id="accordion">

  <a class="menuitem" href="#1"><i class="fa fa-cog accord"></i>ENGINE SERVICING</a>
  <!-- accordion panel -->
  <div class="bg">
  <p>some text</p>
  </div>
<div class="foott"><i>For further information</i> <i>please call: 12345678</i></div>
  </div>

  <a class="menuitem" href="#2"><i class="fa fa-cog accord"></i>BRAKES</a>
  <div class="bg">   
 <p>some text</p>
</div>

  </div><!-- end bg -->
</div><!-- end accordion -->


This is the jquery for the actual accordion -

$(document).ready(function() {    
    
    $("#accordion").accordion({
         active: false,
         collapsible: true,
         autoHeight: false,
         navigation: true,
         heightStyle: "content",
         header: 'a.menuitem',
         animate: true                 
    });     

    $(".menuitem").click(function(event){
        window.location.hash=this.hash;
    });

    //get the hash value
    var locationHash = window.location.hash;

    //split the value
    var hashSplit = locationHash.split('#');


    //get the tab number
    var currentTab = hashSplit[1];

    window.setTimeout(function(){
        //open the tab for the current hash
        $("#accordion").accordion({ active: parseInt(currentTab)-1 });
        
    $('html, body').animate({
        
          scrollTop:$("#scrollers").offset().top -60
          
          }, 1000, 'easeOutQuart' );
          
          return false;
        
        }, 0);        

});

Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1841
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Scroll window to active accordion item

Posted 02 May 2017 - 12:30 PM

That variable is out of scope because you're using setTimeout, but why are you using setTimeout with a timeout of 0? What's the purpose?
Was This Post Helpful? 0
  • +
  • -

#4 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Re: Scroll window to active accordion item

Posted 02 May 2017 - 04:19 PM

Hi, Thanks for helping with this.

Sorry I forgot to include the id="scrollers" in the accordion when I posted the code
this is how the accordion should look -


<div id="accordion">

  <a class="menuitem" href="#1"><i class="fa fa-cog accord"></i>ENGINE SERVICING</a>
  <!-- accordion panel -->
  <div class="bg">
  <p>some text</p>
  </div>
<div class="foott"><i>For further information</i> <i>please call: 12345678</i></div>
  </div>

  <a class="menuitem" href="#2"><i class="fa fa-cog accord"></i>BRAKES</a>
  <div class="bg" id="scrollers">   
 <p>some text</p>
</div>

  </div><!-- end bg -->
</div><!-- end accordion -->



I have no issue with setTimeout, the code works on one accordion tab
if I pass the specific id scrollers contained within that tab to scrollTop

scrollTop:$("#scrollers").offset().top -60

I need to somehow replace #scrollers with


var currentTab = hashSplit[1]; #1 #2 #3 ETC


Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: Scroll window to active accordion item

Posted 02 May 2017 - 05:21 PM

jQuery Accordion sets it's own class attribute ui-state-active on the active accordion element header, so you can leverage that:
$('html, body').animate({
    scrollTop: $('#accordion').find('.ui-state-active').offset().top
});


Was This Post Helpful? 0
  • +
  • -

#6 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Re: Scroll window to active accordion item

Posted 03 May 2017 - 01:51 AM

Hi e_i_pi

Fantastic, many thanks for helping with this.
My accordion is now working as required.

Best regards Maxwell

Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1841
  • View blog
  • Posts: 5,793
  • Joined: 15-January 14

Re: Scroll window to active accordion item

Posted 03 May 2017 - 12:28 PM

Just to be clear, the issue with using setTimeout like that is that it will run the function that you passed to setTimeout in the global scope, and your currentTab variable was not defined in the global scope. That's the problem with using setTimeout like that, especially when there's not an actual timeout and you have it run after 0 ms. You should get rid of setTimeout and just run that code normally.
Was This Post Helpful? 1
  • +
  • -

#8 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Re: Scroll window to active accordion item

Posted 03 May 2017 - 05:31 PM

Hi,

Many thanks for pointing that out, I have adjusted the code accordingly
and nothing has changed, other than things being more efficient.

$(document).ready(function() {	
	
    $("#accordion").accordion({
		 active: false,
         collapsible: true,
         autoHeight: false,
         navigation: true,
		 heightStyle: "content",
         header: 'a.menuitem',
		 animate: true		 		
    }); 	

    $(".menuitem").click(function(event){
        window.location.hash=this.hash;
    });

    //get the hash value
    var locationHash = window.location.hash;

    //split the value
    var hashSplit = locationHash.split('#');

    //get the tab number
    var currentTab = hashSplit[1];

   
        //open the tab for the current hash
        $("#accordion").accordion({ active: parseInt(currentTab)-1 });
		
	$('html, body').animate({
		
		scrollTop: $('#accordion').find('.ui-state-active').offset().top -45
		  
		  }, 1000, 'easeOutQuart' );
		  
		  return false;			

});


Thanks again!

Maxwell
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1