Monthly Archives: December 2010

The Nivo Slider Without JavaScript

This week I made a version of the Nivo Slider which degrades in a way that doesn’t break the layout but users without JavaScript still have the option to see all the images in the slider. Or – if you don’t want to read the article – disable JavaScript in your browser and just check out the demo.


So I recently happened upon the Nivo Slider while doing some work for the John Molson Sustainable Business Group who are organizing the Business Beyond Tomorrow Conference, along with HEC MBA Students Association and McGill Desautels Faculty of Management. The conference needs a web site (that’s where I come in) and on its home page web, they’d like "a carousel like on the TedX Concordia site". A little "View Page Source" investigation revealed that TedX Concordia’s web site uses the Nivo Slider.

One thing didn’t sit well with me though, as an idealistic standards-obsessed web-head; the sites I see which use the Nivo Slider don’t degrade in a way I like. Fine, they degrade "gracefully" – nothing all out breaks – but look what happens, for example, when you visit TedX Concordia with JavaScript disabled:

A screenshot of TedX Concordia with JavaScript turned off
Click to enlarge

There’s a big empty space… weird. Really weird when you consider that the images are there, just display:none-ed, so a user with certain screen readers will still "see" the images.

That’s right; the blind user will "see" more than the not-blind user. If that’s not the kind of terrifying Macbeth-Act-2-Scene-4-fair-is-foul-and-foul-is-fair stuff which means something isn’t right in the world, I don’t know what is!

The same goes for the Dev7studios Nivo Slider demo which just shows a "loading" animation, giving the false impression something will happen.

Annoying loading animation which never ends
I don’t want to spend all day watching this.

Yes, yes, I know most developers like to insist that "All modern browsers support JavaScript!" and as such it is not optional, but my point is only that catering to the needs of users (potential customers) who have JS turned off isn’t nearly as hard as everyone likes to think it is.

The Nivo Slider Without JavaScript

Before actually making the Nivo Slider degrade gracefully, you might to take a look at my starting point; check out my Alex Ross Wallpaper Nivo Slider Demo to see my starting point. It’s pretty much identical to the Dev7studios demo; any changes I’ve made have been commented to explain.

The goal I’m setting here is to make the Nivo Slider behave more like Pure CSS Popups by leveraging CSS2 and the :hover pseudo-class.

HTML

First, we need some hyperlinks between the slider images, which link to the images:

Before
		<img id="batman" src="alex-ross-wallpaper/batman_800.jpg" alt="Batman" title="Batman"/>
		<img id="superman" src="alex-ross-wallpaper/superman_strength_800.jpg" alt="Superman" title="Superman"/>
		<img id="wonderwoman" src="alex-ross-wallpaper/wonderwoman_800.jpg" alt="Wonderwoman" title="Wonderwoman"/>
		<img id="harley-quinn" src="alex-ross-wallpaper/harleyquinn_800.jpg" alt="Harley Quinn" title="Harley Quinn"/>
		<img id="golden-age-heroes" src="alex-ross-wallpaper/goldenage_800.jpg" alt="Golden Age Heroes" title="Golden Age Heroes"/>
		<img id="robin" src="alex-ross-wallpaper/batmanrobin_800.jpg" alt="Robin" title="Robin"/>
		<img id="kingdom-come" src="alex-ross-wallpaper/kingdomcome_800.jpg" alt="Kingdom Come" title="Kingdom Come"/>
After
		<a href="#batman">1</a>
		<img id="batman" src="alex-ross-wallpaper/batman_800.jpg" alt="Batman" title="Batman"/>
		<a href="#superman">2</a>
		<img id="superman" src="alex-ross-wallpaper/superman_strength_800.jpg" alt="Superman" title="Superman"/>
		<a href="#wonderwoman">3</a>
		<img id="wonderwoman" src="alex-ross-wallpaper/wonderwoman_800.jpg" alt="Wonderwoman" title="Wonderwoman"/>
		<a href="#harley-quinn">4</a>
		<img id="harley-quinn" src="alex-ross-wallpaper/harleyquinn_800.jpg" alt="Harley Quinn" title="Harley Quinn"/>
		<a href="#golden-age-heroes">5</a>
		<img id="golden-age-heroes" src="alex-ross-wallpaper/goldenage_800.jpg" alt="Golden Age Heroes" title="Golden Age Heroes"/>
		<a href="#robin">6</a>
		<img id="robin" src="alex-ross-wallpaper/batmanrobin_800.jpg" alt="Robin" title="Robin"/>
		<a href="#kingdom-come">7</a>
		<img id="kingdom-come" src="alex-ross-wallpaper/kingdomcome_800.jpg" alt="Kingdom Come" title="Kingdom Come"/>

JavaScript

Next, those hyperlinks which were added to the HTML are removed from the document by the same JavaScript which creates the Nivo Slider:

Before
$(window).load(function() {
	$('#slider').nivoSlider();
});
After
$(window).load(function() {
	$('#slider > a').remove(); /******* NEW *******/
	$('#slider').nivoSlider();
});

CSS

The rest is in the CSS. To follow along, you’ll have to disable JavaScript in your browser.

Now, we’re going to leverage the :hover pseudo-class, the adjacent sibling selector + and the z-index CSS property to make those images visible when we mouseover the hyperlinks:

/******* NEW *******/
#slider > a {
	position:relative;
	z-index:99;
}
/******* NEW *******/
#slider a:hover + img {
	display:block;
	z-index:50;
}

Lastly, you should replace that background "loading" image with something more brand-oriented:

Before
#slider {
	width:800px;
	height:600px;
	margin:auto; /* center it horizontally */
	position:relative;
	background:url(images/loading.gif) no-repeat 50% 50%;
}
After
#slider {
	width:800px;
	height:600px;
	margin:auto; /* center it horizontally */
	position:relative;
/******* REMOVE *******/
/*	background:url(images/loading.gif) no-repeat 50% 50%; */
/******* NEW *******/
	background:url(images/alex-ross-logo.jpg) no-repeat 50% 50%;
}

The Final Product

These simple changes allow a Nivo slider to degrade such that the images it presents/animates are still available to users who disable JavaScript, without disrupting the page’s overall layout and design The only difference between the page when viewed with JavaScript and without is that with JavaScript enabled the images shuffle all on their own, while when JavaScript is disabled the user has to mouse-over the hyperlinks to see the images. See the Alex Ross Wallpaper Nivo Slider No Script Demo.

Addendum (27/10/2012)

The finishing touch would probably be adding one more CSS rule which uses the :target pseudo-class:

#slider img:target {
	display:block;
	z-index:40;
}

That way the end user can click on a specific hyperlink and – since the hyperlinks’ href attributes all refer to the images using fragment-identifiers (#batman, #superman, #wonderwoman…) – the user can continue to see that image once they move their cursor away.