...

View Full Version : Netscape "fading" problem



wesblount
11-10-2004, 05:15 AM
I have a menu that is a layer. At the bottom of the menu is a button that closes the menu. When clicked, it will "fade" out and then the layer visibility is switched to "hidden". There is also an onMouseOver function to make the layer switch back to visible and "fade" in. I was able to get it working fine in internet explorer, but I've been having a bit of a problem getting the "fade" in and out to work. Here is my code... any suggestions?



<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--

.headerLinks
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0060bf;
text-decoration: none;
}

.headerLinks:hover
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}

.menu
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-align: center;
background-color: #2678C9;
border-right: 1px solid #ffffff;
}

.search
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0060bf;
text-align: right;
}

.cats
{
position: absolute;
left: 5px;
top: 145px;
width: 150px;
z-index: 1;
}

.catLink
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
cursor: pointer;

}

.catLinkOver
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
background-color: #ffffc0;
cursor: pointer;
}

.close
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: center;
background-color: #0060bf;
cursor: pointer;
}

.closeOver
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-align: center;
background-color: #ffffc0;
cursor: pointer;
}

.footer
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}

//-->
</style>
<script language="JavaScript">
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);
function show()
{
if (ie5)
{
document.all.categories.style.visibility="visible";
opacity = document.all.categories.filters.alpha.opacity;


if (opacity < 100)
{
opacity += 10;
document.all.categories.style.filter="alpha(opacity=" + opacity + ")";

setTimeout('show()', 10);
}
}

if (ns6)
{
document.getElementById("categories").style.visibility = "visible";
opacity = document.getElementById("categories").style.MozOpacity;

if (opacity < 1.0)
{
opacity += 0.1;
document.getElementById("categories").style.MozOpacity = opacity;
setTimeout("show()", 10);
}
}
}

function hide()
{
if (ie5)
{
opacity = document.all.categories.filters.alpha.opacity;

if (opacity > 0)
{
opacity -= 10;
document.all.categories.style.filter="alpha(opacity=" + opacity + ")";

setTimeout('hide()', 50);
}

if (opacity == 0)
{
document.all.categories.style.visibility = "hidden";
}
}

if (ns6)
{
opacity = document.getElementById("categories").style.MozOpacity;

if (opacity > 0)
{
opacity -= 0.1;
document.getElementById("categories").style.MozOpacity = opacity;
setTimeout("hide()", 50);
}

if (opacity == 0.0)
{
document.getElementById("categories").style.visibility = "hidden";
}
}
}
</script>
</head>

