Browser compatible scrolling clickable book covers

Summary: iPhone users can't see Flash. I built a simple animated scrolling script using the HTML marquee tags so iPhone users can see and click on my book covers, banners and text.

I've been an iPhone user for a couple years now. It bums me out when I see heavy Flash-enabled websites because they don't look good on my iPhone. Keeping this in mind, we've tried to do things around toddrwrite.com that involve limited Adobe Flash usage.



With the release of my debut novel Fresh Flesh and a new Halloween-themed collection of stories called Flash O'Lantern, I now have three books. I wanted one of those cool scrolling book widgets and found one on Amazon on toddrwrite.com. The only problem is that the widget uses Flash.



So I put on my geeky hat and poked around HTML to see what I might be able to build to emulate those cool scrolling book widgets. Something quick and simple that would work in the most common browsers: Internet Explorer, Firefox, Safari and on the iPhone. The answer?



The MARQUEE tag.



If you are reading this blog post in your reader, then you won't see the marquee, so here's a YouTube video (sorry about my jittery video hand) I shot showing how it works:







How to build your own scrolling book covers

Anything put between the marquee tags will scroll which means you can create HTML and then add marquee tags around it. Voila! You're done. Here's the syntax for the marquee tag with Javascript so that when users hover over it with their mouse the scrolling stops and then restarts when the mouse leaves (note: if the user has Javascript turned off, this functionality won't work):

<marquee behavior="scroll" direction="left" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();">

Everything after this tag will scroll until the marquee closing tag:

<marquee/>

Notes: the only cross-browser compatible behavior's is "scroll" so no need to use anything else.



direction

left - as shown above, this scrolls the contents from left to right

right - scrolls contents from right to left

up - scrolls contents vertically from bottom to top

down - scrolls contents vertically from top to bottom



scrollamount

This controls how fast the contents scroll from left to right. Suggest you something under '10' or the scrolling contents will move too fast.



Are you third party hosted?

Flash is a good workaround for sites when you can't use your own HTML, like on third party hosted blogs (Blogger and wordpress.com). The MARQUEE solution won't work on a third party hosted site that doesn't allow using your own HTML and Javascript. In that unmodded iPhone users like myself will have to continue to go without.



MARQUEE obsoleted in HTML5

For any purists who might be reading, yes, unfortunately the marquee tag has been obsoleted in HTML5, but that doesn't mean the code above won't continue to be supported in common browsers for a long time. What should you use instead of marquee in HTML5 if you don't want to worry about obsolete code? Full Javascript scrolling is actually preferred since it allows you to much more complex animations. Here's a Javascript marquee script that might be a good start in that journey.