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.

Pure CSS Dropdown Navigation Menu with Animation

Here is a quick and easy way to add beautiful CSS animation to a simple dropdown menu.

Here is the HTML structure for our dropdown menu:

<ul class="menu">		
  <li><a href="#">Home</a></li>	
  <li><a href="#">About</a></li>	
  <li><a href="#">Products</a>
    <ul class="submenu">
      <li><a href="#">Clothing</a>
      <li><a href="#">Shoes</a>
      <li><a href="#">Accessories</a>
    </ul>
  </li>	
  <li><a href="#">Contact</a></li>	
</ul>

Here is the basic CSS for a dropdown menu:

ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.menu li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.menu li a {
    display: block;
    padding: 0 25px;
    text-align: center;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li ul.submenu {
    float: left;
    position: absolute;
    left: 0;
    top:0;
    visibility:hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
ul.menu li:hover ul.submenu {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
ul.menu li:hover ul.submenu li {
    float: none;
    width: 100%;
}

The key things to note in the code above are the positioning, the opacity, and the visibility declarations for ul.submenu and ul.submenu when its parent LI is hovered over.

By positioning the submenu 0px from the top of it’s parent LI to begin with, adding a transition style to it, and then changing the position from the top to 50px when the parent LI is hovered over, we achieve a beautiful “sliding down” effect on the submenu.

You could obviously edit the positioning of the submenu to easily achieve a “slide in from the bottom or one of the sides” affect as well.

You will notice that the initial opacity of the submenu is 0 and changes to 1 when the parent LI is hovered over, this adds a beautiful fade in effect.

WordPress: Conditional PHP code to check if page is set as the website home page

Here is the code I use in my WordPress template files to add a conditional statement which checks to see if a page is set in the dashboard as the site home page:

<?php 
$front_page = get_option('page_on_front');
if (!is_page($front_page) ) { ?>
Show this text on the front page of the website.
<?php } ?>

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.

How to add an incrementing number counter inside the WordPress “while” loop

This morning I spent some time figuring out how to add an incrementing number counter inside a WordPress “while” loop and here is how I finally accomplished it:

I defined the first number (in this case, the variable $postnum) before the “while” loop started, like so:

<?php $the_query = new WP_Query( $query_string.'showposts=4' ); ?>
<?php $postnum = 0; ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

Then I added my div with the incrementing number class within the “while” loop, like so:

 
<?php $postnum++;
	echo "<div class='homepagepost-";
	echo $postnum;
	echo "'></div>";
?>

Now my output for each post includes my custom-numbered div:

<div class="homepagepost-1"></div>
<div class="homepagepost-2"></div>
<div class="homepagepost-3"></div>

WordPress Tricks: Customizing the output of “wp_nav_menu()”

There are times when I need to output a menu in WordPress with very custom settings – for example, with no containing UL, with a specific class on the wrapping UL, with the links wrapped in specific tags (spans, for example), etc. Here is the call to a WordPress menu that I use and customize to output the menu exactly as I need it:

<?php wp_nav_menu( 
array ( 
'menu' => 'Main Menu', //the name of the menu you are trying to output
'container' =>false, //set to UL or DIV, or 'false' for no wrapper
'container_class' => '',//the class that is applied to the container
'container_id'    => '',//the id that is applied to the container
'before' => '<div>', //what the a tags themselves are wrapped in
'after' => '</div>', //what the a tags themselves are wrapped in 
'link_before' => '<span>', //what the words within the link are wrapped in 
'link_after' => '</span>', //what the words within the link are wrapped in
'items_wrap' => '%3$s', //what the LI elements are wrapped in - "%3$s" is the LI list itself. To wrap the LI list in a div, you would use "<div class="YOURCLASS">%3$s</div>"
'depth' => 0, ) ); ?>

An article which explains the “items_wrap” argument excellently is http://wordpress.stackexchange.com/questions/19245/any-docs-for-wp-nav-menus-items-wrap-argument so be sure to check that out if you are looking for more information.

And of course, for information on all of the parameters that you can use in wp_nav_menu, you will want to check out the official documentation on WordPress – http://codex.wordpress.org/Function_Reference/wp_nav_menu

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>

How to make the top-level links in a jQuery accordion menu clickable

I often use a jQuery accordion menu for the mobile menu on responsive websites and have run into issues before where the top level links by default seem only to expand or collapse submenus and not actually take you to the page you are trying to go to. What I have found is that I usually just need to add this line of code to my script:

header: '.menu-control'

So, for example, the script I now use to call in the accordion menu would be:

function enableAccordion() {
 $('#menu-mobile-nav').accordion({
 header: '.menu-control',
 autoHeight: false,
 navigation: true,
 collapsible: true,
 active: false
 });
}

Where my HTML for the menu is:

<h3>MENU</h3>
<ul id="menu-mobile-nav" class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>