Howdy . . . putting together an online portfolio, and I wrote a nifty little controllable slideshow to show off my images -- ok, it's actually ugly, but it works! In IE, that is. In Firefox, it won't show up at all, even a little bit. I've tried every flippin' permutation I can, but to no avail. The placement of the JavaScript might seem tortuous, but it's there so it can be wrapped inside a php script that's pulling the images, and it works perfectly in Internet Explorer. Here's the relevant code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="minmax.js"></script>
<link href="port.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="graphicdesigns_wrap">
<div class="verd14" id="right_wrap">
<div id="slideshow"><img src="images/spacer.gif" width="1" height="200" align="left" /><a href="images\graphicdesigns_image_processor.php?id=1" target="_blank"><img src="images\graphicdesigns_thumbnail_processor.php?id=1" border="0" /></a><br clear="all"/><img src="images\slideshow\click_to_open.gif" border="0" width="260" height="19" /><br /><a href="#" onclick="moveslide('forward',1)"><img src="images\slideshow\next_image.jpg" border="0" width="94" height="20" /></a><br /><a href="#" onclick="moveslide('backward',1)"><img src="images\slideshow\previous_image.jpg" border="0" width="94" height="20" /></a></div>
<script type="text/javascript">
function moveslide (direction,runningtotal) {
var picnumber=runningtotal;
if (direction = "forward") {
picnumber++; }
else {
picnumber--;}
if (picnumber < 1 || picnumber >41) {
picnumber=1;}
document.getElementById('slideshow').innerHTML='<img src="images/spacer.gif" width="1" height="200" align="left" /><a href="images/graphicdesigns_image_processor.php?id=' + picnumber + '" target="_blank"><img src="images/graphicdesigns_thumbnail_processor.php?id=' + picnumber + '" border="0" /></a><br clear="all"/><img src="images/slideshow/click_to_open.gif" border="0" width="260" height="19" /><br /><a href="#" onclick="moveslide(\'forward\',' + picnumber + ')"><img src="images/slideshow/next_image.jpg" border="0" width="94" height="20" /></a><br /><a href="#" onclick="moveslide(\'backward\',' + picnumber + ')"><img src="images/slideshow/previous_image.jpg" border="0" width="94" height="20" /></a>';}
</script></div>
</div>
</body>
</html>
The CSS called in the script is here:
Code:
#graphicdesigns_wrap{
position:absolute;
top:0px;
background:#FFFFFF;
width:100%;
height:100%;
margin:0px auto;
text-align:left;
background-image:url(images/structure/graphicdesigns_bak.jpg);
background-position: top right;
background-repeat: no-repeat;
max-width:900px;
min-width:800px;
z-index:auto;
}
#right_wrap{
position:relative;
top:85px;
right:260px;
width:260px;
height:600px;
margin:0px;
padding-top:0px;
text-align:left;
float:right;
background-color:transparent;
}
Any ideas?
Linear Mode
