jQuery + CSS + IE problem: hidden elements appear briefly when page is loading

Question

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

What are minHeight and maxHeight? Javascript properties being used somewhere? Or do you mean CSS min-height and max-height? — typeof
– typeof, Commented Jan 11, 2011 at 21:47
Sorry, minHeight and maxHeight are simply variables I'm using in my javascript. — Banjo Drill
– Banjo Drill, Commented Jan 11, 2011 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
– Banjo Drill, Commented Jan 11, 2011 at 22:08

roman · Accepted Answer · 2011-01-11 21:43:36Z

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

answered Jan 11, 2011 at 21:43

roman

11.3k1 gold badge33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hoatzin · Accepted Answer · 2011-01-11 21:48:30Z

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.

answered Jan 11, 2011 at 21:48

Hoatzin

1,46413 silver badges14 bronze badges

Comments

Shade · Accepted Answer · 2013-02-05 02:24:47Z

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.

answered Feb 5, 2013 at 2:24

Shade

11 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 10:25:54Z

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?

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jan 24, 2014 at 4:21

uudaddy

3914 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery + CSS + IE problem: hidden elements appear briefly when page is loading

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related