8
Hello everyone. If anyone can give me a hand I would be gratefull
Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE from Netscape. IE is ok but the Netscape browser including Firefox and Safari are not working now. Not sure why. The idea is that when you mouseover the arrows the gallery div moves to left and right.
I have changed the script and now the image does move five pixel one way and then stops. The TimeOut does not seem to be working or something is stopping the function from running.
Here it is
<html>
<head>
<title>observationist</title>
<script type="text/javascript">
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "show";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "visible";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "visible";
}
}
function hide(id){
// Netscape 4
if(ns4){
document.layers[id].visibility = "hide";
}
// Explorer 4
else if(ie4){
document.all[id].style.visibility = "hidden";
}
// W3C - Explorer 5+ and Netscape 6+
else if(ie5 || ns6){
document.getElementById(id).style.visibility = "hidden";
}
}
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('swap').src = whichpic.href;
return false;
} else {
return true;
}
}
function moving(){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left-=5
moveid=setTimeout("moving()",50)
}
function stop(){
clearTimeout(moveid)
}
function moving2(id){
if (document.getElementById("slider").style.left<1000 0)
document.getElementById("slider").style.left+=5
moveid2=setTimeout("moving2()",50)
}
function stop2(){
clearTimeout(moveid2)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="obtotalcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bstrip" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')"></div>
<div class="topbar" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')">
<div class="gallery" id="slider" > <img src="images/space.jpg" style="border: solid 0px; visibility:hidden;">
<a href="http://observationist.co.uk/images/mane-1.jpg" onclick="return showPic(this)"><img src="images/mane-1-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-2.jpg" onclick="return showPic(this)"><img src="images/mane-2-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-3.jpg" onclick="return showPic(this)"><img src="images/mane-3-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-4.jpg" onclick="return showPic(this)"><img src="images/mane-4-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-5.jpg" onclick="return showPic(this)"><img src="images/mane-5-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-6.jpg" onclick="return showPic(this)"><img src="images/mane-6-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-7.jpg" onclick="return showPic(this)"><img src="images/mane-7-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-8.jpg" onclick="return showPic(this)"><img src="images/mane-8-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/mane-9.jpg" onclick="return showPic(this)"><img src="images/mane-9-th.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/ponies.jpg" onclick="return showPic(this)"><img src="thumb/ponies.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/snowman.jpg" onclick="return showPic(this)"><img src="thumb/snowman.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/cream-tea.jpg" onclick="return showPic(this)"><img src="thumb/cream-tea.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/masks.jpg" onclick="return showPic(this)"><img src="thumb/masks.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/turrets.jpg" onclick="return showPic(this)"><img src="thumb/turrets.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/wetleaves.jpg" onclick="return showPic(this)"><img src="thumb/wetleaves.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/innerplant.jpg" onclick="return showPic(this)"><img src="thumb/innerplant.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/beachflower.jpg" onclick="return showPic(this)"><img src="thumb/beachflower.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/elephantgod.jpg" onclick="return showPic(this)"><img src="thumb/elephantgod.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/lookather.jpg" onclick="return showPic(this)"><img src="thumb/lookather.jpg" border="0" ></a>
<a href="http://observationist.co.uk/images/templeflowers.jpg" onclick="return showPic(this)"><img src="thumb/templeflowers.jpg" border="0" ></a>
</div>
</div>
<div class="botbarl" >
<img src="images/logo5.jpg" style="border:solid 0px ;">
<br><br><br>
<a href="#" onClick="show('bio'), hide('kamera'), hide('gallery'),hide('placeholder')" >biography</a> <br>
<a href="#" onClick="show('kamera'), hide('bio'),hide('gallery') ,hide('placeholder')" >exhibitions</a> <br>
<a href="mailto:keith@keithdavey.wanadoo.co.uk" >contact</a><br>
</div>
<div class="screen" id="placeholder" style="visibility:visible; vertical-align: middle; border:0px;">
<img src="images/kdavey.jpg" style="vertical-align: middle; border:solid #aaaaaa 10px;" id="swap">
</div>
<div class="screen" id="gallery" style="background-image:url(images/kdavey.jpg); background-repeat: no-repeat; border:solid 10px #aaaaaa;" >
<p class="gallerytext">To scroll through the thumbnail pictures place your mouse
over the arrows, or use the scrollbar at the bottom of the screen. <br>
<br>
Click on the thumnail to see a larger version of the image. Keep your mouse
over the chosen image, until veiwed. </p>
</div>
<div class="screen" id="bio" style="background-image: url(images/portrait.jpg);background-repeat: no-repeat;" >
<p class="biotext"> Keith was part of The Pimlico Arts and Media Scheme. His
work is shown in galleries and art spaces throughout London. He is a contributor
to TimeOut, and his work is regularly published in QXmagazine. His imagery
is frequently used by London based clubwear manufacturer 'Regulation' in many
of their major advertising campaigns. </p>
</div>
<div class="screen" id="kamera" style="background-image: url(images/exhibitions-2.jpg);background-repeat: no-repeat;" >
<p class="extext"> <span style="color:000000; font-size:15px">'Shop Girls'<br>
The Box throughout July 2006<br>
32-34 Monmouth Street, Seven Dials, Covent Garden</span><br>
<a style="color:000000; font-size:15px" href="http://maps.google.com/maps?q=WWW.BOXBAR.COM+None.&sll=51.513804,-0.127491&spn=0.009197,0.019834&sspn=0.009681,0.020 878&num=1&start=0&hl=en">
map</a> <br>
<br>
'Shop Girls'<br>
The Blue Room May 2005 ~ June 2005<br>
3, Bateman st. Soho London<br>
<br>
'Shop Girls'<br>
The Green March 2005 ~ April 2005<br>
74, Upper st. Islington London N1<br>
<br>
'Leche-Vitrines'<br>
Freedom Soho Dec 2004 ~ Feb.2005<br>
66, Wardour st. London W1F 0TA<br>
<br>
</p>
</div>
<div class="arr" onMouseOut="stop()" onMouseOver="moving(),show('placeholder'),hide('ga llery'),hide('bio'),hide('kamera')" >
<img src="images/rightarrow.gif" >
</div>
<div class="arl" onMouseOut="stop2()" onMouseOver="moving2(),show('placeholder'),hide('g allery'),hide('bio'),hide('kamera')" >
<img src="images/leftarrow.gif">
</div>
</body>
</html>
