Flash can be make Web sites look pretty but for one reason or another not everyone has the player installed on the client browser. If you or your users are one of those poor unfortunates that has a 64-bit linux distro or you just hate having animations on your Web page, then you are forced to go without flash.

In this article we'll show you how to build a more usable carousel in JavaScript instead of Flash.

JavaScript - The lesser of two evils

For the purpose of this article we're not going to debate why we are developing a carousel and accept that we are forced to make one.

Then the question becomes: why use JavaScript over Flash?

  • It is lighter than the Flash implementation - by optimising our code we will be able to have a functional carousel in only a couple of kilobytes, it will take longer for the images to load than our HTML and JavaScript.
  • Maintainability is another reason, plenty of developers know JavaScript compared to those that are competent in Flash. Perhaps there are not the design resources to create a fully featured flash implementation, suddenly leaving it to the developers means JavaScript is a viable alternate.
  • Degradation. It is far easy to deliver useful content to someone with JavaScript turned off than it is for someone without Flash.
  • Accessibility. It is easier for a screen reader to navigate a carousel that is inline than outside have it in a Flash object.
  • Google. If your content is in the page then Google can index it, if it is in Flash than the Googlebot cannot follow the links without hiding the carousel content in the page.

The HTML Base

With these reasons in mind, let's begin to create our carousel by showing purely the four stories we are going to use in this example.

<html>
<body>
<div id="storyContainer">
<div id="story1">
	<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>
	   Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.
	  <span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>
</div>
<div id="story2">
	<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>
	   Find an Aussie user group near you with our new Google maps interface.
	  <span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>
</div>
<div id="story3">
	<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>
	   Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.
	  <span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span>
</div>
<div id="story4" >
	<a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm" class="ched">Understand CSS</a>
	   Before diving into CSS learn some of the core drivers and concepts.

	  <span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span>
</div>
</div>
</body>
</html>

The Mona Lisa has nothing on us at this point. Let's add some style to these divs and make it more like the carousels we know: 


<html>
<head>
<style>
.storydiv {
    height:182px;
    width:355px;
    padding-left:175px;
    top:0px;
    left:0px;
}

#story1 {
    background:url(http://www.builderau.com.au/i/s/cov/securitychain170110.gif) no-repeat;
}

#story2 {
    background:url(http://www.builderau.com.au/i/s/cov/browser170110.jpg) no-repeat;
}

#story3 {
    background:url(http://www.builderau.com.au/i/s/cov/dotnet170110.gif) no-repeat;
}

#story4 {
    background:url(http://www.builderau.com.au/i/s/cov/tools170110.jpg) no-repeat;
}

.storyDesc{
    padding-top: 10px; 
    padding-right: 8px;
    display:block;
}

.fStory {
     padding-top: 10px;
     display:block;
     font-weight:bold;
}
</style>

</head>
<body>
<div id="storyContainer">
<div id="story1" class="storydiv">
	<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>
	   <span class="storydesc">
	   Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.</span>
	  <span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>
</div>
<div id="story2" class="storydiv">
	<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>
		   <span class="storydesc">
	   Find an Aussie user group near you with our new Google maps interface.</span>
	  <span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>
</div>
<div id="story3" class="storydiv">
	<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>
		   <span class="storydesc">
	   Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.</span>
	  <span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span>
</div>
<div id="story4" class="storydiv">
	<a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm" class="ched">Understand CSS</a>
		   <span class="storydesc">
	   Before diving into CSS learn<br/>some of the core drivers and concepts.</span>

	  <span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span>
</div>

</div>
</body>
</html>

Which is great, but it's hardly going to rotate properly if it is all one after another vertically. To get all the divs to sit on top of each another, we add the following line to the storydiv class:

position:absolute;

Now we have a huge mess. To get some order into it, we hide the divs with id story 2 thorugh to 4 with: 

display:none

This is how our carousel will appear like when we load it - it's time to get into the JavaScript.

123 Next >

Wide World of Web This was published in Wide World of Web, check every Wednesday for more stories

Comments

1

Managerial Excellence - 19/10/06

Indeed Flash is often wasted on many users. Some bloody IT admins lock down desktops so much you can't even install the thing!

» Report offensive content

2

Brice - 19/10/06

That is good to see that developpers want to do the same as designers but it will never look as sharp and clean as flash (or a designer job).

Talking about the speed, I agree that your Javascript will load quicker but i prefer my 5kb flash animation against your 100kb Javascript librairies (Prototype and Scriptcalous).

And about google, if you care about your SEO you just have to overwrite your content with the flash object using Javascript. And I think this is the only place Javascript should be used in that, to serve Flash.

» Report offensive content

3

dobie - 19/10/06

Compared to the MEGABYTES we are talking about to download the latest and greatest in flash.
http://labs.adobe.com/downloads/flashplayer9.html

