Hiding and SHowing divs with functions

Forum Moderators: open

Message Too Old, No Replies

Hiding and SHowing divs with functions

cajmilfo

1:03 pm on Jan 29, 2005 (gmt 0)

Hello,
i've got simple question: why is this not functional?
[code snippet]

<!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=windows-1250">
<script language="JavaScript" type="text/JavaScript">

function Hide(str) {
x = document.getElementById(str);
x.style.visbility = 'hidden';
}
function Show(str) {
x = document.getElementById(str);
x.style.visbility = 'visible';
}

</script>
</head>
<body>
<div id="Layer02" style="position:absolute;left:100px;top:100px;visibility:hidden;">Test</div>
<div id="Layer01" style="position:absolute;left:50px;top:50px" onMouseOver="Show('Layer02')" onMouseOut="Hide('Layer02')">Text</div>
</body>
</html>

Cant figure it out. THanks for help.

BonRouge

1:13 pm on Jan 29, 2005 (gmt 0)

I haven't tested it or anything, but it could be because you've spelt 'visibility' wrong twice...

scottmack

4:14 pm on Jan 29, 2005 (gmt 0)

Text needs to be a link.

Bernard Marx

5:59 pm on Jan 29, 2005 (gmt 0)

It's just the "visibility" typo.
Not since Netscape 4 have event handlers needed to be on links.

cajmilfo

3:18 pm on Jan 30, 2005 (gmt 0)

thanks a lot, i've been too quick ;o) it's all functional now.

mcibor

10:14 pm on Jan 30, 2005 (gmt 0)

BTW Welcome to Webmasterworld!

tstaheli

3:53 am on Jan 31, 2005 (gmt 0)

If you want to have your content move:

function Hide(str) {
x = document.getElementById(str);
x.style.visibility = 'hidden';
x.style.position = 'fixed';
}

function Show(str) {
x = document.getElementById(str);
x.style.visibility = 'visible';
x.style.position = 'relative';
}

</script>
</head>
<body>
<div id="Layer01" onMouseOver="Show('Layer02')" onMouseOut="Hide('Layer02')">Text Top</div>
<div id="Layer02" style="visibility:hidden; position: fixed;" onMouseOut="Hide('Layer02')" onMouseOver="Show('Layer02')">Test close</a></div>
<div style="position: relative;">This Moves Up and Down</div>

Seems to work on everything but Safari :(