Closed Thread Icon

Topic awaiting preservation: div visibility problem (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=8994" title="Pages that link to Topic awaiting preservation: div visibility problem (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: div visibility problem <span class="small">(Page 1 of 1)</span>\
 
SBee
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2004

 posted posted 01-18-2004 22:23

Hi I have two problems actually, I'd be happy for insight into either.

#1
I am trying to get a div to show and hide with a mouseOver. I have put a condition in so if it's netscape it does one things, IE another.
It doesn't work in either and i am stumped.

thanks in advance.
S


here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<SCRIPT LANGUAGE=JavaScript>
function show() {
if(Netscape)
document.layername.visibility = "visible";
else
layername.style.visibility = "visible";
}
function hide() {
if(Netscape)
document.layername.visibility = "hidden";
else
layername.style.visibility = "hidden";
}
</script>


<title>Untitled</title>
<meta name="generator" content="BBEdit 7.0.4" />
</head>
<body>

<DIV ID="layername" style="position:absolute; visibility:hidden; left:250px; top:50px;">Content of Layer Here</DIV>


<a href="*" onMouseOver="show();">show my layer</a><br><br>
<a href="*" onMouseOver="hide();">hide my layer</a><br><br>


</body>
</html>

_____________________________________________

#2

having a problem with cross browser div layer visibility. The following works like a dream in Explorer, but not Netscape. The secondary nav does not become visible when you mouse over the main nav. I have read about this and i realize that NN doesn't like 'visible' but prefers 'hide' and 'show' among other things.
is there an easy way to adapt the foloowing to make it work in NN as well? I am mostly concerned with NN5 and up as i know NN4 is another pandoras box of problems...
If there is an easy solution that would be great, it is worth $$ to me, so if you can accept paypal that will be easy...
here is a link: http://www.dev-area.com/browser/index.html

here are snippets of the code:
--------------------------------------
first level nav:

<div id="top1" style="position:absolute; top:22px; left:270px; z-index:1;">
<a class="nav" onMouseOver="closeAll(); changeDiv('divOne','visible'); return true;"><img src="images/about_us.gif" border="0"></a>
</div>


second level nav:

<!-- ABOUT US -->
<div id="divOne" style="position:absolute; top:50; left:25; visibility:hidden;">
<a class="nav" href="why.html" Target="_top"
onMOUSEOVER="changeImages('a_why', 'images/a_why2.gif'); return true;" onMOUSEOUT="changeImages('a_why', 'images/a_why.gif'); return true;">
<IMG NAME="a_why" SRC="images/a_why.gif" border="0"></a>___
<a class="nav" href="news.html" Target="_top"
onMOUSEOVER="changeImages('news', 'images/news2.gif'); return true;" onMOUSEOUT="changeImages('news', 'images/news.gif'); return true;">
<IMG NAME="news" SRC="images/news.gif" border="0"></a>___
<a class="nav" href="jobs.html" Target="_top"
onMOUSEOVER="changeImages('jobs', 'images/jobs2.gif'); return true;" onMOUSEOUT="changeImages('jobs', 'images/jobs.gif'); return true;">
<IMG NAME="jobs" SRC="images/jobs.gif" border="0"></a>
</div>


the script:

var div_array = new Array("divOne", "divTwo", "divThree", "divFour", "divFive", "divSix");
function changeDiv(the_div, the_change)
{
if (document.all)
{
div_string = "window.document.all." + the_div + ".style";
} else if (document.layers) {
div_string = "window.document." + the_div;
}
the_div = eval(div_string);
the_div.visibility = the_change;
}
function closeAll()
{
for (var loop=0; loop < div_array.length; loop++)
{
changeDiv(div_array[loop], "hidden");
}
}
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
a_why2 = newImage("images/a_why2.gif");
news2 = newImage("images/news2.gif");
jobs2 = newImage("images/jobs2.gif");
friends2 = newImage("images/friends2.gif");
green2 = newImage("images/green2.gif");
manufacturing2 = newImage("images/manufacturing2.gif");
view_prod2 = newImage("images/view_prod2.gif");
view_app2 = newImage("images/view_app2.gif");
fabrics2 = newImage("images/fabrics2.gif");
finishes2 = newImage("images/finishes2.gif");
hardware2 = newImage("images/hardware2.gif");
preloadFlag = true;
}
}
ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

 posted posted 01-19-2004 00:33

Here are 2 css solutions:

#1 http://www.meyerweb.com/eric/css/edge/popups/demo.html
#2 http://www.meyerweb.com/eric/css/edge/menus/demo.html


Use code tags for readability, just remove the '*'s

code:
[*code*]your code[/*code*]



[This message has been edited by ninmonkey (edited 01-19-2004).]
norm
Paranoid (IV) Inmate

From: [s]underwater[/s] under-snow in Juneau
Insane since: Sep 2002

 posted posted 01-19-2004 09:02

With out digging to far into your code, I can tell you that your conditional branch for document.layers will never happen unless the clients browser is Netscape 4.x

Modern Netscape browsers DO NOT support layers, so the same code that works for other standards compliant browsers will do just fine.

I usually sniff like this:

code:
if(document.getElementById &#0124; &#0124; document.all){

    

    doSomeReallyCoolStuff();



}

else{

   doSomeLameNetscape4Stuff()

}





/* Sure, go ahead and code in your fancy IDE. Just remember: it's all fun and games until someone puts an $i out */
hyperbole
Paranoid (IV) Inmate

From: Madison, Indiana, USA
Insane since: Aug 2000

 posted posted 01-19-2004 20:41

Your first example isn't working because you need to add a declaration of the layer. in the <head> portion of the page add something like:

code:
<style>

#layername {visibility: hidden }

</style>






-- not necessarily stoned... just beautiful.

« Backwards — Onwards »

Show Forum Drop Down Menu