468,507 Members | 1,586 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,507 developers. It's quick & easy.

DHTML moving an image

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>
Sep 6 '07 #1
10 6108
epots9
1,351 Expert 1GB
i was able to get it working in firefox, you have mixed up your semi-colons with commas.

yours:
[html]
<div class="topbar" onMouseOver="show('placeholder'),hide('gallery'),h ide('bio'),hide('kamera')" onMouseOut="hide('placeholder'),show('gallery')">
[/html]

should be:
[html]
<div class="topbar" onMouseOver="show('placeholder');hide('gallery');h ide('bio');hide('kamera');" onMouseOut="hide('placeholder');show('gallery');">
[/html]

you have to change all of them and your code will work.

good luck
Sep 6 '07 #2
Hey thanks for a quick response.

I tried swapping over the commas for the colons but doesnt do anything.. Maybe you have a different version of firefox ?? Or maybe I have done something to the JS in the meantime. Could I trouble you to take a second look and maybe past me what you have which works in firefox. I was hoping you were right and it was a simple solution, but has not made any difference.

Thanks Chris
x


<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(){
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>
Sep 6 '07 #3
epots9
1,351 Expert 1GB
i went to the site where you are linking your images from and its working...firefox 2.0.0.6
Sep 6 '07 #4
Sorry but I dont understand that

You went to the site where I am linking my images from ?? surely that is a different script ?? That should work in Safari but is not working in my version of firefox. Mine is 1.07 I think.

But my problem is that this script will not work with netscape firefox and safari at the same time. Maybe I should try some later versions of the browsers. Still it is crap if it is not working in some browsers.

So have you gone to my original files ??? The images are kept with my other files for running the site. Not sure what you are saying here.

Chris
x
Sep 6 '07 #5
epots9
1,351 Expert 1GB
u need to update,
firefox 2
ie 7

for ie the lowest version for support i've seen is ie6 and anything below is ignored.

with WC3 standardizing the web, old browser will not function properly.
Sep 6 '07 #6
Hello again

Have updated to Firefox 2 but still not working.

Maybe you could paste me the script you have which works with firefox 2 then I can put them together and see if that works.

Chris
x
Sep 6 '07 #7
epots9
1,351 Expert 1GB
is this page live? is this the url "http://observationist.co.uk"?
Sep 6 '07 #8
No the page is not live. The URL is http://observationist.co.uk but as I say that will take you to a script which will then direct you to another script for safari , netscape, firefox. That script is not working.

The one I have pasted here is the one I am trying to make work, the one I have changed commas for colons in and the one I am trying to modify to get it to work.

Dont understand why you refered back to the live script. In anycase neither seem to be working to me even in firefox 2

I would like to see the code which you got working. I have requested it twice, it would help I think to see that. Are you sure it is working ??

anyhow thanks for the chat it is nice to not feel alone with the problem.

Chris
x
Sep 6 '07 #9
epots9
1,351 Expert 1GB
all i did was change to semi-colons and it stopped reporting javascript errors, but since i don't have the images locally they still don't show.
Sep 6 '07 #10
Oh I see now.

I will put the file up.

This is the URL for the new text with colons but in situ.

http://observationist.co.uk/indexN2.html#

still does not work on my machine.

Chris
x
Sep 6 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

By using this site, you agree to our Privacy Policy and Terms of Use.