...

View Full Version : Issues with slideshow and Internet Explorer OK with Firefox



kobyskid
03-17-2009, 09:09 PM
I am having some problems with a webpage I was required to make for a class. Everything works fine in firefox but the teacher will be looking at it in internet explorer. I am utilizing Internet explorer v.7 but when it comes to doing the slideshow it will transition from image to image fine in firefox but when you click the left arrow in internet explorer it won't change pictures. Here is all my coding.


<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 1
Review Assignment

Monroe Public Library
Author: Kristan Washburn
Date: Jan 15, 2008

Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->

<title>Kristan's Webpage</title>
<script type= "text/javascript" src= "calendarclock.js"> </script>
<link href="indexstyles.css" rel="stylesheet" type="text/css" />
<script>
var tick;
function stop() {
clearTimeout(tick);
}
function simpleClock() {
var ut=new Date();
var h,m,s;
var time=" ";
h=ut.getHours();
m=ut.getMinutes();
s=ut.getSeconds();
if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time+=h+":"+m+":"+s;
document.sclock.stime.value=time;
tick=setTimeout("simpleClock()",1000);
}
</script>
</head>



<body>



<BODY onLoad="simpleClock();" onUnload="stop();">

<FORM NAME="sclock">
<p> Time:<INPUT TYPE="text" NAME="stime" SIZE="13"></p>
</FORM>
</head>


<h2>Animal Tracks</h2>
<p id="description">Below you will see a variety of animal tracks found in the snow. These tracks include those of a red fox, snowshoe hare, chickadee, mouse, ruffed grouse, and canadian lynx. See if you can identify which is which.</p>

<p><img name="Photo" id="Photo" src="slide00.jpg" alt="" /></p>
<p>
<a href="Javascript:SlideShow('reverse')" onmouseup= LOut() onmousedown= LIn() >
<img name="LeftArrow" id="LeftArrow" src="lup.gif" alt="" />
</a>
<a href="Javascript:SlideShow('forward')" onmouseup= ROut() onmousedown= RIn()>
<img name="RightArrow" id="RightArrow" src="rup.gif" alt="" />
</a>
<br />
Click the arrows to scroll through a slide show of the different animal tracks.
</p>




</body>
</html>



/* JS for clockpage.htm*/

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

/*JS for calendar*/

function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['January','February','March','April','May','June','July','August','September','October','November',' December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st

var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}


/*JS for slide show*/

var RUp = new Image();
RUp.src= "rup.gif";
var RDown = new Image();
RDown.src = "rdown.gif";
var LUp = new Image();
LUp.src = "lup.gif";
var LDown = new Image();
LDown.src = "ldown.gif";

var Slides=new Array();
Slides[0]=new Image();
Slides[1]=new Image();
Slides[2]=new Image();
Slides[3]=new Image();
Slides[4]=new Image();
Slides[5]=new Image();
Slides[6]=new Image();
Slides[7]=new Image();
Slides[8]=new Image();
Slides[9]=new Image();
Slides[10]=new Image();
Slides[11]=new Image();
Slides[0].src="slide00.jpg";
Slides[1].src="slide01.jpg";
Slides[2].src="slide02.jpg";
Slides[3].src="slide03.jpg";
Slides[4].src="slide04.jpg";
Slides[5].src="slide05.jpg";
Slides[6].src="slide06.jpg";
Slides[7].src="slide07.jpg";
Slides[8].src="slide08.jpg";
Slides[9].src="slide09.jpg";
Slides[10].src="slide10.jpg";
Slides[11].src="slide11.jpg";

function LIn () {
document.images["LeftArrow"].src=LDown.src;
}

function LOut() {
document.images["LeftArrow"].src=LUp.src;
}

function RIn() {
document.images["RightArrow"].src=RDown.src;
}

function ROut() {
document.images("RightArrow").src=RUp.src;
}

var SlideNum = 0;

function TransSlide(direction){
document.images["Photo"].filters[0].motion=direction;
document.images["Photo"].filters[0].apply();
document.images["Photo"].src = Slides[SlideNum].src;
document.images["Photo"].filters[0].play(2);
}

function SlideShow(direction) {
if (direction == "forward") {
SlideNum = (SlideNum == 11) ? 0 : SlideNum+1;
} else {
SlideNum = (SlideNum == 0) ? 11: SlideNum-1;
}
if (document.images["Photo"].filters) {
TransSlide(direction);
}else{
document.images["Photo"].src=Slides[SlideNum].src;
}
}


Thanks for any help in advance.

TinyScript
03-17-2009, 09:20 PM
you didn't include a reference to reverse. instead of else try

if (direction == "reverse") {
SlideNum = (SlideNum == 0) ? 11: SlideNum-1;
}

TinyScript
03-17-2009, 09:23 PM
where's the CSS? I can't tell if it works

TinyScript
03-17-2009, 09:27 PM
OK it works



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum