Tony Thomas » JavaScript

Using Impress.js

admin — Fri, 09 Mar 2012 17:08:14 +0000

Update: There is at least one WYSIWYG impress.js editor available now.

I came across Impress.js a while back and I was, well, impressed. It makes sense to do presentations on the web, given the powerful animations and transitions available in modern browsers. Impress is sort of like Prezi improved. Improved because it takes advantage of 3d animation. It does require some technical skill however. You need to know a bit about HTML5 and you have to be able to code a web page and write styles.

Right now you can only learn how to use Impress.js by reading the comments and experimenting. I thought it might be good to go through each of the features here to give a sense of it’s capabilities. If you’re interested, there aren’t really any insights here that you can’t find in the source.

The first thing is that you have to have a story to tell. Impress.js does nothing for you if you don’t have a narrative. So plan out what you want to say. Personally, write out what I want to say in any presentation in prose first. Just words. That way I can get a cohesive narrative going with good verbal transitions. Then I think about the visual stuff.

Assuming you know what you want to say, let’s move on.

First you’ll need to download the JavaScript. Next set up an HTML document with the HTML5 doctype. (Impress.js takes advantage of HTML5′S data attribute, so HTML5 is necessary.)




    Impress.js Presentation

The slides need to go into an element with the id of “impress.” It’s a div above, but it can be anything. The comments in the source also suggest adding the class, “impress-not-supported” to the #impress div. This class will be added if the browser does not support impress, but it’s good to have it there for browsers without JavaScript enabled. impress-not-supported allows you to provide a fallback message.

Options

Now things get interesting. Each slide should be within #impress and have a class of “step.” Positioning information is stored in data attributes. First off are the x and y coordinates. It’s important to note that we’re defining the x and y coordinates of the center of the element in question.

Our first slide

You can give you slides ids so you can link to a particular slide. Id’s are not required, however. If you don’t add them, impress.js will add a #step-N id to each element and append the hash to the url. While a hash syntax of #/step-N will still work, it’s better to use a standard hash like #step-N so that links will still work without JavaScript.

The next dimension we can control is scale:

Slide content

Note the data-scale attribute above. In this case, the slide is scaled down by a factor of 4, then scaled up to full-scale during the transition.

We can also control rotation:

Slide Content

For this, use data-rotate. In the example above, the slide is rotated 90 degrees.

And now we go 3d:

Slide content.

The data-z attribute above places this slide 3000 pixels away along the z-index.

Finally, we can control rotation along axes:

Those are the options. I had a little fun creating a version of my résumé. It’s pretty fun. I can also see some storytelling potential with this. Go forth and impress!Similar Posts:

Fun With JQuery Tubular

admin — Sat, 03 Mar 2012 20:39:14 +0000

I came across Sean McCambridge’s JQuery Tubular plugin a while back and I thought it would be fun to experiment with it. So I set up a little demo and I thought I’d walk through it here.

I should say that it wasn’t until I came across Phil Plait’s amazing moon simulation that I was inspired to build the demo.

I should also say that my example is completely unnecessary given Sean’s documentation. It’s really as simple as this:

$('body').tubular('someYTid','video'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

Once you have JQuery and JQuery Tubular linked in the head of your document and replace ‘someYTid’ with the id of your YouTube video, it will just work. The rest is styling. In the interest of explaining things all in one place, I’ll walk through what I did.

First, you need to set up the JQuery Tubular plugin and dependencies in your document:

I’ve loaded JQuery using Google’s CDN, HTML5 Shiv (because I’m using the HTML5 Doctype), SWFObject and the JQuery Tubular plugin linked above.

Next I set up a few styles. First I load some Google-hosted fonts:

Then I added a few styles of my own. (This is the “style to taste” portion.)

/* Use Stardos Stencil for headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Stardos Stencil', cursive;
	font-style: normal;
	font-weight: 400;
	font-size: 64px;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.4;
}
/* links are white and bold */
a {
	color: #fff;
	font-weight: bold;
}
/* Give the body a black background and get rid of browser-default margins and padding */
body {
	background: #000;
	margin: 0;
	padding: 0;
}
/* Any text needs to use absolute positioning and have a high z-index to float above the background video */
h1 {
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 1000;
}
/* Use Muli for paragraphs and set up absolute positioning and high z-index */
p {
	color: #fff;
	font-family: 'Muli', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	left: 20px;
	line-height: 1.4;
	position: absolute;
	word-spacing: 0em;
	text-decoration: none;
	text-transform: none;
	width: 150px;
	z-index: 1000;
}
/* Position paragraphs */
p#first {
	top: 20px;
}
p#last {
	top: 50px;
}

