Hi, Need some help here. I have used js,css and html to produce a slideshow. The probelms is it all works really well with IE8, firefox and chrome, but it does not work for IE 7 at all. Can some one point out where has it gone wrong. Thanks. Here are the codes:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Slideshow</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div>
<div id="slider">
<ul>
<li>
<ul id="captions" class="captions">
<li></li></ul>
<img src="C:/Folder/Creek.jpg" width="500" height="300" alt="Creek" />
</li>
<li>
<img src="C:/Folder/Dock.jpg" width="500" height="300" alt="Dock" />
</li>
</ul>
</div>
</div>
</div>
<div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)" style="font-size:7px;">1</li>
<li onclick="slideshow.pos(1)" style="font-size:7px;">2</li>  
<img src="C:/Folder/Pause.gif" style="cursor:pointer" alt="Pause" onclick="slideshowPau.move()"/>
<img src="C:/Folder/Resume.gif" style="cursor:pointer" alt="Resume" onclick="slideshow.move(1)"/>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
var slideshowPau=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:false,
});
</script>
</body>
</html>
css:
body {font:12px Verdana,Arial; color:#555; background:#222 url(images/background.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}
.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:500px; height:3px; padding-right:10px}
.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px; position:absolute; left:620px; top:339px; z-index:1; }
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}
.captions {float:left; list-style:none; height:10px; margin:0px 0px 0px 0px; position:absolute; left:0px; top:0px; z-index:1}
.captions li {float:left; cursor:pointer; padding:10px 10px; background:#666; border:0px solid #999; margin:0 4px 0 0; text-align:left; color:#222; filter:alpha(opacity=00); opacity:0.0; font-weight:bold; color:black}
.captions li:hover {background:#777; border:1px solid #bbb; color:#000;}
li.current{border:1px solid #ccc; background:#888}
JS:
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.slider=function(){
function slide(n,p){this.n=n; this.init(p)}
slide.prototype.init=function(p){
var s=T$(p.id), u=this.u=T$$('ul',s)[0], c=T$$('li',u), l=c.length, i=this.l=this.c=0;
if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
this.a=p.auto||0; this.p=p.resume||0; this.v=p.vertical||0; s.style.overflow='hidden';
for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
if(this.v){;
u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
}else{
u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
}
this.pos(p.position||0,this.a?1:0)
},
slide.prototype.auto=function(){
this.u.ai=setInterval(new Function(this.n+'.move(1,1)'),this.a*1000)
},
slide.prototype.move=function(d,a){
var n=this.c+d, i=d==1?n==this.l?0:n:n<0?this.l-1:n; this.pos(i,a)
},
slide.prototype.pos=function(p,a){
clearInterval(this.u.ai); clearInterval(this.u.si);
var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
t=this.v?p*this.h:p*this.w, d=t>Math.abs(o)?1:-1; t=t*-1; this.c=p;
if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==p?this.s:''}}
this.u.si=setInterval(new Function(this.n+'.slide('+t+','+d+','+a+')'),20)
},
slide.prototype.slide=function(t,d,a){
var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
if(o==t){
clearInterval(this.u.si); if(a||(this.a&&this.p)){this.auto()}
}else{
var v=o-Math.ceil(Math.abs(t-o)*.15)*d+'px';
this.v?this.u.style.top=v:this.u.style.left=v
}
};
return{slide:slide}
}();
there is two error msg shown.
1. 'swfobject' is undefined.
2. Expected identifier, string or number
Pls help. thanks.
Submit an article or tip