How to Make a Slide Show Using HTML+TIME Transitions

Internet Development Index

This tutorial shows you how to create a slide show where each slide transitions into view when the user clicks a "back" or "forward" button. Some scripting is used to transition the appropriate slide into view when the user clicks a button. This is an example of integrating scripting with HTML+TIME (Timed Interactive Multimedia Extensions) transitions to make applications utilizing transitions more dynamic. Click the following Show Me button to see the slide show that we create in this tutorial.

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Prerequisites
A Quick Look At The Code
Setting the Stage
Setting Up the Slides
Setting Up the Buttons
Setting Up the Function
Related Topics

Prerequisites

This article assumes you know how to use Introduction to DHTML Behaviors, specifically, the time2 behavior of HTML+TIME. This article does not go into great detail on how to add a behavior to your page nor does it cover how to declare a namespace and use custom tags, as required by the time2 behavior. These topics are covered in the HTML+TIME Overview and Spice Up Your Web Pages with HTML+TIME. It is advisable to have some understanding of HTML+TIME transitions; for an overview, see Using HTML+TIME Transitions. In addition, you are expected to be familiar with Dynamic HTML (DHTML).

A Quick Look At The Code

To start, have a quick look at the code of the entire sample. Later on, we explain this code in greater detail, but for now, it might be useful to have a preview of what is needed to make the tutorial sample.

<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Slide Show Using HTML+TIME Transitions</TITLE>
<STYLE>
.time    {behavior: url(#default#time2);}
#oDiv1
{
font-size:28pt;
font-family: arial;
font-weight:bold;
color: #000000;
background-color: #ffffcc;
border:3px solid gold;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px
}
#oDiv2
{
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #e4e4e4;
border:3px solid #666666;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px;
color:red
}
#oDiv3
{
color: white;
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #3366CC;
border:3px solid #666666;
padding: 20;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
}
</STYLE>
<SCRIPT>
function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
// Loop below sets all DIVS to low z-index.
for(j=0; j<ColLength; j++)
{
divCollection(j).style.zIndex = 0;
}
// Last DIV is set to next highest z-index.
divCollection(i).style.zIndex = 1;
// The DIV that is to transition in is set to highest z-index.
divCollection(next).style.zIndex = 2;
var transitionFilterCol = divCollection(next).childNodes;
var nextTransitionFilter = new Object();
// Create a reference to the next TRANSITIONFILTER.
nextTransitionFilter = transitionFilterCol(0);
var nextDiv = new Object();
// Create a reference to the next DIV.
nextDiv = divCollection(next);
// Begin the next transitionFilter.
nextTransitionFilter.beginElement();
// Begin the next DIV
nextDiv.beginElement();
break;
}
}
}
</SCRIPT>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">
<BODY>
<DIV ID="oWrapperDiv">
<DIV ID="oDiv1" CLASS="time" STYLE="z-index:2">
<t:TRANSITIONFILTER ID="oTran1" BEGIN="indefinite" TYPE="ellipseWipe" DUR="1"/>
The First One
</DIV>
<DIV ID="oDiv2" CLASS="time" BEGIN="indefinite" STYLE="z-index:1">
<t:TRANSITIONFILTER id="oTran2" BEGIN="indefinite" TYPE="fanWipe" DUR="1"/>
The Second One
</DIV>
<DIV ID="oDiv3" CLASS="time" BEGIN="indefinite" STYLE="z-index:0">
<t:TRANSITIONFILTER ID="oTran3" BEGIN="indefinite" TYPE="pushWipe" DUR="2"/>
The Last One
</DIV>
</DIV>
<BUTTON ID="oForward" onclick="fnGo('forward');" STYLE="position:absolute; top:460;left:100;">Forward</BUTTON><br>
<BUTTON ID="oForward" onclick="fnGo('back');" STYLE="position:absolute; top:460;">Back</BUTTON><br>
</BODY>
</HTML>

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Much of the preceding code is inside of the STYLE block. This formatting code is important for this sample to render correctly but is separated from the functional elements for clarity. The rest of the code consists of the elements that are part of the slide show and one Microsoft JScript?function that provides the slideshow functionality. This tutorial walks through each of the following steps to create the sample.

