PDA

Click to See Complete Forum and Search --> : [RESOLVED] overflow scrollbars are showing for a hidden item - i need to hide them

catwoman2970
06-14-2008, 05:24 PM
I used some Yahoo developer code that pops up a hidden menu when you click on a button (http://developer.yahoo.com/yui/examples/menu/example01.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/2579016170_e545d6177e.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
WebJoel
06-14-2008, 05:54 PM
That first URL doesn't work...check the address again
catwoman2970
06-14-2008, 09:58 PM
http://developer.yahoo.com/yui/examples/menu/example01.html
WebJoel
06-14-2008, 10:26 PM
I found in the bugzilla database that this is a known 'bug' for Gecko browsers on Mac, https://bugzilla.mozilla.org/show_bug.cgi?id=187435.

I Googled the terms "Firefox on Mac has scrollbars" and see that this is not a previously unreported problem, and found a few sites that offer a kluge to 'repair' this with what looks like javascript and it is a bit over my understanding... :(
catwoman2970
06-15-2008, 05:43 PM
WebJoel,

Thanks for your reply. That link did actually help. A post on that page had a css fix for the Mac FF issue. The only thing that person didn't mention is that the children items of the .hidden div must be set to display:block (anything besides none) when their parent div is toggled to visible.

Now my issue is in IE6 :-/ I'm using IE specific css for the same scrolling effect, but it's causing a weird gap within the parent div. I've posted a new thread regarding this.

Thanks again,
Sue
WebJoel
06-15-2008, 09:44 PM
ah yes... IE6 again. -'The Problem Child'...