1. Web Design
  2. Skeleton

Adding JavaScript Behavior to Our Skeleton Web Page

This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

So far we’ve built a solid HTML page and applied some styles. This tutorial will focus on adding interactivity to the website through JavaScript. We’ll split it in two parts:

  • Adding the plugins and preparing the workspace
  • Initializing the plugins and customizing them for our use

Plugins Overview

There are plenty of jquery plugins that we can use for this tutorial, but we’ll stick with the following:

  • Isotope

    Filter & sort magical layouts

    This library is vast and powerful, but still requires some good programming skills to use. It has support for various type of layouts, for filtering and sorting.

  • Scrollreveal

    Easily reveal elements as they enter the viewport.

    I chose this library because it has support for both downward and upward scrolling. It reveals elements whenever they are visible in your viewport and it’s very easy to implement.

  • SinglePageNav

    A jQuery plugin that provides smooth scrolling and advanced navigation for single page websites.

  • Fancybox

    fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

  • Jquery

Preparing the Workspace

After finding the necessary plugins for our website, it’s time to download and reference them in our index.html like this:

As you can see, I downloaded them to a new folder called js because in this way it’s easy to maintain and the files are organized.

The scripts.js file is a blank file for now. We’ll use it to write extra JavaScript and initialize the plugins.

Now that everything is set in place let’s move to the next section, where we’ll play with each plugin.

Writing the Scripts

The first thing that you need to learn when writing jQuery is $(document).ready(function(){});. This will run everything inside the function once the DOM is loaded. You can read more about it on learning jquery.

I really like to keep my code clean, so that’s why you’ll often see me storing selectors in variables (as you’ll see below), using two spaces for indentation and the guideline at 80 chars.

Hero Section

The hero section in our design should ideally have window.height, effectively full-height. This is possible through CSS unit vh but since not all browsers support these units, we’ll stick to JavaScript.

To get the window height we’ll use window.innerHeight which outputs the height of the viewport in px.

Here we applied the viewport height to the heroContainer, but we also need to ensure that whenever the user resizes the browser, we will reapply the viewport height to the heroContainer. The following code will listen to window resize and will modify the height of the heroContainer on the fly:

Storing selectors in variables makes them easy to maintain and reuse. You should have something like this:


First things first, let’s store the selectors that we are going to use in variables. For now, we need the menuIcon, navigation, mainNavigation and navigationLink. The variables should look like this:

When we have multiple variable declarations, there’s no need to repeat var, you can comma separate the variables.

Let’s attach a click event on menuIcon which should add a class name active to the mainNavigation. The active class on mainNavigation is styled within our CSS and makes it visible.

Let’s now use the SingleNavPage plugin and initiliaze it in the mainNavigation selector like this:

Here I also added a scroll listener that will add a different class to the menuItem if the user scrolls more than viewport height. I check if window.scrollY is greater than window.innerHeight (viewport height) I toggle active class for the menuItem

The entire code for the menu now looks like this:


The initialization for ScrollReveal is quite simple but I added a little configuration to it. If you’d like to find out more about the usage of it and more config options you should check the project on Github. The code for the scrollreveal initialization is as follows:


In this case, what is our script going to do for us? There are three big things:

  • transform work list into an isotope layout
  • filter the items
  • add an active class to the active filter option

We’ll begin by storing the required variables for this plugin. javascript var $workFilterLinks = $('.work-filters li'), $container = $('.work-items'); The next thing is to attach a click handler for each filter link. This will remove the active class from all filters and add it to the clicked item.

Inside the click callback function, we’ll target the container and create an isotope instance with filter and layout mode as options.

This will filter the isotope items by the filter’s data-filter attribute and will add the masonry layout for the work section.

The code for our work section should now look similar to this:


The last plugin that we are going to use is Fancybox. This plugin will be attached to the play button from the video section.

After writing the JavaScript part, this is how the code should look:

Final Thoughts

And we’re done! Take a look at what we’ve built!

I hope that you enjoyed this series and you learned plenty of new things. Throughout this process I’ve shared some techniques that I use on a daily basis and I hope you’ll take them onboard and share them.

I’d love to see what you’ve coded so far–share with us anything you build using some of these techniques!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.