How to change inline css using jquery in joomla

Question

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?

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

kapantzak · Accepted Answer · 2014-12-11 08:54:53Z

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%"});

edited Dec 11, 2014 at 8:54

answered Dec 11, 2014 at 8:45

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

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

7 Comments

Girish Over a year ago

Supply a description and this answer would be perfect

anuruddhika Over a year ago

@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?

kapantzak Over a year ago

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)

anuruddhika Over a year ago

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?

kapantzak Over a year ago

What do you mean 'when I go back'? Can you provide a live link?

|

Sergio · Accepted Answer · 2014-12-14 22:05:05Z

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.

Barlas Apaydin · Accepted Answer · 2014-12-11 08:55:25Z

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.

edited Dec 11, 2014 at 8:55

answered Dec 11, 2014 at 8:44

Barlas Apaydin

7,35511 gold badges60 silver badges88 bronze badges

1 Comment

Girish Over a year ago

this won't work, css background property is invalid enclose with url(..).

Collectives™ on Stack Overflow

How to change inline css using jquery in joomla

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related