Using jQuery with Hype

Why use jQuery with Hype? JQuery provides commands for fade-ins, fade-outs, and other animated effects. So, you can bypass much of the clumsy handiwork in Hype creating animations, and dealing with keyframes and timelines by using jQuery. But you can still use Hype to layout your design.

JQuery is a popular, and powerful, JavaScript library that makes it easy to select elements on an HTML document and create animations, effects, and transitions. JQuery isn’t a separate language–it’s simply a set of well-written JavaScript code that groups together commands to make it easier to do things. For example, if you were to write (hypothetical) code in JavaScript to open a door, you might have to write several lines of instruction:
1. Step up to the door
2. Grab the handle
3. Turn clockwise
4. Push

In jQuery, all of these commands might be grouped together in a single function called, Open Door. This saves you a lot of time and effort. Follow these steps to create a simple example that uses jQuery to fade out an object.

1. In Hype 1.6.0, edit the Head section of the HTML document. Select the Document inspector tab, and click on the “Edit Head HTML…” button.

2. In between the <head> and </head> tags, add this script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

The <script> tag tells the browser to download the jQuery library from Google, which hosts the code.

3. Return to the Hype stage. Select the element you want to animate with jQuery. In the Identity inspector (the far right tab), provide a Unique Element ID. For this example, add an image and give it the unique name, obamaheadshot. It may say “Automatically Generated”, but put your cursor inside the field to enter your own.

4. Create an interaction that will trigger a jQuery effect. In this example, assign an On Mouse Click event to the image. For Action, choose “Run JavaScript…”, and for Function: choose “New Function”. An untitledFunction() appears as your new function.

5. In the untitledFunction() page that appears, you can add your own JavaScript (or jQuery) code. In between the curly braces of the function, add this statement.

$("#obamaheadshot").fadeOut();

 

The dollar sign, parentheses, and quotation marks, $(“”), is the jQuery syntax to select something in the HTML document. The pound sign is a CSS way of indicating that the thing is a unique element. So, the statement selects the item marked as obamaheadshot, and applies the fadeOut() command to it. The fadeOut() command makes it fade from 100% opacity to 0% opacity.

6. Try the entire interactivity out here, or below. Click on the image of Obama. The photo fades out using a single jQuery command, with no timeline animation necessary.

Download the completed Hype file. Learn about other jQuery effects. Try starting with these:

fadeIn();
fadeOut();
fadeToggle();
hide();
show();
slideDown();
slideUp();
slideToggle();

A word about Dropbox: Although Hype makes it easy to publish directly to your Dropbox public folder, Dropbox is really meant for storage and file sharing, and not for web hosting. Performance isn’t the greatest from Dropbox, so upload your published files to your own server.

 

Adding Video to Tumult Hype

You can easily add video to a Tumult Hype project by copying and pasting a video’s iframe code into Hype’s HTML widget. Follow these steps:

1. Find your video on a video sharing site, such as YouTube, and click the Share button, and then the Embed button to copy the iframe code.

2. In Hype, create a new HTML Widget.

3. Double-click the HTML Widget, or click on the Pencil icon at the bottom edge. Paste the iframe code that you copied from YouTube into the text box.

4. Hype automatically pulls the video content from YouTube and displays it in the HTML widget. You can resize the HTML Widget so that it fits the dimensions of your video. Drag the bottom right corner to enlarge the width or height.

5. Click the Preview button at the top right corner of the Hype interface to preview your embedded video in your project.

Now, if you have several scenes, there is a bug that causes the audio from your video to continue even after you switch to a different scene. The solution is to add a little JavaScript to kill the audio if your reader leaves the current scene. Here’s how to add that script:

1. Click on the “Scene Inspector” tab on the panel on the far right of the Hype interface. This panel allows you to add interactivity to the general scene (and not individual buttons).

2. For the On Scene Unload (the very bottom event), choose “Run Javascript” and for Function, choose “New function”. This makes Hype execute a JavaScript function whenever the reader leaves this particular scene.

3. Hype automatically adds some JavaScript code in a new window.

4. Add this line of code in between the opening and closing curly braces of the script:

document.getElementById("uniqueIDhere").innerHTML = ' ';

Hype identifies a particular element on the stage, called “uniqueIDhere”, and makes the contents blank. That will kill the contents of your HTML widget, and consequently, the audio from the video. Those last punctuation marks are a pair of single straight quotation marks and a semi-colon. When you return to the scene, the video will reload into the HTML widget.

5. Last step…you have to identify your HTML widget on the scene with the unique ID that you referenced in Javascript. Select your scene where your video is embedded, and click on the video. Choose the last tab called the “Identity inspector” on the panel on the far right. Enter the unique ID in the last field. In this example, since the code in step 4 has “uniqueIDhere”, I entered uniqueIDhere. It’s best to choose a name that makes sense to you.

6. All done!

Google Fusion Tables Layer Wizard Example

Using Google Fusion Tables Layer Wizard

Combine two different Google Fusion maps. This one combines a map with shapes colored to correspond to number of English Language Learner students in each school district, and another map with points for each public school.

Other options you can configure are adding a search field to query a specific column in your table (this one searches school name), and changing the appearance and features on your map.

Use the iframe code to embed the URL to your combined map.

Last class?

Aside

Our last class will meet December 19, a week after CUNY students graduate. We’ll wrap up our assignments Dec 12, so we want to hear from you: what should we do with our last class.

We can bring in a speaker (is there someone you’d like to hear from?) or dig in to an advanced tool like R, d3, High Charts or TileMill.

Use the comments here to brainstorm and we’ll vote on Nov 14.