jQuery Tip: Scroll to the top of active accordion items whenever a new item is expanded (with the option to account for a fixed header)

Here is a really handy tip on how to add functionality for a user to be scrolled to the top of the currently active accordion item whenever a new accordion item is expanded. The key here, and the one that I have spent more hours than I care to remember trying to figure out, is to calculate in the the height of the already-open-but-now-closing accordion item.

Let’s assume your HTML markup looks something like this:

<div class="accordionWrapper">
<div class="accordionButton" id="id1">Accordion #1 Title</div>
<div class="accordionContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat eleifend ipsum hendrerit mattis. Pellentesque in urna non eros fringilla suscipit et quis velit. Pellentesque pulvinar hendrerit interdum. Morbi scelerisque est rutrum, porttitor odio sed, interdum velit. Sed lobortis, nulla vitae tincidunt varius, diam metus malesuada odio, at commodo nunc sem vitae justo. Sed eu eros a lorem feugiat blandit eu id arcu. Curabitur ultrices massa vitae tempor lacinia. Integer ac ligula elit. Aenean vel porta nisl. Aliquam ac justo erat.
</div>
</div>
<div class="accordionButton" id="id2">Accordion #2 Title</div>
<div class="accordionContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan erat eleifend ipsum hendrerit mattis. Pellentesque in urna non eros fringilla suscipit et quis velit. Pellentesque pulvinar hendrerit interdum. Morbi scelerisque est rutrum, porttitor odio sed, interdum velit. Sed lobortis, nulla vitae tincidunt varius, diam metus malesuada odio, at commodo nunc sem vitae justo. Sed eu eros a lorem feugiat blandit eu id arcu. Curabitur ultrices massa vitae tempor lacinia. Integer ac ligula elit. Aenean vel porta nisl. Aliquam ac justo erat.
</div>
</div>
</div>

Here is the jQuery you can take and recycle as you see fit:

$(document).ready(function() {
$('.accordionButton').click(function() {
  	var thisParent = $(this).parent();
  	var trigger = $(this);  
  	var openAccordionHeight = $(thisParent).prevAll('.active').children().eq(1).outerHeight();
       if ($(thisParent).hasClass('active')) {
	        $(this).next().slideUp('normal');
	        $(thisParent).removeClass('active');
	        return;
       } 
       $('.accordionContent').slideUp('slow');
       $('.active').removeClass('active');
       $(thisParent).addClass('active');
       $('html,body').animate({scrollTop: $(trigger).offset().top-openAccordionHeight}, 500);
       $(trigger).next().slideDown(500);
   });

});

And here is the code to use if you have a fixed header and need to calculate that in as well:

$(document).ready(function() {
$('.accordionButton').click(function() {
   	var headerHeight = $('.header').outerHeight();
  	var thisParent = $(this).parent();
  	var trigger = $(this);  
  	var openAccordionHeight = $(thisParent).prevAll('.active').children().eq(1).outerHeight();
       if ($(thisParent).hasClass('active')) {
	        $(this).next().slideUp('normal');
	        $(thisParent).removeClass('active');
	        return;
       } 
       $('.accordionContent').slideUp('slow');
       $('.active').removeClass('active');
       $(thisParent).addClass('active');
       $('html,body').animate({scrollTop: $(trigger).offset().top-openAccordionHeight-headerHeight}, 500);
       $(trigger).next().slideDown(500);
   });

});

WordPress Tips: Adding keyboard navigation between posts

I used the tips in this helpful post today to add keyboard navigation between posts on a WordPress website.

The jQuery script is:

(function($){
   $(document).ready(function () {
      $(document).keydown(function(e) {
         var url = false;
         if (e.which == 37) {  // Left arrow key code
            url = $('.prev a').attr('href');    }
         else if (e.which == 39) {  // Right arrow key code
            url = $('.next a').attr('href');    }
         if (url) { window.location = url;   }
     });
   });
})(jQuery);

Then, just make sure your previous and next post links have the appropriate classes:

<div class="prev-next">
<div class="alignleft prev"><?php previous_post('&laquo; %', '', 'yes'); ?></div>
<div class="alignright next"><?php next_post('% &raquo; ', '', 'yes'); ?></div>
</div>

