CODEWITHSUNDEEP
phpjavascriptjqueryinternet-explorer
Melros
Melros

Reputation: 1213

window.resize always triggers in IE without resize

Old title: Included PHP doesn't work with JQuery and IE in a function as expected

I have these two function:

First:

/* dynamic menue */
$("#wrapper div").not(":first").hide();
$("#nav p").click(function () {  
$('#wrapper div').eq($(this).index()).show().siblings().hide();
});

Second:

 var menue = function (menue) {
 if ($(window).width() < 680) {
    $("#nav").hide();
    $("#wrapper div").show();
 } else  {
    $("#nav").show();
    $("#wrapper div").not(":first").hide();
 }
};
$(document).ready(menue);
$(window).resize(menue);

​The first function works well and the second makes sure that all content is shown without the menue if the window size is beyond 680px otherwise it will show the normal state. Everything works fine in all browsers.

I made up a fiddle for visualisation: http://jsfiddle.net/TFeWY/

However this doesn't work in IE as expected with this setup: The div content is generated with php. In this state I only see the first div in IE and can't switch to the other but resize works well. However if I change the php content with html it all works properly again. More interesting: If I leave the php untouched an just remove the else statement it also works.

So far I couldn't figure out weather it's the php content (what I don't think) or the hide() command in context of the php content.

Is something wrong in the function for IE? (Tested in IE8)

Edit:

If I remove the $(window).resize(menue); it also works. So it must be something wrong with the function itself?

I found out that the window.resize function is always trigged in IE 8, that's the reason why I can't see the other divs.

How can I do something about that?

Upvotes: 2

Views: 1052

Answers (2)

Melros
Melros

Reputation: 1213

Ok, I finally found an answer:

Actually here is a post to my question which describes what is happening here: window.resize event firing in Internet Explorer

Check out this updated fiddle in IE 8. It doesn't work as I described cause the resize is triggered:

http://jsfiddle.net/TFeWY/1/

Now you could work with the given answer of the post mentioned above.

Or here is a fix of a friend of mine which I use now:

http://jsfiddle.net/TFeWY/2/

A very interesting solution I think.

Upvotes: 1

Valky
Valky

Reputation: 1866

Perhaps re-organize your code, with something like that :

$(document).ready(function(){   
    $("#wrapper div:gt(0)").hide();
    $("#nav p").live('click',function () {  
    $('#wrapper div').eq($(this).index()).show().siblings().hide();
    }); 
    menue();
    $(window).live('resize',function(){menue()});
});

function menue() {
 if ($(window).width() < 680) {
    $("#nav").hide();
    $("#wrapper div").show();
 } else  {
    $("#nav").show();
    $("#wrapper div:gt(0)").hide();
 }
}

Upvotes: 1

Related Questions