by Jan Verhoeven, modified 15 August 2002
This article describes how you can use Internet Explorer 5.5+ for slide show presentations. It contains several improvements to the original articles.
Live demo, or download the zipped files (3kb)
First you must know how to get IE in full screen mode. When you press F11 you still get the toolbar at the top. To hide also the toolbar right-click auto-hide to hide the toolbar. When you move with the mouse near the top of the screen the toolbar will automatically show itself again. To get back from full screen mode to normal mode you press F11 again.
What do we need for a slide show:
My first thought was to implement the click behavior in a behavior component (*.htc). This worked fine as long as I did not use page transitions.
Therefore I did put the required functions in a seperate file: slidefunctions.js
// slide functions
function nextslide() {
var tmp,
i
i=indexOfSlide()
if (i==-1)
return
if (i==(slides.length-1)) {
goslide(0)
}
else
{
goslide(i+1)
}
}
function previousslide()
{
var tmp, i
i=indexOfSlide()
if (i==-1)
return
if (i==0)
{
goslide(slides.length-1)
}
else {
goslide(i-1)
}
}
function
goslide(value) {
var atom
if ((value>=0) && (value<slides.length)) {
atom=slides[value].split(';')
window.navigate(atom[0])
}
}
function firstslide()
{
goslide(0)
}
function
lastslide() {
goslide(slides.length-1)
}
function
indexOfSlide() {
var tmp, i, L,
atom
//alert(slides[0])
tmp=document.URL
i=tmp.lastIndexOf('\\')
if
(i==-1) {
// allow for on-line
and off-line use
i=tmp.lastIndexOf('/')
}
tmp=tmp.substr(i+1)
L=slides.length
for
(i=0;i<L;i++) {
atom=slides[i].split(';')
if
(atom[0]==tmp) {
return
i
}
}
return -1
}
function
popup() {
event.returnValue=false;
popmenu.innerHTML=slideHTML()
popmenu.style.pixelLeft=event.clientX-5
popmenu.style.pixelTop=event.clientY-5
popmenu.style.display='block'
popmenu.focus()
}
function hidemenu() {
popmenu.style.display='none'
event.cancelBubble=true
}
function slideHTML() {
var
atom
var tmp=""
for (i=0;i<slides.length;i++) {
atom=slides[i].split(';')
sref=atom[0]
if (atom.length>1)
{
sname=atom[1]
}
else { sname=atom[0] } tmp += "<a href='"+sref+"'>"+sname+"</a><br>"
}
return tmp
}
function popkey(){
if (event.keyCode==27) {
popmenu.style.display='none'
event.returnValue=false;
}
event.cancelBubble=true
}
function keycontrol() {
var
key
key=event.keyCode
switch(key)
{
case 32: nextslide(); break
// space
case 13: nextslide(); break //
enter
case 39: nextslide();
break // right
case 37: previousslide(); break // left
case
36: firstslide(); break //
home
case 35: lastslide();
break // end
}
event.returnValue=false;
}
function init() {
document.body.insertAdjacentHTML("afterBegin","<div id='popmenu'
class='popup' onclick='hidemenu()'
onkeydown='popkey()'></div>")
document.onclick=nextslide
document.onkeydown=keycontrol
document.oncontextmenu=popup
if (autorun) {
window.setTimeout("nextslide()",autotime)
}
}
Every slide links to slidefunctions.js and has a body onload event that is hooked to the init() function as shown below.
<html><head><title>IE based Presentations</title>
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
<LINK href="slides.css" type="text/css" rel="stylesheet">
<script language="javascript" src="slidelist.js"></script>
<script language="javascript" src="slidefunctions.js"></script>
</head>
<body scroll='no' onload='init()'>
</body></html>
Internet Explorer allows you to define your own context menu. You can suppress the default context menu in the onContextMenu handler of the body. This is done in the init() function. In the popup function we dynamically build the menu using the entries in the slidelist.js. So whenever you right-click in a slide you can choose from the list of slides.
Using the mouse all the time can lead to RSI. That is why every program should allow for keyboard control. I have included some key hooks, allowing you to press space, enter or right to advance to the next slide, left to go the the previous slide, home to go to the first slide and end to go to the last slide. In the popup menu you can press the ESC key to close the menu.
Although it is possible to give each slide page an attribute defining the next slide, this would not be a good idea. Each time we change the order of the slides we have to modify the pages. That is why we store the slidelist in a javascript array called slides. This array is loaded from the slidelist.js file:
var autorun=false
var autotime=5000
var slides = new Array()
// every entry has the form
// slide[N]='url;link text'
slides[0]='presentations.html;start'
slides[1]='slide6.html;Keyboard control'
slides[2]='slide2.html;page transitions'
slides[3]='slide3.html;AutoRun'
slides[4]='slide4.html;VML'
slides[5]='slide5.html;Context Menu'
One of the nice things with presentation programs is that the size of the content automatically adjusts itself to the size of the screen. As of Internet Explorer 5 you can do this using IE as well. The key to the solution is dynamic properties. In our stylesheet we can define the size of a font as a function of the client area. Have a look at the style sheet I used:
body {background-color:black}
a {text-decoration:none;
color:#FFFFCC;}
a:visited {color:#FFFFCC;}
a:hover {text-decoration:underline;}
.heading {
font-family:times new roman;
font-style:italic;
font-size:expression(document.body.clientHeight*0.15);
color:gold;
text-align:right
}
.item {
margin-left:expression(document.body.clientWidth*0.1);
font-family:verdana;
font-size:expression(document.body.clientHeight*0.08);
color:#FFFFCC
}
b.bullet {
font-family:wingdings;
font-size:expression(document.body.clientHeight*0.05);
color:gold
}
.fade {
position:absolute;
width:100%;filter:DXImageTransform.Microsoft.RevealTrans(transition=5);
}
As you can see, I have specified an expression to define font-size and margins.
Now we can make or slides. The slides or normal HTML pages:
<html><head><title>IE based Presentations</title>
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
<LINK href="slides.css" type="text/css" rel="stylesheet">
<script language="javascript" src="slidelist.js"></script>
<script language="javascript" src="slidefunctions.js"></script>
</head>
<body scroll='no' onload='init()'>
<p class='heading'>IE Presentations</p>
<p class='item'><b class='bullet'>l</b>Easy to create</p>
<p class='item'><b class='bullet'>l</b>Use all IE features</p>
<p class='item'><b class='bullet'>l</b>No extra software required</p>
<p class='item'><b class='bullet'>l</b>Uses javascript library</p>
</body></html>
Note the scroll='no' attribute of the body tag. This makes sure that we don't see a disturbing scrollbar. The page itself is very simple:
Internet Explorer 5.5+ allows you to apply a whole range of different page transitions.
We can apply a page transitions with a META tag in de header of the page:
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
It is also possible to apply a transition effect when you exit the page:
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
See IE page transitions for a summary of the available effects.
It is possible to create slide shows for Internet Explorer within minimum effort.
Using BackEdit 10 you can use a page wizard to generate new slides and have the slidelist.js automatically updated.
Using a program like Dreamweaver you can use templates as a bases for new slides.