catwoman2970
06-14-2008, 10:52 PM
I used some Yahoo developer code that pops up a hidden menu when you click on a button (http://developer.yahoo.com/yui/examp...xample01.html). It looks like the js toggles between visibility:hidden and visibility:visible on the menu's parent div for the effect. Problem is that when we populated the menu with a list of items, the menu is really long. So I set the height of the containing div, set the overflow to auto, and it works great on FF, IE6, IE7 and Opera for PCs and Safari for Macs (the menu pops up and has a scrollbar). But on FF for the Mac the scrollbars show up even though the div is hidden. I think I understand why Mac FF is interpreting it this way, but I still need a way around this. Anyone with ideas? Here is a screenshot - http://farm4.static.flickr.com/3162/...d6177e.jpg?v=0
and here is the code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://www.freewebs.com/greenwoodmenus/css.css" media="screen" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/cookie/cookie-beta-min.js"></script>
</head>
<body>
<h2><a href="javascript:toggleDisclosure('qfFrame')" class="disclosureLink"><span class="downArrowOpen" id="qfFrameArrow">Quick Find</span></a></h2>
<div class="spacing11" id="qfFrame">
<script type="text/javascript">
YAHOO.util.Event.onContentReady("qfSelectPrFrame", function () {
var oMenu = new YAHOO.widget.Menu("qfSelectPrFrame", { fixedcenter: false });
oMenu.render();
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle1", "click", oMenu.show, null, oMenu);
});
</script>
<div class="position3" id="sPropMenu">
<button id="menutoggle1" type="button" class="selectDft">Select a Property</button>
<div id="qfSelectPrFrame" class="foMenu">
<div class="bd">
<ul class="first-of-type" id="selectPr"><li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2011300001">360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=10">Answers</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=27026489">Astrology</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2715790">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=97447598">Babel Fish</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2131231">Bix</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=14">Comcast</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2">Del.icio.us</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=97526943">Ebay</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=20080205">Elections</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=15550340">Entertainment</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2719353">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=792600001">Flickr</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=11111">Food</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2716149">Front Page</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=37299781">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=342908">Gateway Program</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=245634634">Global</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=35605261">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=12934036">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2718073">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=967143001">Lifestyles</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=96609729">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=3297502">Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=235234634634">Mail - AT&T Y! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2715843">Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=23975982">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=14884444">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=25721400">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=7798737">Movies</a></li>
</ul>
</div><!--bd-->
</div><!--qfSelectPrFrame-->
</body>
</html>
========
thanks in advance!
Sue
and here is the code -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://www.freewebs.com/greenwoodmenus/css.css" media="screen" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/cookie/cookie-beta-min.js"></script>
</head>
<body>
<h2><a href="javascript:toggleDisclosure('qfFrame')" class="disclosureLink"><span class="downArrowOpen" id="qfFrameArrow">Quick Find</span></a></h2>
<div class="spacing11" id="qfFrame">
<script type="text/javascript">
YAHOO.util.Event.onContentReady("qfSelectPrFrame", function () {
var oMenu = new YAHOO.widget.Menu("qfSelectPrFrame", { fixedcenter: false });
oMenu.render();
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle1", "click", oMenu.show, null, oMenu);
});
</script>
<div class="position3" id="sPropMenu">
<button id="menutoggle1" type="button" class="selectDft">Select a Property</button>
<div id="qfSelectPrFrame" class="foMenu">
<div class="bd">
<ul class="first-of-type" id="selectPr"><li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2011300001">360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=10">Answers</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=27026489">Astrology</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2715790">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=97447598">Babel Fish</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2131231">Bix</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=14">Comcast</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2">Del.icio.us</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=97526943">Ebay</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=20080205">Elections</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=15550340">Entertainment</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2719353">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=792600001">Flickr</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=11111">Food</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2716149">Front Page</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=37299781">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=342908">Gateway Program</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=245634634">Global</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=35605261">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=12934036">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2718073">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=967143001">Lifestyles</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=96609729">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=3297502">Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=235234634634">Mail - AT&T Y! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=2715843">Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=23975982">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=14884444">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=25721400">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://studio.corp.scd.yahoo.com/source_dev/solutions/search/?quick_find_property=quick_find_property&quickfind=7798737">Movies</a></li>
</ul>
</div><!--bd-->
</div><!--qfSelectPrFrame-->
</body>
</html>
========
thanks in advance!
Sue