Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Location
    Harrisburg, PA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape "fading" problem

    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?

    Code:
    <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.
    Last edited by wesblount; 11-10-2004 at 10:57 PM. Reason: updated code

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Mozilla and CSS3 uses 0.0-1.0 range. Only IE uses percentage.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •