1

I tried to change inline css using jquery. but it not change.

This is my html code

<div class="page1" style="background: url(modules/mod_test/tmpl/img/1.jpg); width:100%;"></div>
<div class="page2" style="background: url(modules/mod_test/tmpl/img/2.jpg); width:100%;"></div>
<div class="page3" style="background: url(modules/mod_test/tmpl/img/3.jpg); width:100%;"></div>
<div class="page4" style="background: url(modules/mod_test/tmpl/img/4.jpg); width:100%;"></div>

this is the code i wrote

 $(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css("background", "images/1.jpg","width", "100%");
$('.page2').css("background", "images/2.jpg","width", "100%");
$('.page3').css("background", "images/3.jpg","width", "100%");
$('.page4').css("background", "images/4.jpg","width", "100%");
        });   
    });

But it not change the image. can anyone help me to solve this problem?

1
  • try this. $('.page1').css({"width":"100%","background": "url(images/1.jpg)"});
    – Deshan
    Dec 11, 2014 at 9:09

3 Answers 3

2

In general use css() function like this:

$('your_element').css({'prop_one': 'prop_one_value', 'prop_two': 'prop_two_value', ... });

So, in your case you forgot {} and you did not assign the css rules correctly 'prop':'value' :

$('.page1').css({"background": "url('images/1.jpg')","width": "100%"});
7
  • 3
    Supply a description and this answer would be perfect
    – Girish
    Dec 11, 2014 at 8:48
  • @kapantzak it's working. but it not display the path correctly. so image not display.do u know how to get the correct path here? Dec 11, 2014 at 8:53
  • You need to find the relative or absolute path of your image. Check here for more details (coffeecup.com/help/articles/absolute-vs-relative-pathslinks)
    – kapantzak
    Dec 11, 2014 at 8:57
  • thanks @kapantzak. it's working. but there is a another problem. when i go back it change to earlier one. do u have any idea about it how to fix? Dec 11, 2014 at 9:08
  • What do you mean 'when I go back'? Can you provide a live link?
    – kapantzak
    Dec 11, 2014 at 9:12
2

I found some syntax errors inside CSS declaration in your script. You should refer jQuery API doc for CSS first. And need to debug using browser's inspector/debugger tool.

Here you missed curly braces {} and colon : inside syntax. I have changed to correct one in below snippet.

Further you should go through doc in Joomla for Adding JavaScript and CSS.

Improved Code:

$(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css({"background": "images/1.jpg","width": "100%"});
        });   
    });
});

In case if you are using other JavaScript libraries like MooTools or YUI, you can change it to specific:

(function($){
    $(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css({"background": "images/1.jpg","width": "100%"});
        });   
    });
}(jQuery));

Hope this will help you.

1

For defining multiple css properties with jQuery, you need seperate each property value with : and seperate each css property with a , and

Try like this:

$('.page1').css({"background":"url('images/1.jpg')","width":"100%"});

Also single css property typing example this:

$('.page1').css("background","images/1.jpg");

Here is jQuery api css referance.

1
  • 1
    this won't work, css background property is invalid enclose with url(..).
    – Girish
    Dec 11, 2014 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.