
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML Fading Slide Show

Article by:

Premshree Pillai (8/19/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

This JavaScript creates a slide-show effect displaying different contents dynamically. The content fades in while being displayed

Viewed: 21730 times

Rating (3 votes):

5 out of 5

Rate this Article

Read Comments

Post Comments

DHTML Fading Slide Show

View Live Demo

This JavaScript creates a slide-show effect displaying different contents dynamically. The content fades in while being displayed.

The script is extremely customisable. You can add any number of messages. You can also change the delay between different messages. You have an option to loop the messages continuosly. You also have an option to Autostart fading or onClick. View the source for customisation details.

This version (v 2.0) supports IE, Netscape 4.x and Netscape 6.x.

To use the script just copy the <SCRIPT> section of the source of the page and paste it wherever you need it on your web page.

Select All Code


<!--BEGIN FADING DYNAMIC CONTENT SCRIPT-->
<script language="javascript">

// Use Freely as long as following messages are intact ::
//---------------------------------------------------------------
// Fading Dynamic Content JavaScript v 2.0                      |
//    Made minor changes, Works on IE and NS6                   |
//    Added support for NS4                                     |
//    Added option to AutoStart on load or onClick              |
// This script written and © 2002 Premshree Pillai.             |
// All rights reserved.                                         |
// Created on : 28/04/02                                        |
// Modified on : 11/05/02                                       |
// Web : http://www.qiksearch.com/                              |
// Mail : premshree@hotmail.com                                 |
// FREE JavaScripts at http://www.qiksearch.com/javascripts.htm |
// v 2.0 - Now supports NS4                                     |
// v 1.2 - Option to Autostart on load or click to start        |
// v 1.1 - Supports IE and NS6, option to loop continuosly      |
// v 1.0 - Fading Dynamic Content                               |
//---------------------------------------------------------------
// Location of script : http://www.qiksearch.com/javascripts/fading-dynamic-content20.htm

//--------------------------------------CUTOMISE----------------------------------------------

var qiksearch_js_text = new Array ("Fading Dynamic Content", "by Premshree Pillai", "You can even add<br>multiple lines and Images too...", "www.qiksearch.com");
   // The Fading Contents, HTML Tags supported
var qiksearch_space_width = 390; // The width of the content space
var qiksearch_space_height = 50; // The height of the content space
var qiksearch_space_borderw=3; // Border width
var qiksearch_space_borderc="#FF9900"; // Border Color
var timeOutVal=150; // Delay in milliseconds
var isLoop=true; // If you want to loop continuosly then true, else false
var isAutoStart=true; // If you want the Fading to start else you have to click to start
var qiksearch_js_text_static='<a href="javascript:resetAll();writeDiv();" style="text-decoration:none" accesskey="l"><font color="#808080" face="verdana,arial,helvetica" size="-1"><b>C<u>l</u>ick to Start</b></font></a>'; // The default content if AutoStart false

//--------------------------------------------------------------------------------------------

//-----------------------------DO-NOT-MODIFY-BELOW-THIS---------------------------------------

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;
var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
var ns4=document.layers;
var qiksearch_DyObj;
var qiksearch_space_ns4_left=(screen.width/2-20)-Math.round(qiksearch_space_width/2);

function setDyObj()
{
 if(ie4)
 {
  qiksearch_DyObj=document.all.qiksearch_js_space;
 }
 if(ns6)
 {
  qiksearch_DyObj=document.getElementById("qiksearch_js_space");
 }
}

if(ie4||ns6)
{
 document.write('<table width="' + qiksearch_space_width + '" height="' + qiksearch_space_height + '" style="background:#FFFFFF; border:' + qiksearch_space_borderw + 'px solid ' + qiksearch_space_borderc + '"><tr><td align="middle">');
 document.write('<div id="qiksearch_js_space">');
 document.write('</div>');
 document.write('</td></tr></table>');
}

var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';
var colorVal=15;
var div_count=0;

function qiksearch_fade_desat(getColorIntVal)
{
 var returnVal;
 if(getColorIntVal>=10)
 {
  for(var i=0; i<=15; i++)
  {
   if((getColorIntVal==i))
   {
    returnVal = eval('def_' + i);
   }
  }
 }
 else
 {
  returnVal=getColorIntVal;
 }
 return(returnVal);
}

function writeDiv()
{
 if(ns4)
 {
  qiksearch_DyObj=document.qiksearch_space_ns4;
 }
 if(ie4||ns6)
 {
  qiksearch_DyObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_js_text[div_count] + '</span></b></font>' ;
 }
 if(ns4)
 {
  qiksearch_DyObj.document.write('<table width="100%" border="1" bordercolor="' + qiksearch_space_borderc + '"><tr><td align="center"><font face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_js_text[div_count] + '</span></b></font></td></tr></table>');
  qiksearch_DyObj.document.close();
 }

 if((colorVal>0)  && (colorVal!=0))
 {
  colorVal--;
 }
 else
 {
  colorVal=15;
  if(div_count<qiksearch_js_text.length)
  {
   div_count++;
  }

  if(div_count==qiksearch_js_text.length)
  {
   if(isLoop)
   {
    setTimeout("resetAll()",timeOutVal);
    setTimeout("writeDiv()",timeOutVal);
   }
   else
   {
    if(ie4||ns6)
    {
     qiksearch_DyObj.innerHTML = qiksearch_js_text_static;
    }
    if(ns4)
    {
     qiksearch_DyObj.document.write('<table width="100%" border="1" bordercolor="' + qiksearch_space_borderc + '"><tr><td align="center">' + qiksearch_js_text_static + '</td></tr></table>');
     qiksearch_DyObj.document.close();
    }
   }
  }

 }

 if(div_count<qiksearch_js_text.length)
 {
  setTimeout("writeDiv()",timeOutVal);
 }
}

function joinColor(getColor)
{
 return (getColor + '0' + getColor + '0' + getColor + '0');
}

function resetAll()
{
 div_count=0;
 colorVal=15;
}

setDyObj();

function start_fader()
{
 if(isAutoStart)
 {
  writeDiv();
 }
 else
 {
  if(ie4||ns6)
  {
   qiksearch_DyObj.innerHTML = qiksearch_js_text_static;
  }
  if(ns4)
  {
   qiksearch_DyObj=document.qiksearch_space_ns4;
   qiksearch_DyObj.document.write('<table width="100%" border="1" bordercolor="' + qiksearch_space_borderc + '"><tr><td align="center">' + qiksearch_js_text_static + '</td></tr></table>');
   qiksearch_DyObj.document.close();
  }
 } 
}

window.onload=start_fader;

if(ns4)
{
 document.write('<layer bgcolor="#FFFFFF" id="qiksearch_space_ns4" width="' + qiksearch_space_width + '" left="' + qiksearch_space_ns4_left + '"></layer>');
}

</script>
<!--END FADING DYNAMIC CONTENT SCRIPT-->

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML Fading Slide Show '

Posted by : Archive Import (Balasubramanian) at 01:26 on Tuesday, August 20, 2002

Amazing! This sure can be used in place of those animated gifs...

Posted by : Archive Import (c) at 10:40 on Friday, September 27, 2002

how do you change text to images?

Posted by : Archive Import (Kimber) at 19:31 on Sunday, October 27, 2002

How do I change text to images?

Posted by : Archive Import (Neil) at 19:52 on Saturday, February 22, 2003

Images? Like this...

var qiksearch_js_text = new Array ("<img src='image1.gif' width='100' height='30' border='0'>", "<img src='image2.gif' width='100' height='30' border='0'>", "<img src='image3.gif' width='100' height='30' border='0'>");

Posted by : Archive Import (fresbee) at 15:33 on Wednesday, March 12, 2003

i tried the script with some images but it doesn't do the fade... any help ?

Posted by : bomdia2u at 07:19 on Sunday, January 21, 2007

Neil thanks for showing us how to include the images in this DHTML script.
The images are changing from one to the next one, without problem, but without the fading effect. So, I am having the same problem as fresbee above. Would you know what can we do to fix this? Thank you.

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	hidden div block when displayed, displays at an offset of 200px only in IE 6..
•	help - sketch
•	Re: Perl Script - File Handling.
•	Open a file from website
•	Re: to open 5 terminals from one and also execute different commands on each terminal
•	read a selected multiple line, those should match some of the values read in the files..
•	Help me please
•	Empty the contents of a file.
•	Month Start, End dates

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article