Next I set up the JavaScript. I really didn’t need anything besides the one line of JavaScript at the top of this post, but I wanted to add a few other fancy animations and hover effects. (You could do a lot of this w/ CSS animations/transitions, but that’s a topic for another post.)

$().ready(function()
{
    // Instantiate the tubular plugin to load the awesome moon video
    $('body').tubular('woTCsNNfYEE','video'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

    // Fade the overlaid text after 5 seconds
    $('.fade').delay(5000).animate({
        opacity: .5
    }, 1000);

    // Add a hover effect to those same element that are faded above
    $('.fade').hover(function()
    // mousein
    {
        $(this).animate({opacity:1});},
    // mouseout
    function()
    {
        $(this).animate({opacity:.5});
    });
});

That’s it. If you take a look at Sean’s example, there is more you an do to leverage SWFObject for controlling the video. Use cases for this plugin may be limited, but I can see lots of potential for neat page designs.Similar Posts:

Responsive Images: Keep It Simple; Keep It Small

admin — Fri, 17 Feb 2012 01:58:03 +0000

There’s a lot of excitement about responsive design in the mobile web development world. One of the techniques used in responsive design is responsive or adaptive images. There are a handful of techniques out there including CSS fluid images, using overflow:hidden to crop images and using a combination of .htaccess settings and PHP to deliver device-specific images.

The first two solutions are fairly simple, but ignore one problem: serving a larger-than-necessary image over a potentially slow network to a user who may have limitations on the amount of data they can receive. Keeping website size down is also important now because Google is using site speed as a criterion for search rankings. So, while I find the first two solutions interesting, I don’t think they’re the best we can do.

The adaptive image technique of routing image requests with a cookie and some Apache settings in an .htaccess file is also interesting. It too has limitations. First, it’s not for the faint of heart. If you don’t know your way around Apache directives, it might not be for you. It also relies on a PHP file. If you’re not using PHP, you’re out of luck. I’m no Apache expert, but I have some experience redirecting requests using .htaccess. Setup for adaptive images proved difficult because:

I found it hard to incorporate the .htaccess settings alongside our other Apache directives that already exist.
I only needed responsive images for part of the site

I freely admit that those limitations are mine and not anything fundamentally wrong with the method. If I were better with regular expressions, I probably could have gotten it going.

There is one limitation that is not taken into account: screen pixel density. A handful of Android phones have high resolution displays that defy how we typically understand pixels. The true resolution of the screen is 480 X 854 in this instance. Same for the iPhone 4. It has a pixel resolution of 640 X 960. No problem, right? Things get complicated when we use this meta tag:

That meta tag is extremely useful because it forces those high density screens to render text much like their normal-density counterparts. In practical terms, if the above meta tag is in the head of your web page, an iPhone 4 will report a resolution of 320 X 480 and render text accordingly–making it more readable.

Life is great at this point because without that meta information, text will render much differently on a handful of high pixel-density phones.

We run into problems when we need to get accurate pixel counts of the device in question. Now that I’ve got consistently readable text on a wide variety of devices, I suddenly have wildly inaccurate information on pixels that are relevant to rendering images. Now when I call:

h = screen.height;

An iPhone 4 will tell me that the screen height is 480 pixels when, for the purpose of rendering images, it’s actually 960 pixels. No big deal, but if I’m using JavaScript to determine the screen size so I can load an appropriately sized image, it’s going to load one that’s designed for a 480 pixel-width screen and it’s going to look terrible if the user switches to landscape mode.

Worse yet, while the iPhone 4 has a pixel density of 2, the Motorola Droid has a pixel density of 1.5. We could do some user agent sniffing to accomodate this, but the mobile device market changes so rapidly it would be nearly impossible to keep up with. Web standards tell us to look for supported features, not specific devices. So no user agent sniffing.

Luckily WebKit offers an imperfect solution that just happens to work in all the high pixel-density devices I’m aware of as of now:

window.devicePixelRatio

Now we can get the true number of pixels like so:

// Set the default directory to 320
	"use strict";
	d = 320;

	// Get the screen height
	h = screen.height;

	// set the height for non webkit browsers
	height = h;

	// Get the pixel ratio
	r = window.devicePixelRatio;

	// if devicePixelRatio is supported, calculate the device height
	if (typeof r !== 'undefined')
	{
		// Calculate the true number of pixels on the screen
		height = h * r;
	}

My technique is to save images at several common device heights (because height becomes width in landscape mode) and write the image tag using JavaScript, so the device gets the smallest possible image that will still look good on the screen. The full script looks like so:

/****
 * Loads different header images based on the device height and pixel density (for webkit browsers)
 * Height is used because at any time, the device could potentially be turned to landscape mode
 */

/**
 * @var string
 * vars for directory (d), height (h), pixel ratio (r) and height
 */
var d, h, r, height;

/*
* Bind these to pagecreate so they work with JQuery Mobile's automagic AJAX page loads
*/
$('#page-id').live('pagecreate', function(event)
{
	// Set the default directory to 320
	"use strict";
	d = 320;

	// Get the screen height
	h = screen.height;

	// set the height for non webkit browsers
	height = h;

	// Get the pixel ratio
	r = window.devicePixelRatio;

	if (typeof r !== 'undefined')
	{
		// Calculate the true number of pixels on the screen
		height = h * r;
	}

	// Set the image directory accordingly
	if (height <= 320)
	{
		// load 320 header
		d = 320;
	}
	// Probably the most common height for current smartphones
	else if (height <= 480)
	{
		// load 480 header
		d = 480;
	}
	// Many Motorola & HTC devices have an 800-pixel height
	else if (height <= 800)
	{
		// load 800 header
		d = 800;
	}
	// iPhone 4 & Droid
	else if (height > 800)
	{
		// load 960 header
		d = 960;
	}

	$('a#header-home-link').html('');
});

When the page loads, #header-home-link is just a normal HTML link with no image tag at all, so no image is loaded until we’ve determined the device screen size and write in the image tag with JavaScript (JQuery).

This technique will only work on WebKit browsers since other browsers don’t support devicePixelRatio at this time. Fortunately, this falls firmly within progressive enhancement. It’s not ideal if another mobile browser loads a pixelated image, but it has no effect on how the page itself functions.

Aside: You may have noticed that this is all bound to a ‘pagecreate’ event instead of the normal ready() method in JQuery. That’s because I’m using JQuery Mobile in this instance.

So there you have it. Detecting screen dimensions in pixels is fairly easy, but you do need to account for pixel density. While this approach is not perfect, it works well in most devices and as of now, no standard way of serving responsive images has emerged. This is as good as anything I’ve found.Similar Posts:

Baseline WordPress Theme Version 1.0.2

admin — Mon, 22 Mar 2010 17:34:43 +0000

I’ve uploaded a new version of the Baseline theme for WordPress development. The only change this time around is that I’m using wp_enqueue_script() to include WordPress’ existing copy of JQuery. (Hat tip to Chris Coyier.) This seems like a significant enough change to merit a small version bump.

I used the Baseline theme as a launching pad for this website. At least for me, it serves as a good starting point when you begin developing a brand new theme.

If you find this useful, you might be interested in checking outÂ Jeff Starâ€™s functions.php template.Similar Posts:

No Flash Required

admin — Sat, 20 Mar 2010 17:30:30 +0000

UPDATE II

I just updated the theme of this site so:

It uses even less JavaScript (all animations and transformations are done w/ CSS3 tranforms)
It’s HTML5

More on both those points in a post soon. The upshot is that this post refers to a past theme and may be confusing.

I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.

You do need to have a either a webKit or Mozilla browser for it to work properly. The point is that there are fewer and fewer things that Flash can do that can’t be done with HTML, JavaScript and CSS. In fact, just about every single bit of animation I’ve had done in Flash over the last couple of years could be recreated with JQuery & CSS3.

UPDATE

Since I couldn’t get the z-index to function properly in Internet Explorer, I used JQuery’s .browser property so the function only runs in supported browsers–namely, Mozilla or WebKit. The function actually degraded fairly well, except for Internet Explorer’s buggy handling of z-index. For reference, I’ve included my version of the plug-in because it has this and other subtle variations.

(function($) {
	if ($.browser.webkit || $.browser.mozilla) {

		$.fn.spasticNav = function(options) {

			options = $.extend({
				overlap : 2,
				speed : 500,
				reset : 1500,
				color : '#BDD2FF',
				easing : 'easeOutExpo'
			}, options);

			return this.each(function() {

			 	var nav = $(this),
			 		currentPageItem = $('.current_page_item', nav),
			 		blob,
			 		reset;

			 	$('').css({
			 		width : currentPageItem.outerWidth(),
			 		height : currentPageItem.outerHeight() + options.overlap,
			 		left : currentPageItem.position().left,
			 		top : currentPageItem.position().top - options.overlap / 2,
			 		backgroundColor : options.color
			 	}).appendTo(this);

				$('.current_page_item a').css('z-index', 1000);

			 	blob = $('#blob', nav);

				$('li:not(#blob)', nav).hover(function() {
					// mouse over
					clearTimeout(reset);
					blob.animate(
						{
							left : $(this).position().left,
							width : $(this).width()
						},
						{
							duration : options.speed,
							easing : options.easing,
							queue : false
						}
					);
				}, function() {
					// mouse out
					reset = setTimeout(function() {
						blob.animate({
							width : currentPageItem.outerWidth(),
							left : currentPageItem.position().left
						}, options.speed)
					}, options.reset);

				});

			}); // end each

		};

	}

})(jQuery);

Similar Posts:

Display Form Fields Based on Selection Using JQuery

admin — Mon, 15 Mar 2010 02:59:52 +0000

This is a simple method of showing and hiding form elements based on the user’s selection. It’s based on this article with a couple of very minor changes. (Dare I say, improvements?) I’m going to assume you’ve already included the JQuery library so I won’t cover that here. I want to go straight to the code. (View the example page here.)

First, the form:


	
		Questionnaire
		
			Choose 1 to make the next select list appear.
			
		
		
			
				Select "Yes" to make the next option appear.
				
			
		
		 
			
				This is the last question.

Now make sure your “hide” css class is hidden:

.hide
{

	display:none;

}

Now with the wonderful elegance of JQuery, we’ll tell the browser to display the hidden divs based on the user’s selection:

$(document).ready(function(){
	$("#select1").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide1").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide1").slideUp("fast");	//Slide Up Effect

		}
	});

	$("#select2").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide2").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide2").slideUp("fast");	//Slide Up Effect

		}
	});
});

