0

Has anyone else experienced the scenario described below?

For the sake of example, here's a very basic description:

#menuHolder contains menu items (#itemA, #itemB, #itemC,...#itemZ)

In CSS, I have #menuHolder's overflow set to hidden.

Using jQuery, I'm setting #menuHolder to a minHeight of 0, then expanding it to a maxHeight of 300 when a specific element is moused over.

No problems in FF, Safari or Chrome...but here's what happens in IE:

For a brief moment, #itemA, #itemB, #itemC,...#itemZ appear on top of each other as the page is loading in IE. Then they disappear and behave as normal.

It's as if either overflow:hidden or minHeight are not being recognized until the page loads.

Any ideas?

Thanks B

Banjo Drill
  • 121
  • 3
  • 13
  • where in the page you setting the minHeight? – Michael Jan 11 '11 at 21:42
  • What are minHeight and maxHeight? Javascript properties being used somewhere? Or do you mean CSS min-height and max-height? – typeof Jan 11 '11 at 21:47
  • Sorry, minHeight and maxHeight are simply variables I'm using in my javascript. – Banjo Drill Jan 11 '11 at 21:58
  • For example, var minHeight = 0; var maxHeight = 300; Then: $("#divToBeHoveredOver").hover(function(){ $('#menuHolder').stop().animate({'width': maxHeight}, 400, 'swing'); }, function(){ $('#menuHolder').stop().animate({'width': minHeight}, 400, 'swing'); }); – Banjo Drill Jan 11 '11 at 22:08

4 Answers4

0

In some cases, something like this will work:

On the element that must not appear during the page load, hide it in the markup:

<ul id='my_element' style='visibility:hidden'>

Then, before you apply a jquery effect to show it (ie, slideDown()), remove the attribute AND re-hide it:

$me = $('#my_element');  // cache it to improve performance
$('#some_other_element').click(function() {
  $me('style','visibility:visible').hide();
  $me.slideDown(800);
});

One day IE support will not require such antics. Until then, hope this helps.

Shade
  • 1
  • 1
0

There is still no perfect solution for some of the old jQuery datatables (e.g., 1.6.x), it seems all the hidden colum will be shown briefly: being it using the bVisibility: false property in table data, or set column visibility dynamically. fnSetColumnVis( 1, false );

e.g.

jquery datatables hide column

Does anyone know this has been solved in the newer version of datatables?

Community
  • 1
  • 1
uudaddy
  • 341
  • 4
  • 9
0

ie (at least up to 7 if i remember correctly) dont know about min-height

the solution is to use some css like that

min-height:100px;
height:100px; /* for ie7 */
height:auto !important; /* for all others */

it would be event better to target ie6/7 with some conditional comment tricks like in http://html5boilerplate.com

roman
  • 11,143
  • 1
  • 31
  • 42
0

Maybe you should have the container display:none in the css, preload any images used in the now invisible container using jquery, then in jquery use proper height instead of min- and max- when mousing over happens.

Hoatzin
  • 1,466
  • 13
  • 14