If a site was already using the Scriptaculous libraries then you essentially get it for free anyway.

If you are worried about file size then you could use something like the first example (http://www.builderau.com.au/resources/carousel/example1.htm) and use CSS and imagery to make it better.

> I think this is the only place Javascript should be used in that, to serve Flash
AJAX just called, it wants all the pages it has served to you back.

» Report offensive content

4

Brice - 19/10/06

You will download the Javascript librairies each time you reach a new domain, no matter what, and yes your javascript will be cached like my flash animation.
At least most of flash designers are also developpers, can't say the same thing about developpers who want to be designers :)

» Report offensive content

5

dobie - 19/10/06

If you trimmed the animations down properly in the javascript you can still remain smaller than flash.

You can do your own dissolve effect in a few lines, easy as and it will be heaps smaller then the Flash.

But like the author said, if you need advanced animation and all sorts of visual trickery then Flash would be your thing.

Javascript has it's limits. And so do you apparently.

» Report offensive content

6

Brice - 19/10/06

and don't try to get deeper than you are.

» Report offensive content

7

cankles - 20/10/06

Now, now, children -- both of you drink your Kool Aid.

-- Jim Jones

» Report offensive content

8

context menu wanted - 20/10/06

Flash guys are just threatened that you can do in javascript what you can do in flash. But fuc*ing A, flash guys, how can you expect us to not look for alternatives when we are surfing in firefox and can't use the context menu + open in new tab! Just ridiculous...

» Report offensive content

9

Matt Emery - 27/10/06

I am calling LAME on this article, no qualification, just someone's opinion. And as you can see by the comment thread, everyone's got one.

» Report offensive content

10

Ben - 30/10/06

I have been touting JavaScript as an alternative to Flash for *years*. To me it is simply unacceptible to have *any* content in a flash animation. Flash is great for things like www.stickcricket.com, which would be incredibly difficult to write and tune correctly in JavaScript. But people use Flash for navigation within sites - HELLO not everyone has Flash! Flash imo is WAAAAAY over-used and over-rated.

» Report offensive content

11

Baba - 22/02/07

that was very good

don't have any code to share :-( but i need help with coding.. so please, any helping hand will be appreciated.. cheers

» Report offensive content

12

Axiom - 17/04/07

This works great in Firefox, but in IE6, and IE7 in your second sample, the stories rotate by once, and then it shows blank.

Didn't notice until I was through :(

» Report offensive content

13

skolbe - 07/05/07

this is set to run indefinitely---how would you control the number of loops?

thanks.

» Report offensive content

14

CD - 12/06/07

Thank you so much. I have been searching for this for a while. This is great!

» Report offensive content

15

Adam - 07/04/08

In IE 7, the stories only scroll once. They show up blank after that. Works in Firefox but how can I fix the ie problem?

» Report offensive content

16

Jhon - 28/04/08

Hay que conservar los valores de opacidad del div anterior o el ultimo mostrado. No funcionaba en IE6+ pero haciendo esto funciona sin problemas.

» Report offensive content

17

zipi - 20/04/09

I have the same bug on IE6, IE7 : the story only scroll once and show up blank after.

Jhon, please could you explain de "opacidad del div anterior" solution ?

» Report offensive content

18

sat - 23/05/09

I love this method...the player will now work on my mobile, as apposed to my Flash version. Quick question...how can I make it not autoplay initially.

» Report offensive content

19

sat - 23/05/09

Forget it, I am such an @#$. I so overlooked how it was calling in on the "onload."

» Report offensive content

20

sat - 23/05/09

anyone figure out the IE problem?

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

Latest comments

20

sat - 23/05/09

anyone figure out the IE problem? ... more

19

sat - 23/05/09

Forget it, I am such an @#$. I so overlooked how it was calling in on the "onload." ... more

18

sat - 23/05/09

I love this method...the player will now work on my mobile, as apposed to my Flash version. Quick question...how can ... more

Log in


Sign up | Forgot your password?

Blogs

RSS feed

  • Staff Aussies to pay more for Win 7

    If you are looking to make some money in these troubled times, perhaps importing copies of Windows 7 could be for you. Read more »

    -- posted by Staff

  • Staff Firefox: Greens want it, 3.5rc2 not up to par

    This week's roundup looks at the situation surrounding a campaign to change Outlook HTML renderer, a Greens MP wants to install Firefox but is restricted and all the photos from the iPhone 3GS launch. Read more »

    -- posted by Staff

  • Chris Duckett Microsoft misses the Outlook point

    Ask designers which mail program is the bane of their existence, and you'll find that Outlook tops the list. The reason why the most popular email reader is also the most painful is simple: it uses Word to render HTML emails. Read more »

    -- posted by Chris Duckett

What's on?