Let’s look at what’s happening here. First, we have a form with select boxes with ids “select1″, “select2″ and “select3″. The last two are hidden by enclosing them in a div with our “hide” class. (Incidentally, Blueprint provides a “hide” class for you if you use that framework.)

Next we tell JQuery that as soon as “select1″ is changed, we need to evaluate the new value. In this case, if the new value is “1″, we want to display the div with the id “hide1″ using JQuery’s slideDown effect. We do this with JQuery’s change event.

$("#select1").change(function(){ // when #select1 changes

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide1").slideDown("fast"); // if it is "1", display the .hide1 div with the slideDown effect

		} else {

			$(".hide1").slideUp("fast");	//otherwise, hide it with the slideUp effect

		}
	});

Once “select2″ is displayed, we can evaluate it to see if we need to display “select3″ which is in a div with a “hide” class and “hide2″ id.

$("#select2").change(function(){ // once select2 is changed

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide2").slideDown("fast"); // if it is, display the hide2 div using slideDown

		} else {

			$(".hide2").slideUp("fast");	// otherwise hide it using slideUp

		}
	});

Remarkably simple really. Review the working example and code here.

Update (March 15, 2010)

You also could show/hide a single form element by id rather than enclose them in a div. I enclosed them in a div 1.) so I could hide the label and 2.) because in my application where I use this solution, I’m actually hiding a whole group of fields.

