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>
<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>
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 downloadI 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:
<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 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
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