Can't get jQuery code to change css dynamically

Question

Can't seem to get jQuery to change my css.

In my css file this works...

.closed {
    background-image: url(http://70.55.103.238/Images/menu-collapsed.gif);
}

I need to be able to change this dynamically with jQuery, so I am calling this in my $(document).ready(function()...

$('.closed').css({ 'background-image' : 'url(http://'+window.location.host+'/Images/menu-collapsed.gif)' });

If it's not obvious, the reason I need to do this is that I cannot use a relative path to the images folder and the host is not a constant.

First question, why is the jquery call not working? If I put an alert like this...

alert('url(http://'+window.location.host+'/Images/menu-collapsed.gif)')

I can see that the URL is correct, and if I enter the url displayed in the alert directly into the address bar I do get the gif. So I am confident that the URL being passed is correct. I must assume that the css is not getting changed.

Second question, is there any way to dynamically get the host url in the .css file so that I do not have use jquery?

Thanks.

Update:

I tried the following just to make it simple..

CSS...

.closed {
    background-image: url(../Images/menu-collapsed.gif);
}

javascript...

$('.closed').css({ 'background-image' : 'url(../Images/menu-expanded.gif)' });

Note that the css is set to use menu-collapsed.gif and the javascript changes it to men-expanded.gif. But the image that is displayed is the menu-collapsed.gif.

He probably could.. but he wants to be able to change it dynamically — wirey00
– wirey00, Commented Jun 15, 2012 at 3:01
@wirey - if the folder structure is the same, that format would make the domain irrelevant. — j08691
– j08691, Commented Jun 15, 2012 at 3:02
What does Firebug say the background-image value is changed to? — user684934
– user684934, Commented Jun 15, 2012 at 3:02
Works for me jsfiddle.net/z7H2Z If you inspect the 'closed' element you'll see that jQuery is attempting to set a bg image with the URL fiddle.jshell.net/Images/menu-collapsed.gif — Jonathan Nicol
– Jonathan Nicol, Commented Jun 15, 2012 at 3:05

gopi1410 · Accepted Answer · 2012-06-15 03:07:10Z

1

It works fine for me:

http://jsfiddle.net/gopi1410/UscLn/

Check the console for any errors & inspect the .closed div to check whether its background image has changed or not.

answered Jun 15, 2012 at 3:07

gopi1410

6,65110 gold badges43 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user278859 Over a year ago

I am not getting any errors in the console. The gifs do not display. I am not real good with firebug, but looking at everything in firebug, the html and css all looks the same to me as when it is working. How do I inspect the .closed div to see if the background image has changed or not.

user278859 Over a year ago

I added an update to my question to show a simplier test that I did using the relative paths to the image folder. It should just work.

user278859 · Accepted Answer · 2012-06-15 07:34:41Z

Ok I figure this out. I am not sure if this is by design, but I found that I have to reset the css any time I change a class controlled by jQuery css. In my particular case I was setting the image before I had any DOM elements with a class of .closed.

What I actually have is a Tree Menu made up of ul li elements which is created in the $(document).ready(function() with all the nodes of the tree assigned the .closed class. I moved the $('.closed').css() call so that it was executed right after I added the tree to the DOM. and it worked.

The same holds true for the .open class I use for when a user clicks a closed ul. I had to put a $('.open').css call right after I changed the class from .closed to .open. and again right after a change back to closed.

So, if I understand what I am seeing $('.closed').css must not be a persistant change to the css like manually typing it into the script. Am I interpreting this correclty?

If any one is interested here is kind of what my jquery looks like now with the .css() calls where they are working...

$(document).ready(function() {
    $.get('treeMenu.xml', function(d) {

        function makeMenu($xml) {
            var markup = "";
            function processXml() {
                //CODE TO PARSE XML INTO MENU TREE IN MARKUP VAR
            }
            $xml.children().each(processXml);
            return markup;
        }

        tree = makeMenu($(d));
        $('div.treeMenu').append(tree);
        //HAD TO PUT THE CSS CALL HERE FOR IT TO WORK
        $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"});

        $('.treeMenu ul,li').each(function() {
            if ($(this).hasClass("leaf")) {
                $(this).click(function() {
                    //CODE FOR CLICK ON LEAFS
                }); 
            }else {
                $(this).click(function() {
                    if ($(this).hasClass("closed")) {
                        $(this).removeClass("closed").addClass("open");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"});

                } else if ($(this).hasClass("open")) {
                        $(this).removeClass("open").addClass("closed");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"});

                } else {
                        $(this).addClass("open");

                        //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF
                        $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"});
                 }  
            });
        }       
      });       
  });
});

Collectives™ on Stack Overflow

Can't get jQuery code to change css dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related