<body topmargin="5" leftmargin="5" rightmargin="5" bottommargin="5" onResize="location.reload();">
<div id="categories" class="cats" style="filter: alpha(opacity=100); -moz-opacity: 1;">
<table width="150" border="1" bordercolor="#000000" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td height="18" bgcolor="#2678C9" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Antiques</td>
</tr>
<tr>
<td height="18" bgcolor="#297bcc" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Art</td>
</tr>
<tr>
<td height="18" bgcolor="#2c7ecf" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Books</td>
</tr>
<tr>
<td height="18" bgcolor="#2f81d2" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Business &amp; Office</td>
</tr>
<tr>
<td height="18" bgcolor="#3284d5" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Cars, Parts &amp; Trucks</td>
</tr>
<tr>
<td height="18" bgcolor="#3587d8" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Clothing, Accessories</td>
</tr>
<tr>
<td height="18" bgcolor="#388adb" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Coins</td>
</tr>
<tr>
<td height="18" bgcolor="#3b8dde" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Collectibles</td>
</tr>
<tr>
<td height="18" bgcolor="#3e90e1" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Computers</td>
</tr>
<tr>
<td height="18" bgcolor="#4193e4" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Dolls &amp; Bears</td>
</tr>
<tr>
<td height="18" bgcolor="#4496e7" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Electronics</td>
</tr>
<tr>
<td height="18" bgcolor="#4799ea" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Entertainment</td>
</tr>
<tr>
<td height="18" bgcolor="#4a9ced" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Home &amp; Garden</td>
</tr>
<tr>
<td height="18" bgcolor="#4d9ff0" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Jewelry &amp; Watches</td>
</tr>
<tr>
<td height="18" bgcolor="#50a2f3" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Music &amp; Instruments</td>
</tr>
<tr>
<td height="18" bgcolor="#53a5f6" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Pottery &amp; Glass</td>
</tr>
<tr>
<td height="18" bgcolor="#56a8f9" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Real Estate</td>
</tr>
<tr>
<td height="18" bgcolor="#59abfc" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Sports &amp; Memorabilia</td>
</tr>
<tr>
<td height="18" bgcolor="#5caeff" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Stamps</td>
</tr>
<tr>
<td height="18" bgcolor="#5fb1ff" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Toys &amp; Hobbies</td>
</tr>
<tr>
<td height="18" bgcolor="#62b4ff" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">Other</td>
</tr>
<tr>
<td height="18" bgcolor="#65b7ff" class="catLink" onMouseOver="this.className='catLinkOver'" onMouseOut="this.className='catLink'">See All Categories</td>
</tr>
<tr>
<td class="close" onMouseOver="this.className='closeOver'" onMouseOut="this.className='close'" onClick="hide();">Close</td>
</tr>
</table>
</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" rowspan="2"><img src="images/logo.gif" width="100" height="100"></td>
<td height="100" rowspan="2" valign="top" style="padding-top: 10px;">
<a href="#" class="headerLinks" style="padding-left: 50px;">sell</a>&nbsp; &nbsp; &nbsp;<a href="#" class="headerLinks">search</a>&nbsp; &nbsp; &nbsp;<a href="#" class="headerLinks">my exchangz</a>&nbsp; &nbsp; &nbsp;<a href="#" class="headerLinks">site map</a>&nbsp; &nbsp; &nbsp;<a href="#" class="headerLinks">help</a></td>
<td width="250" height="40" align="right" valign="top" style="padding-top: 10px; padding-right: 10px;">
<a href="#" class="headerLinks">register</a>&nbsp; &nbsp; &nbsp;<a href="#" class="headerLinks">sign in</a>
</td>
</tr>
<tr>
<td height="60" valign="middle">
<table height="40" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td class="search" style="padding-right: 10px;">Search</td>
<td style="padding-right: 10px;"><input name="text" type="text" style="border: 1px solid #0060bf;" size="25"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center"><a href="#" class="headerLinks" style="font-size: 10px;">Advanced Search</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #0060bf;">
<tr>
<td width="150" height="40" class="menu" onMouseOver="show();">Categories</td>
<td width="150" height="40" class="menu">Featured</td>
<td width="150" height="40" class="menu">Advertisements</td>
<td width="150" height="40" class="menu">eProgram</td>
<td height="40" bgcolor="#2678c9">&nbsp;</td>
</tr>
<tr>
<td colspan="5">&nbsp;</td>
</tr>
<tr>
<td height="22" colspan="5">&nbsp;</td>
</tr>
<tr>
<td height="18" colspan="5">
<table width="100%" height="18" border="0" cellspacing="0">
<tr>
<td width="50%" align="left" class="footer">Copyright &copy; 2004 exchangz Inc. All Rights Reserved.</td>
<td width="50%" align="right" class="footer">http://www.exchangz.com</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


--------------------------------------------------------------------------
ok... i got the fade out part of it to work. i set the opacity of my "categories" div to 100% (for ie) and 1.0 (for net & others). when it starts to fade in, it stops after the first sequence... i'm not really sure what the problem is.

canadianjameson
11-10-2004, 05:51 AM
my poor eyes.

please encase code in the code brackets
[.code]
your code
[/.code]

minus the .

are you looking for something like the red buttons here?
www.enviromark.ca/english/index.html

if yes use this:


<script type="text/javascript">
var txt = window.navigator.appName;
var ie = (txt == "Microsoft Internet Explorer") ? true : false;
var opera = (txt == "Opera") ? true : false;
</script>

</head>

...
give whatever object you want the id of redFade (or whatever):
<img src="images/butt_1_red.gif" border="0" name="a" id="redFade">

and then put this AFTER the </body> tag:
</body>
<script type="text/javascript">
var images = new Array();
images[0] = document.getElementById("redFade");
// images[1] = document.getElementById("anotherFade");


var opacity = 0.0;

for(var i = 0; i < images.length; i++)
{
if(ie)
{
images[i].style.filter="alpha(opacity=0)";
}
setOpacity(images[i],0.0);
}

function fade()
{
opacity += 0.05;

if(opacity > 0.9)
{
return;
}

for(i = 0; i < images.length; i++)
{
setOpacity(images[i],opacity);
}

setTimeout("fade()", 50);
}

function setOpacity(obj, val)
{
if(ie)
{
obj.filters.alpha.opacity = val * 100;
}
else
{
obj.style.MozOpacity = val;
}
}

fade();
</script>


Thank Hemebond for this one

hemebond
11-10-2004, 06:14 AM
Mozilla and CSS3 uses 0.0-1.0 range. Only IE uses percentage.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum