Rip's Domain

jQuery: background() bug? Am I doing something wrong?

Posted in Jquery by rip747 on December 15, 2006

UPDATE: This problem also happens even if you use .css(“background”). Could this be a browser issue and not jQuery’s problem? This seems to happen in both IE and FF.

If you’ve been using jQuery for a while, you’ve probably have used the awesome Auto plugin. I thought that I would expand apon it by writing my own plugin that would not only switch the src of img tags, but also background image of any other tags.

So like all other good programmers, I started by doing some tests before diving in to help me plan out what I need to write. This is where I ran into an interesting bug and since jquery.com seems to be having issues right now, I though I blog it so I don’t forget it.

There seems to be a problem when trying to retrieve the background style of an element when it is set through an external style sheet or style block. Unless you set it through jQuery using .background(), you will get a blank string. However if you set the style of the element though an inline style, everything works fine, though I never have a problem retrieve other styles from the element.

I know this sounds confusing so I wrote up a test page that you can copy. Word of warning, you will need the latest version of jQuery and since jquery.com is having server issues, I don’t know how you will get it.

<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<style type=”text/css” media=”all”>
#test{width:276px;height:110px;background:blue;}
</style>
<script type=”text/javascript”>
$(function(){
// style before changing through jquery
$(“#test1”).html($(“#test”).background());
$(“#test1a”).html($(“#test”).width());
$(“#test1b”).html($(“#test”).height());

$(“#test2”).html($(“#testa”).background());
$(“#test2a”).html($(“#testa”).width());
$(“#test2b”).html($(“#testa”).height());

// change through jquery
$(“#test”).background(“red”);
$(“#testa”).background(“green”);

// style after changing through jquery
$(“#test3”).html($(“#test”).background());
$(“#test3a”).html($(“#test”).width());
$(“#test3b”).html($(“#test”).height());

$(“#test4”).html($(“#testa”).background());
$(“#test4a”).html($(“#testa”).width());
$(“#test4b”).html($(“#testa”).height());
});
</script>
</head>
<body>
<div id=”test”></div>
<div id=”testa” style=”width:276px;height:110px;background:orange;”></div>
<p><b>Background of test set from style block, should be blue: <span id=”test1″></span></b></p>
<p>Width of test set from style block: <span id=”test1a”></span></p>
<p>Height of test set from style block: <span id=”test1b”></span></p>
<p>Background of testa set from inline style: <span id=”test2″></span></p>
<p>Width of testa set from inline style: <span id=”test2a”></span></p>
<p>Height of testa set from inline style: <span id=”test2b”></span></p>
<p>Background of test after altering though jQuery: <span id=”test3″></span></p>
<p>Width of test after altering though jQuery: <span id=”test3a”></span></p>
<p>Height of test after altering though jQuery: <span id=”test3b”></span></p>
<p>Background of testa after altering though jQuery: <span id=”test4″></span></p>
<p>Width of testa after altering though jQuery: <span id=”test4a”></span></p>
<p>Height of testa after altering though jQuery: <span id=”test4b”></span></p>
</body>
</html>

3 Responses

Subscribe to comments with RSS.

  1. GiorgosK said, on May 11, 2007 at 11:40 am

    Any update on the background bug ?
    I am using .css(‘background-image’, … )
    And it does not seem to work

  2. Adithya said, on August 20, 2007 at 1:06 am

    Similar problem faced by me too, may be try this

    .css(‘backgroundImage’, ‘url(your path)’);

  3. Feat said, on September 6, 2007 at 11:56 am

    $(‘body’).css(‘background-image’, “url(‘path’)”);

    worked for me, for a while I had my speech marks etc breaking the path part of the declaration.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: