hidden/visible divs [JavaScript]

From: reikoshea on 18 Apr 2006 20:06

okay ive been working at this for probably 4 hours now, and I (not to
mention my boss) am pretty upset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script src="AC_RunActiveContent.js" language="JavaScript"
type="text/javascript"></script>
<script src="AC_Flash.js" language="JavaScript"
type="text/javascript"></script>
<script>
function show0(){
document.getElementByID('shift').style.visibility = 'visible';
}
function hide0(){
document.getElementByID('shift').style.visibility = 'hidden';
}
function show1(){
document.getElementByID('flash').style.visibility = 'visible';
}
function hide1(){
document.getElementByID('flash').style.visibility = 'hidden';
}
function doTimer() {
var timeout
timeout = setTimeout("show1();hide0();", 30000);
}

function changePic(newContent) {
document.images['main'].src = newContent;
show0()
hide1()
window.cleartimout(timeout)
doTimer()
}
</script>
</head>

<body>
<div style="position:absolute;top:0px;left:0px;visibility:hidden;"
id="shift"> <img src="pics/dvd.jpg" width="300" height="220"
name="main"> </div>
<div style="position:absolute;top:0px;left:0px;visibility:visible;"
id="flash">
<noscript>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="300" height="220">
<param name="movie" value="shift.swf">
<param name="quality" value="high">
<embed src="shift.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="300"
height="220"></embed></object>
</noscript>
<script language="JavaScript" type="text/javascript" >

</script>
</div>
</body>
</html>

The function is called from a parent frame. When a user clicks on a
thumbnail, the shift.swf (rollover animation) movie is supposed to
become invisible and the new image should take its place. After 30
seconds, it should revert back to the way it was until another change
function is called.

Its really depressing cause i know the fix is going to be something
very simple.

From: Richard Cornford on 18 Apr 2006 20:32

reikoshea(a)gmail.com wrote:
> okay ive been working at this for probably 4 hours now,
> and I (not to mention my boss) am pretty upset.
<snip>

> The function

Which function? (I see six, and two imported JS files (presumably full
of functions themselves)).

> is called from a parent frame.

So there is more HTML and script that is not shown. That means that
this cannot be tested to determine how it behaves in any environment.
Though it probably could not be tested anyway as the swf files, images
and eternal javascript files would be needed to do that. This is
probably a case where providing the URL on an online example of this
problem would be most appropriate.

> When a user clicks on a thumbnail, the shift.swf (rollover
> animation) movie is supposed to become invisible and the new
> image should take its place. After 30 seconds, it should
> revert back to the way it was until another change
> function is called.

That is what it is supposed to do, but what does it actually do? Are any
errors generated?

> Its really depressing cause i know the fix is going to be
> something very simple.

No reproducible demonstration of the issue, no description of symptoms.
The best responses you are likely to get will be random wild guesses;
mine is javascript pseudo-protocol HREFs. Simple to fix but an example
of pure coincidence if they are even relevant ;-)

Richard.

From: Scott on 18 Apr 2006 20:35

getElementByID should be getElementById note the lowercase D in Id. I
also change visibility to display note the differences. Here is some
very simple code that works after 3 seconds but only once...

<html>
<head>
<title></title>
<script type="text/javascript">

function HideIt(){
document.getElementById('shift').style.display = 'inline';
document.getElementById('flash').style.display = 'none';
}

function ShowIt() {
document.getElementById('shift').style.display = 'inline';
document.getElementById('flash').style.display = 'none';
}

function doTimer() {
var timeout
timeout = setTimeout("ShowIt();", 3000);
}

</script>
</head>
<body onload=doTimer()>
<div style="display:none;" id="shift">SHIFT</div>
<div style="display:inline;" id="flash">FLASH</div>
</body>
</html>

From: Reiko on 18 Apr 2006 21:19

yeah....i knew this would be something simple. Lower case D. Thats
all it took. Works exactly how i wanted it to...now to add netscape
and older IE versions.

I guess ive just typed it so many times that when i copy and pasted it
5 times it should have been right the next 5 times. I know this
mistake wont happen again...

Thanks for the help. :)

From: Tony on 19 Apr 2006 12:47

reikoshea(a)gmail.com wrote:
> okay ive been working at this for probably 4 hours now, and I (not to
> mention my boss) am pretty upset.

Post a link - you'll get better results that way.
http://jibbering.com/faq/#FAQ2_3
http://jibbering.com/faq/#FAQ2_4

|
Pages: 1
Prev: setTimeout
Next: Syntax questions