Write the miscellaneous code needed for the sample to work properly.
- Write the code that is needed to instantiate the HTML+TIME behavior.
- Write the formatting code that will be needed by the menu in a STYLE tag.
Create the DIV elements that are the slides in the sample.
Create the buttons that control when to transition from one slide to the next.
Create the function that facilitates the transition from one slide to the next.

Setting the Stage

To use HTML+TIME elements and use the time2 behavior, the following code is needed.

<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time    {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>

For more information about creating an XML namespace and referencing the time2 behavior, see Authoring HTML+TIME.

Next, we add the formatting code inside of the STYLE tags. All of the elements in this sample derive their formatting from here. By separating formatting code from rendered elements, the functional code is simplified.

<STYLE>
.time    {behavior: url(#default#time2);}
#oDiv1
{
font-size:28pt;
font-family: arial;
font-weight:bold;
color: #000000;
background-color: #ffffcc;
border:3px solid gold;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px
}
#oDiv2
{
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #e4e4e4;
border:3px solid #666666;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px;
color:red
}
#oDiv3
{
color: white;
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #3366CC;
border:3px solid #666666;
padding: 20;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
}
</STYLE>

Setting Up the Slides

The slides of this sample consist of three DIV elements that are absolutely positioned over one another. Each of these DIV elements have t:TRANSITIONFILTER elements applied to them to transition the DIV elements into view. All of these DIVs are contained within the oWrapperDiv?B>DIV element.

<DIV ID="oWrapperDiv">
<DIV ID="oDiv1" CLASS="time" STYLE="z-index:2">
<t:TRANSITIONFILTER ID="oTran1" BEGIN="indefinite" TYPE="ellipseWipe" DUR="1"/>
The first one
</DIV>
<DIV ID="oDiv2" CLASS="time" BEGIN="indefinite" STYLE="z-index:1">
<t:TRANSITIONFILTER id="oTran2" BEGIN="indefinite" TYPE="fanWipe" DUR="1"/>
The Second One
</DIV>
<DIV ID="oDiv3" CLASS="time" BEGIN="indefinite" STYLE="z-index:0">
<t:TRANSITIONFILTER ID="oTran3" BEGIN="indefinite" TYPE="pushWipe" DUR="2"/>
The last one
</DIV>
</DIV>

Since the elements are activated dynamically, the BEGIN attributes are set to indefinite. All of these DIVs have an assigned zIndex such that the first DIV is rendered on top of the other two.

Setting Up the Buttons

The buttons control which slide is displayed by activating the fnGo() function.

<BUTTON ID="oForward" onclick="fnGo('forward');" STYLE="position:absolute; top:460;left:100;">Forward</BUTTON><br>
<BUTTON ID="oForward" onclick="fnGo('back');" STYLE="position:absolute; top:460;">Back</BUTTON><br>

Let's take a look at the sample so far. Right now, the layered DIV elements inside of the container DIV are rendered with the first DIV on top of the other two. The slide show control buttons are rendered also. However, clicking the buttons causes an error because the buttons call the fnGo() function that you have not created yet. This function provides the functionality of the slide show. The next section walks you through the creation of this function.

<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Sample</TITLE>
<STYLE>
.time    {behavior: url(#default#time2);}
#oDiv1
{
font-size:28pt;
font-family: arial;
font-weight:bold;
color: #000000;
background-color: #ffffcc;
border:3px solid gold;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px
}
#oDiv2
{
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #e4e4e4;
border:3px solid #666666;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px;
color:red
}
#oDiv3
{
color: white;
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #3366CC;
border:3px solid #666666;
padding: 20;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">
<BODY>
<DIV ID="oWrapperDiv">
<DIV ID="oDiv1" CLASS="time" STYLE="z-index:2">
<t:TRANSITIONFILTER ID="oTran1" BEGIN="indefinite" TYPE="ellipseWipe" DUR="1"/>
The First One
</DIV>
<DIV ID="oDiv2" CLASS="time" BEGIN="indefinite" STYLE="z-index:1">
<t:TRANSITIONFILTER id="oTran2" BEGIN="indefinite" TYPE="fanWipe" DUR="1"/>
The Second One
</DIV>
<DIV ID="oDiv3" CLASS="time" BEGIN="indefinite" STYLE="z-index:0">
<t:TRANSITIONFILTER ID="oTran3" BEGIN="indefinite" TYPE="pushWipe" DUR="2"/>
The Last One
</DIV>
</DIV>
<BUTTON ID="oForward" onclick="fnGo('forward');" STYLE="position:absolute; top:460;left:100;">Forward</BUTTON><br>
<BUTTON ID="oForward" onclick="fnGo('back');" STYLE="position:absolute; top:460;">Back</BUTTON><br>
</BODY>
</HTML>

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Setting Up the Function

This function assesses which DIV is currently on top and causes the next DIV to transition in. There is only one parameter for the function that indicates if the next DIV to transition in appears before or after the DIV currently on top.

<script>
function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
// Loop below sets all DIVS to low z-index.
for(j=0; j<ColLength; j++)
{
divCollection(j).style.zIndex = 0;
}
// The DIV that is to transition in is set to highest z-index.
divCollection(next).style.zIndex = 2;
// Last DIV is set to next highest z-index.
divCollection(i).style.zIndex = 1;
var transitionFilterCol = divCollection(next).childNodes;
var nextTransitionFilter = new Object();
// Create a reference to the next TRANSITIONFILTER.
nextTransitionFilter = transitionFilterCol(0);
// Begin the next transitionFilter.
nextTransitionFilter.beginElement();
var nextDiv = new Object();
// Create a reference to the next DIV.
nextDiv = divCollection(next);
// Begin the next DIV
nextDiv.beginElement();
break;
}
}
}
</script>

Stepping Through the Function

First, a collection of the slide show DIV elements are created by accessing the direct child nodes of the container DIV (oWrapperDiv), the length of the collection is determined, and a loop is used to go through each member of the collection
```
function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
.
.
.
}
}
```

An IF statement checks to see if the collection object (divCollection(i)) is the DIV that is currently rendered on top of the other slides.

function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
.
.
.
}
}
}

