Archive for the ‘Javascript’ Category

Text Slideshow QuickVersion

Wednesday, August 19th, 2009

1. Cut and paste the first block of code into your html. In your body onload event call CycleQuotes().
2. Cut and paste the javascript into your page or into a .js file
3. Provide your own image files. I use eight of them to cover the four buttons and the four hover states.

<!-- Previous, Pause, Play, Next images -->
<div id="playercontrols">
<img src="previous.png" alt="Previous" onclick="PrevClick()" onmouseover="this.src='previoushover.png'" onmouseout="this.src='previous.png'" />
<img id="pauseimg" src="pause.png" alt="Pause" onclick="PausePlayClick(false)" onmouseover="this.src='pausehover.png'" onmouseout="this.src='pause.png'" />
<img id="playimg" src="play.png" alt="Play" style="display: none;" onclick="PausePlayClick(true)" onmouseover="this.src='playhover.png'" onmouseout="this.src='play.png'" />
<img src="next.png" alt="Next" onclick="NextClick()" onmouseover="this.src='nexthover.png'" onmouseout="this.src='next.png'" />
</div>

<div id="contentContainer">
	<div id="content0" style="display: none;">Text</div>
	<div id="content0" style="display: none;">Slideshow</div>
	<div id="content0" style="display: none;">With</div>
	<div id="content0" style="display: none;">Fades</div>
</div>

(more…)

Posted in Javascript | 2 Comments »

Text Slideshow with Fades (or any content with fades)

Sunday, August 9th, 2009

Quick Version
For my online resume I decided to create a slideshow of recommendations from my coworkers. I wanted this display to be unobtrusive and to fade in and out so that it does not intrude on the visitor’s experience. I included player controls so that those interested in the quotes can toggle through them at their own pace or halt it completely if the animation is annoying. I checked out a few slideshow examples but all of them seemed to lack all the features I wanted. Fade transitions, pause/play/next/previous buttons, and most importantly grabbing my content directly from my page. I don’t want to have a ton of strings hardcoded into my javascript file. We should be using best practices and leaving the content on the page and the javascript just handles manipulation of it. So here is the code and it is of course good for any content, not just quotes.
(more…)

Posted in Javascript, Software Development | 2 Comments »