We help IT Professionals succeed at work.

How to change css url property using JS / JQuery

metalaureate
metalaureate asked
on
I have a slider control whose handle knob is styled in css like this:

.dynamic-slider-control.horizontal .handle {
      width:                        24px;
      height:                        24px;
      background-image:      url("slider-embedded-hand1.png");
      opacity: 0.5;
      cursor: pointer;

}

How, using JS or JQuery, do I change the definition of the background-image property? I want to change it to a pulsating gif when the control saves info back to the server, but I am drawing a blank as to how to change the nested class property.

Thanks!
Comment
Watch Question

JF0

Commented:
use the jQuery addClass function to apply a new class containing the new url.

http://api.jquery.com/addClass/ 

Using this you should be able to create a class containing just the background-image property set to the new url and then when you call the addClass function it will overwrite the old url.

Author

Commented:
Could you show me how I reference the class? I tried that but no joy. It seems that addClass adds a class to an object, but the problem is I do not have an object reference I can use (nor can I get one), so I need to change the css definition itself, maybe?
JF0

Commented:
Please provide a sample of your html for the element you are trying to change so I may provide you accurate example.

Author

Commented:
See below. This is the generated code.  The handle image is the background image of the div with the "handle" class reference. The full class reference is:

.dynamic-slider-control.horizontal .handle as in my previous post.
 <div style="padding-left: 0px; padding-top: 0px; cursor: pointer; position: absolute; left: 26px; top: 0px;">
      <div class="horizontal dynamic-slider-control " id="rateScale" tabindex="1">
        <input id="rateScale-input">

      <div style="top: -6px; left: 12px; width: 56px;" class="line"><div style="width: 54px;"></div></div><div style="left: 0px; top: -6px;" class="handle"><div>&nbsp;</div></div></div>
    </div>
  </div>

Open in new window

Commented:
Sorry this response is in haste; I need to leave very soon. I hope you understand and can figure out and/or correct any mistake.

First I add a "newurl" class to the CSS which will be called by jquery.

.dynamic-slider-control.horizontal  .handle {
      width:                        24px;
      height:                         24px;
      background-image:       url("slider-embedded-hand1.png");
      opacity: 0.5;
      cursor:  pointer;

}

.newurl {
      background-image:        url("slider-embedded-hand1.png");
      opacity: 0.5;
      cursor:   pointer;
}

<div style="padding-left: 0px; padding-top: 0px; cursor: pointer; position: absolute; left: 26px; top: 0px;">
      <div class="horizontal dynamic-slider-control " id="rateScale" tabindex="1">
        <input id="rateScale-input">

      <div style="top: -6px; left: 12px; width: 56px;" class="line"><div style="width: 54px;"></div></div><div style="left: 0px; top: -6px;" class="handle"><div>&nbsp;</div></div></div>
    </div>
  </div>


And the jQuery looks like this:

<script>$(".dynamic-slider-control .horizontal  .handle").addClass("newurl");</script>

And what this does is add the newurl class to:
<div style="left: 0px; top: -6px;" class="handle">

which essentially turns it into:
<div style="left: 0px; top: -6px;" class="handle newurl">

And because it is jQuery it will auto-refresh and the class of newurl will immediately be affective.
 

leakim971Multitechnician
Top Expert 2014
Commented:
Use :

(if you have only one stylesheet else update the index)
var mycss = (document.styleSheets[0].cssRules)?(document.styleSheets[0].cssRules):(document.styleSheets[0].rules);
mycss[0].style["background-image"] = 'url("http://www.nofriendsclothing.com.au/bbroach16.jpg")';

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.dynamic-slider-control.horizontal .handle {
      width:                        24px;
      height:                        24px;
      background-image: url("slider-embedded-hand1.png");
      opacity: 0.5;
      cursor: pointer;

}
</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	$(document).ready(function() {
		var mycss = (document.styleSheets[0].cssRules)?(document.styleSheets[0].cssRules):(document.styleSheets[0].rules);
alert( "before : " + mycss[0].style["background-image"] );
		mycss[0].style["background-image"] = 'url("http://www.nofriendsclothing.com.au/bbroach16.jpg")';
alert( "after : " + mycss[0].style["background-image"] );
	});
</script>
</head>
<body>
</body>
</html>

Open in new window

Author

Commented:
These are both marvelously instructive, but I think my control .js widget is overriding things. But great thanks to you both.

Author

Commented:
I humbly thank you for your CSS awesomeness.