How to preserve anchor tags in links shared using a social media sharing plugin on a one-page website

I ran into an issue today on a one-page scrolling website that is built using fullPage.js and therefore uses anchor links in the page URL to get people to the right place on the website. It is a WordPress website and on the blog, I naturally wanted to incorporate a social media sharing plugin.

The issue I ran into is that when you clicked a link to share the post to, say, Twitter, the link that was getting shared had the hashtag and everything following it – therefore, the anchor link -stripped out. Obviously this was not going to work – I need people to be able to share direct links to the specific post they are referencing, not to the entire website in general.

After some extensive online perusing, I finally found this extremely useful article – https://dev.twitter.com/discussions/512 – which contained exactly what I needed.

According to comment author @benward, “you need to URLEncode” the hashtag in the links, using %23.

Here is the solution that ended up working for me.

I used this line of Javascript to update the links in the social media sharing section of the page:

$(document).ready(function(){
    $('.social-media-links a').each(function(){
        this.href = this.href.replace('#', '%23');
    });
});

Voila! Now when people click the social media share buttons, my anchor links are preserved.

How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

I recently used the fullPage.js script on a website that I am working on and ran into a bit of trouble getting the section content to fade in nicely when it was scrolled into view. Here is the way I was able to accomplish that feature.

Following the instructions on how to incorporate fullPage.js into my site, my HTML structure looked like this:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

First, I added this declaration to my stylesheet, to start all of the page sections out as invisible:

.section {
	opacity:0;
}

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – https://raw.github.com/meetselva/attrchange/master/attrchange.js – and uploaded to it to my website, and then added the call to it into my webpage, after my call to the jQuery library:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/attrchange.js"></script>

*Note: make sure to verify that the path to your script in the code above is correct!

And then, finally I added this bit of jQuery to my webpage:

<script>
$(document).ready(function(){

$(".section").eq(0).animate({"opacity":"1"},1500);  //fade the first div.section in on page load

$(".section").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/active/i) == -1) { // "active" is the class name you search for inside "class" attribute
                $(".section.active").animate({"opacity":"1"},1500); //fade in the section with class active
            }
        }
    }
});

}); //end of document ready
</script>

And that did the trick! Now my section content fades in nicely when the new section is scrolled into view.

How to use Google analytics on a parked domain

I have found a way to use Google analytics to track traffic on a parked domain by using a PHP conditional statement to check which domain a visitor is accessing your site with and to render the correct Google analytics javascript code based on the domain.

First, make sure to set up a Google analytics profile for each of your domains – both the domain your site lives on and each of the parked domains that you want to track traffic on.

Then added this PHP statement in your website where you would typically place the analytics code itself:

<?php
$firstUrl = "yourparkeddomain.com";
$secondUrl = "yourwebsitedomain.com";
$currentUrl = $_SERVER['SERVER_NAME'];

if($currentUrl == $firstUrl) { ?>
<script>
  //insert Google analytics script for your parked domain here
</script>

<?php } else { ?>
<script>
  //insert Google analytics script for your main website domain here
</script>  

<?php } ?>

I think this is pretty self-explanatory – the PHP script is checking the current URL that the visitor is accessing your site at against the different URLs you have defined in the PHP script and is loading the correct Google analytics script based off of that information.

I have found that this gives me a way to at least track the data of visitors who are landing on my site through parked domains.

Open and scroll to an anchor link on a different page with an offset to adjust for a fixed header

Here is the script I have used to open and scroll to an anchor link on a different page on a site that has a fixed header and therefore needs to have an offset so the anchor link is not hidden behind the header.

<script>
$(document).ready(function() {
var offsetSize = $(".header").innerHeight();
$("html, body").animate({scrollTop:$(window.location.hash).offset().top-offsetSize }, 500);
});
</script>

What this script is doing is calculating the height of your fixed header (in this case: div.header) and then, upon loading the new page, scrolling to the correct anchor link on the page with an offset that is equal to the height of your fixed header.

In order for this script to work properly, you need to add an ID to your anchor link names that is the same as their name. For example:

<a name="contact" id="contact"></a>

Javascript Trick: Add a class or ID to an HTML element on hover

Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):

  • Recent Posts

  • Recent Comments

  • Categories

  • Archives