CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer-8internet-explorer-7
Thomas
Thomas

Reputation: 5089

IE8 problem with Jquery positioning

I am trying to position a loading graphic in the middle of the view window using jquery. The solution I came up with works in all browsers except IE8 or older:

JS

   <script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery("#loading_spinner").css("left", window.innerWidth/2);
        jQuery("#loading_spinner").css("top", window.innerHeight/2);
      });
    </script>

HTML

       <div id='GB_overlay' style="display:none;">
        <div id="loading_spinner" style="position:absolute;">
          <img src="/img/transparent_loader.gif" alt="#"/>
        </div>

For some reason, in IE8 or lower, the spinner gets positioned in the top left corner of the screen not the center. Is this an IE bug? How can I fix this?

Upvotes: 1

Views: 3212

Answers (3)

davidbuttar
davidbuttar

Reputation: 676

Your problem is window.innerWidth and window.innerHeight which do not work on IE.

It's safest to use jQuery to work this out, use one of the following as required,

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

Upvotes: 2

Ives.me
Ives.me

Reputation: 2404

Try using

http://api.jquery.com/height/

Upvotes: 0

rahul
rahul

Reputation: 187030

Innerwidth and innerheight are not supported in IE.(except IE9)

See quirksmode

You can use

$(window).height() and $(window).width()

Upvotes: 3

Related Questions