Home/ Questions/Q 6477205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:55:12+00:00

I have the following code in may page var x = parseInt($(this).css(‘backgroundPosition’).split( )[0]); Everything

  • 0

I have the following code in may page

var x = parseInt($(this).css('backgroundPosition').split(" ")[0]);

Everything works fine in IE9 and FF and Chrome, even Iphone but IE8 and IE7 throws an error, I debugged the issue to be that the .css method can’t resolve the property.

It seems like the document.ready function I use at the bottom of the page loads this code before the css is applied to the element, in this context the this is a td table element

Any ideas on how to elegantly fix this issue

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I do get undefined on the backgroundPosition (and background-position) property using jQuery.

    It does look like you can access the X and Y in background-position in IE if you refer to each individually:

    <html>
<head>
<style type="text/css">
body {
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG);
    background-repeat: no-repeat;
    background-position: 100px 500px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<p>Test of doc.ready and bg pos in IE8/9</p>
<script>
$(document).ready(function(){
    if ($.browser.msie) {
        console.log('X: ' + $('body').css('backgroundPositionX'));
        console.log('Y: ' + $('body').css('backgroundPositionY'));
    } else {
        console.log('X: ' + parseInt($('body').css('backgroundPosition').split(" ")[0]));
        console.log('Y: ' + parseInt($('body').css('backgroundPosition').split(" ")[1]));
    }
});
</script>
</body>
</html>

    In IE7/8 (using IE9 console):

    LOG: X: 100px 
LOG: Y: 500px

    http://jfcoder.com/test/bgpos.html

    However, it does look like it doesn’t work in Firefox (doesn’t output anything). So I adjusted the code to detect IE.

    • 0