course logo
spacer page banner

Week Six JavaScripting Notes

Tonight we are going to look at JavaScript libraries to gain exposure to potential implementations.

Working with JavaScript Frameworks

Transitional Rollover Effects using a JQuery Background Position Plug-in

Bgpos is a plugin for dynamic rollover effects using the CSS background-position attribute, Check out these example for class (code here).

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

Mousetrap feature

Mousetrap is a keyboard emulator for mouse actions which can be used to trigger any JavaScript event. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <script src="http://bdcampbell.net/javascript/mousetrap.min.js"></script>
    <title>Mousetrap example</title>
    <script>
    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.unbind('a');
    });
    Mousetrap.bind(['command+d', 'command+e'], function() { //one key OR the other
         document.getElementById('p1').style.fontSize = "48pt";
    });
    </script>
</head>
<body>
<p id="p1"></p>
</body>
</html>

Highslide - example of a visual interactivity framework

The highslide framework is an example of a download and install approach which was popular in 2007 and continues to be useful. Highslide is fully documented at http://highslide.com/. Here is an example of using just part of the Highslide framework by removing files you aren't interested in using.

The framework can be driven from parameters within an HTML script node.

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.

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)

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> tag:
    <script src="assets/js/parallax.js"></script>

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

    <style>
    .parallax-window {
        min-height: 400px;
        background: transparent;
    }
    </style>

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 downloaded):
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

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):
        <script>
          $(function(){
            if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
              $('#ios-notice').removeClass('hidden');
              $('.parallax-container').height( $(window).height() * 0.5 | 0 );
            } else {
              $(window).resize(function(){
                var parallaxHeight = Math.max($(window).height() * 0.7, 200) | 0;
                $('.parallax-container').height(parallaxHeight);
              }).trigger('resize');
            }
          });
        </script>

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" data-bleed="10" 
                data-image-src="http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg" data-natural-width="1400" 
                data-natural-height="900"></div>

6. Hope that the parallax library and the HTML/CSS template continue to 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.

A Charting Library

Visual Analytics libraries are becoming very popular in JavaScript. Here's an eCharts example from China. 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. 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