Resources

Similar Posts:

Introducing the Baseline Development WordPress Theme

admin — Tue, 09 Feb 2010 01:53:16 +0000

I’ve come up with some habits that I’ve developed from building themes for WordPress over the years. One, is to start with a nearly blank style sheet. I also like to hook in several JavaScript libraries and CSS frameworks from the start to take advantage of things like JQuery, Blueprint’s CSS reset and Superfish menus.

I’ve decided to build and release an XHTML 1.0 version and release it as a springboard for others who may want to take advantage of the same sets of tools. The theme isn’t much to look at (that’s the point), but it includes:

Blueprint CSS framework
960 Grid System
JQuery 1.4.0
JQuery UI 1.7.1
Superfish JQuery menu (with HoverIntent.js)
IE8 JavaScript Library
Widget-enabled sidebar
Test Content file from WP-Candy
Valid XHTML 1.0

More information here.

If you want to use all of these tools, you’re all set. If you want to use a few, it’s just a matter of removing them from header.php.

First off, I really like Blueprint’s browser reset, so I wanted to include that here. I also like the flexibility the 960 Grid System offers in terms of column width. As a result, I’ve included them both.

If you don’t wish to use any of these, simply remove them from header.php. Next up is the Superfish CSS:

You must keep this if you’re using Superfish. If you’re not going to use Superfish, you should remove these lines too:

