0

I got some code which centers a div in a middle of the webpage. The code works great on chrome, but for some reason, on IE(I think it's 9 or 10) it works for the first time, and then it doesn't.

To demonstrate the issue, here are some photos: (Ignore the signs you don't understand, thats my language)

Chrome:

enter image description here

IE first time I click on an object to open up:

enter image description here

IE second time or more, when I click on an object to open up:

enter image description here

This is the code I'm using to center the div:

    jQuery.fn.center = function ()
{
    this.css("position","fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

The code that uses the center() function:

$('#products,#search-result').on("click",'.product-item-info',function() {
    var pid = $(this).find('input').val();
    $.get('product_info.php',{pid:pid},function(data){
        $('#product-lb').html(data).append('<span class="x"><span>X</span></span>');
        $('.x').click(function() {
            $('#dimmer').click();
        });

        $('#dimmer').css({width:$('html').width(),height:$('html').height()});
        $('#product-lb').center();
        $('#product-lb').show(800);
        $('#dimmer').show();
        $(window).resize(function() {
            $('#product-lb').center();
        });
    });
});

explanations:

  1. #products is the div that contains all of the colorized divs in blue and green as you can see in the picture
  2. .product-item-info is the class of the rectangle that can be found in each product DIV.

  3. #dimmer is the black background

  4. #product-lb is the div that has to be centered and shown on the page

After testing lot of potentail things, I've come up with a clue. When I try to console the heights properties like this:

    jQuery.fn.center = function ()
{
    console.log($(window).height());
    console.log(this.outerHeight());
    this.css("position","fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

I saw diffrences between chrome, explorer first time, and explorer second time:

Chrome - First time open the div console log:

enter image description here

Chrome - After closing div console:

enter image description here

Internet Explorer - First time open the div:

enter image description here

Now comes the first step of the weird part, it seems like when the div is being closed, the function is being triggered, therefore the console looks like that:

enter image description here

Now, this is the most disturbing thing that I've found, on the second attempt to open up a div to view, look at the console:

enter image description here

And after closing this div:

enter image description here

It seems like the event is trigerred whenever I open the div, close the div, and it triggeres up to 4-5 times.

this is my close function:

    $('#dimmer').click(function() {

    $('#dimmer').fadeOut(800);
    $('#product-lb').hide(800);
});

$('.x').click(function() {
            $('#dimmer').click();
        });

I have no clue why it's happening! In chrome everything is just fine, but when it comes to internet explorer, its all messy.

Thanks in advance!

kfirba
  • 5,231
  • 14
  • 41
  • 70
  • 2
    So each time you click on '#products,#search-result' you are setting an new window onresize handler?! You shouldn't nesting handlers. BTW, resize window event should be throttled using a timeout – A. Wolff Sep 27 '13 at 09:52
  • @A. Wolff Could you explain a little bit more? – kfirba Sep 27 '13 at 09:56
  • Which part you didn't understand? – A. Wolff Sep 27 '13 at 09:58
  • @A.Wolff The TimeOut one. BTW, I think I've found the reason why it's consoling the heights so many times. it seems like the browser is showing the horizontal scrollbar everytime it shows the information div. Any idea how to prevent that? – kfirba Sep 27 '13 at 10:00
  • example of timeout to throttle resize event: http://stackoverflow.com/a/5490021/1414562 This will fix the fact that your resize event been called more than one when resizing. That's said your main issue is the nested resize handler... Even if you throttle the resize event, if you bind thousand of this event you are calling for trouble – A. Wolff Sep 27 '13 at 10:05
  • @A.Wolff I've located the problem thanks to you! It seems that the horizontal scrollbar that apeared made that happen. The code line that was causing the problem is this: `$('#dimmer').css({width:$('html').width(),height:$('html').height()});` So I removed it. now the problem is that the dimmer isnt 100% of the webpage as it should be. its showing the webpage at the last 70-100pixels – kfirba Sep 27 '13 at 10:12
  • And you are still nesting resize event? Nor throttle it? You should put a flag to see in your console how many times the resize event is called, i hope this will give you an idea why you should change your code – A. Wolff Sep 27 '13 at 10:16
  • why don't you use `position:fixed; left:0; top:0; right:0; bottom:0;` for your dimmer and give it a lower z-index than `#product-lb` – Pete Sep 27 '13 at 10:18
  • @A.Wolff OH! thanks a lot :D! I have no idea why I took the hard way to do it! Thanks a lot! – kfirba Sep 27 '13 at 10:20
  • Duplicate of your own earlier question, [Internet Explorer Centering DIV issue](http://stackoverflow.com/questions/19045649/internet-explorer-centering-div-issue) – CBroe Sep 27 '13 at 10:27

0 Answers0