The direction variable passed as a parameter from the button determines if the variable next is incremented or decremented. This in turn determines if the next higher or next lower member of the collection is the next slide show DIV to transition in.

function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
.
.
.
}
}
}

All of the slide show DIVs are set to a zIndex value of 0, the DIV that is next to transition in is set to the highest zIndex (two) of the slide show DIVs, and the last DIV is assigned the second highest zIndex value (one) of the DIVs. The reason why the last DIV is assigned a zIndex of one is so that this DIV is visible as the next DIV transitions in.

function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
// Loop below sets all DIVS to low z-index.
for(j=0; j<ColLength; j++)
{
divCollection(j).style.zIndex = 0;
}
// The DIV that is to transition in is set to highest z-index.
divCollection(next).style.zIndex = 2;
// Last DIV is set to next highest z-index.
divCollection(i).style.zIndex = 1;
.
.
.
}
}
}

Both the next DIV to transition in and the t:TRANSITIONFILTER that applies to it are begun on the time line using the beginElement method. This is when the transition starts. Note that a reference to the correct t:TRANSITIONFILTER element is retrieved by using the first member of the childNodes collection of that DIV.

function fnGo(direction)
{
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
for(j=0; j<ColLength; j++)
{
divCollection(j).style.zIndex = 0;
}
divCollection(next).style.zIndex = 2;
divCollection(i).style.zIndex = 1;
// Create a collection of the child nodes of the next element
// to transition in.
var transitionFilterCol = divCollection(next).childNodes;
var nextTransitionFilter = new Object();
// Create a reference to the next TRANSITIONFILTER. This
// assumes that the TRANSITIONFILTER is the first child element.
nextTransitionFilter = transitionFilterCol(0);
// Begin the next transitionFilter.
nextTransitionFilter.beginElement();
var nextDiv = new Object();
// Create a reference to the next DIV.
nextDiv = divCollection(next);
// Begin the next DIV
nextDiv.beginElement();
break;
}
}
}

How to Make a Slide Show Using HTML+TIME Transitions

Prerequisites

A Quick Look At The Code

Setting the Stage

Setting Up the Slides

Setting Up the Buttons

Setting Up the Function

Stepping Through the Function

Related Topics