Next is Blueprint’s Internet Explorer CSS reset:

I’ve also had good luck using the IE8 JavaScript library, so that’s included next:

Then JQuery and JQuery UI libraries:

That’s it. All the frameworks and libraries are loaded. If you don’t think you’ll need any one of them, you can just take them out. WARNING: The layout of the columns does rely on the 960 Grid System CSS file. If you take that out of the head the columns won’t work and you’ll break the layout.

Otherwise this should give you a good start that will allow you to take advantage of tons of cool JQuery stuff and leverages a very popular CSS Grid System for laying out columns. It should be easy to modify this theme to fit your own design.

Download the theme here.Similar Posts:

Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout

admin — Wed, 26 Nov 2008 19:55:58 +0000

Updated 12/3/2008

The other day I wrote about getting the Blueprint CSS framework into your WordPress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.


$css = array('blueprint/screen', 'blueprint/ie', 'style');

$jslibraries = array('prototype', 'scriptaculous', 'jquery');

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

echo $html->css($css, 'stylesheet', 'media=â€screen, projectionâ€');

echo $javascript->link($jslibraries);

?>
Let’s take these one at a time.
$css = array('blueprint/screen', 'blueprint/ie', 'style');
CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.
Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:






We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
So now:
$css = array('blueprint/screen', 'blueprint/ie', 'style');

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

echo $html->css($css, 'stylesheet', 'media=â€screen, projectionâ€');
Results in:







Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.
Linking JavaScript libraries is very similar.
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.
Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.
Other good resources:

CakePHP Core Helpers
Developing With CakePHP
CakePHP API JavaScript link Helper
CakePHP API CSS link Helper

Similar Posts:

Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
Incorporating Blueprint CSS Into Your New WordPress Theme
Introducing the Baseline Development WordPress Theme
Baseline Theme Version 1.0.1
Blueprint CSS Readme File