Week Six JavaScripting Notes

This week we are going to look at other JavaScript code examples to gain exposure to potential packaging and styles of implementations.

1. A Transitional Rollover Effects using a JQuery Background Position Plug-in

Bgpos is a plugin for dynamic rollover effects using the CSS background-position attribute. Bgpos is distributed via the very popular GitHub service which can be used by anyone to share a repository of code.

You can learn how to mirror a GitHub repository on any hard drive and then use git commands to keep the online version of the repository in sync with your hard drive version. Those who wish to get a copy of the repository can do so by downloading the repository as an archive file, but in that case there is no git services connection to the repository on the hard drive where it is used. Check out these four examples of Bgpos (download the code here).

We have already been exploring the JQuery framework, but we'll take a look at some other JavaScript frameworks as well.

2. A "Mousetrap" feature

Mousetrap is a JavaScript service that provides a simple library for handling keyboard shortcuts in Javascript.

Mousetrap is distributed via a single .js file that anyone can download. In that case, I usually search online to investigate the service's reputation or else I test it heavily before using it in any client project.

Here is an HTML document with examples of using Mousetrap:

<!DOCTYPE html>
    <script src="http://bdcampbell.net/javascript/mousetrap.min.js"></script>
    <title>Mousetrap example</title>
    Mousetrap.bind('a', function() {
         document.getElementById('p1').innerHTML = "HELLO WORLD";
    Mousetrap.bind('b c', function() { //keys in sequence
         document.getElementById('p1').style.color = "red";
         document.getElementById('p1').innerHTML = "GOODBYE WORLD";
    Mousetrap.bind(['command+d', 'command+e'], function() { //one key OR the other
         document.getElementById('p1').style.fontSize = "48pt";
<p id="p1"></p>

3. Turn.js is an example of a visual interactivity framework

The turn.js library is an example of a download and install approach which was most popular in 2007 and continues to be reasonably straight-forward to use.

4. Highslide is an example of a library with many visual interactive techniques

Highslide is fully documented at http://highslide.com/ and is an example of a dedicated support site for the library.

The framework can be driven from parameters within an HTML script node and components of the library can be removed from a deployment when not being used.

5. A Deck of Cards framework

A deck of cards is a framework of components that have a conventional expectation as to how they work together. Take a look at this implementation which is made available for forking (a term used when code is easily adapted in a new direction).

I used it as an example for the winter course (part two of this course) in January 2016. I walked through an example of using the deck to create a French Canadian solitaire game called Treize (means 13 in French)

6. A Parallax Effect Library

Take a look at this parallax implementation which is made available using via a download

I will demonstrate the following steps taken to add a parallax effect to an existing portfolio (which was based on an HTML/CSS template called Prologue:

My notes (steps to take to make within the Prologue download to make it work)...
1. Include the parallax library as a script node just before the closing </head>:
    <script src="assets/js/parallax.js"></script>

2. Include a parallax style element just after the parallax.js script node:

    .parallax-window {
        min-height: 400px;
        background: transparent;

3. Add a jQuery library up as the first script node (I use the version the parallax 
    library uses just to be safe and remove the script node referencing the version 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

4. Register an anonymous helper function that makes parallax work better in IOS and 
   Android devices (I put it right before the parallax include since their
   examples show that ordering):
            if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
              $('.parallax-container').height( $(window).height() * 0.5 | 0 );
            } else {
                var parallaxHeight = Math.max($(window).height() * 0.7, 200) | 0;

5. Insert the background layers images into your project wherever you'd like the
   parallax effect. The portfolio already had section elements (very nice) which
   made it rather clear where the best place to put the parallax content.
   To use the star field eagle nebula image from their example:
   <div class="parallax-container" data-parallax="scroll" data-position="top" 

6. Hope that the parallax library and the HTML/CSS template continue to be
   compatible and load the merged code in a browser.

7. Play with the code to get it looking the way you want with the content you want.

7. Example of a single feature framework add-on

Some JavaScript code documents available on the Web incrementally add visible features to a website.

Note the curious implementation of a scroll call in this example:

<a href="#bottom" title="scroll to bottom"><img src="./logo.png" name="#bottom" width="176" height="176" alt="apc collage" border="0" /></a>

The use of a pound sign in front of bookmark target is usually reserved for the href attbribute value. The author has chosen a familiar syntax and yet placed the syntax with a non-standard attribute value (the name attribute). When you use a framework, you should ask yourself if there is bound to be collisions between one framework's use and any other technology you might use.

The World Wide Web consortium wishes to reduce collisions by using URI naming standards (including incorporating domain names into code libraries and frameworks).

We implemented the vertical scrolling feature in a 2010 class to recreate our own simple example here (source code here).

Note the tvw.js library includes parameter driven behavior as well.

8. A Charting Library

Visual Analytics libraries are becoming very popular in JavaScript. Note this original eCharts example from China link no longer exists! Thankfully, we saved a copy for ourselves.

The library provides the shell for using charts in a web page. The interface is provided via JSON (The JavaScript Object Notation ) code which continues to be a very popular way to implement use of a library (we cover JSON heavily in part two of this JavaScript class sequence). Here's three examples of its use in web pages.

Interactive visualizations continue to get more popular as a certain visual literacy grows among magazine and newspaper subscribers. A highly popular example of an interactive visualization library is the D3 library which we use a lot in the Data Visualization course taught at RISD every Spring. The learning curve can be a bit steeper, but once mastered, the creative possibilities are dramatic (as the gallery shows).

Where to go from here?

Many blogs and technical articles like to highlight and recommend "Best Of" JavaScript libraries and frameworks. As one student pointed out, here are four interesting such articles of recent publication:

1. 15 brilliant jQuery plugins
2. Favorite jQuery plugins for Spring 2015
3. Best JS Plugins and Libraries of 2015
4. Top Notch jQuery Plugins to use in 2015