Changing CSS properties using jQuery

Question

I am trying to change the UL image in the CSS folder using jQuery. This is for a Twitter stream, where the avatar of the account posting is changed alongside the tweet. Using .css is pretty straight forward, but I am struggling to change the URL for the new image.

Here is my client code:

$(document).ready(function(){
    var socket = io();

    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });

    socket.on('info', function(data){
        console.log("this is teh question" + " " + data);
        $("#tweets").prepend("<li>" + data + "</li>");
    });

    socket.on('reply', function(data){
        console.log("this is my reply" + " " + data);
        $("#messages").prepend("<li>" + data + "</li>");
    });

    socket.on('userPic', function(data) {
        console.log("the userPic: " + data);
        $("ul#tweets").css("list-style-image: url", data);
    });
});

And the CSS:

body {
    font: 13px Helvetica, Arial;
    max-width: 1250px;
    width: 100%;
    margin: auto;
}

form {
    background: #fff;
    padding: 10px;
    width: calc(100% - 20px);
    display: inline-block;
    border-bottom: 1px solid #ccc;
}

form input {
    border: 3px inset;
    padding: 7px 5px;
    width: calc(100% - 140px);
    margin-right: 10px;
    display: inline-block;
    font-size: 15px;
}

form button {
    width: 110px;
    background: #177cc1;
    color: #fff;
    border-radius: 6px;
    text-transform: uppercase;
    font-size: 22px;
    border: none;
    padding: 5px 10px;
    display: inline-block;
    cursor: pointer;
}

form button:hover {
    background: #177cee;
}

form button:active {
    background: #177caa;
}

form button:focus {
    outline: 0;
}

.container {
    display: inline-block;
    width: calc(100% - 60px);
    padding: 20px;
    margin: 5px 10px 20px;
    background: #222;
}

.content {
    display: inline-block;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #555;
    border: 1px solid #555;
}

.tweets_container {
    display: inline-block;
    width: 100%;
    background: #fff;
}

.header {
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #333;
    padding: 15px;
}

#messages, #tweets {
    display: inline-block;
    margin: 5px;
    padding: 10px;
    width: calc(50% - 32px);
}

#tweets li, #messages li {
    padding: 10px;
    font-size: 18px;
}

#messages {
    background: #444;
    color: #fff;
}

ul#tweets {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

ul#messages {
    list-style-image: url("");
    height: 100px;
    width: 100px;
}

#tweets {
    background: #fff;
    color: #333;
}

.footer {
}

Saar · Accepted Answer · 2015-10-11 16:31:11Z

3

I believe this:

$("ul#tweets").css("list-style-image: url", data);

should be changed to:

$("ul#tweets").css("list-style-image", "url('"+data+"')");

answered Oct 11, 2015 at 16:31

Saar

2,3061 gold badge17 silver badges14 bronze badges

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

4 Comments

max7 Over a year ago

correct answer although I don't see where anyone suggested the first example for it to be changed to the correct one you put below it.

max7 Over a year ago

it was edited, wasn't there before when I saw the OP

UXWill Over a year ago

Thanks, worked perfectly :). Why do you need the +data+?

Saar Over a year ago

inside of the data variable there is the url for the image. now in order to concatenate it I need to break out of the string using " then use the + to concatenate it and then continue the string using another +

David Li · Accepted Answer · 2015-10-11 16:29:15Z

0

Without looking at your nodejs and socket.io, check if socket.on('userPic', function(data) {, the userPic event is being fired. If so, check if the valid of data is valid for this scenario.

The way list-style-image works is that it requires a working url in a format of list-style-image:url(''), so your data argument needs to be a valid image path wrapped by parentheses as well as quotes.

answered Oct 11, 2015 at 16:29

David Li

1,3008 silver badges18 bronze badges

Comments

Toni Leigh · Accepted Answer · 2015-10-11 22:17:32Z

0

Because css just deals with simple property value pairs, your JS will need to update the entire of the value in order to work. Here is an example, click on the image to see the change (I used background image for simplicity, there's no difference beyond the name of the property and the principle of providing a fully formed property value is demonstrated) ...

$('.image').css(
    'background-image', 
    'url("http://lorempixel.com/400/200/sports/")'
);

You would use something like this to take a variable:

$('.image').css(
    'background-image', 
    'url("' + data + '")'
);

This is the same as any other css property change. The whole value on the right needs to be updated in order for it to work. A similar problem people sometimes encounter is forgetting to add a unit to size value such as width and putting a number straight in:

.css('width', number); // wrong
.css('width', number + '%'); // right

edited Oct 11, 2015 at 22:17

answered Oct 11, 2015 at 16:31

Toni Leigh

4,9893 gold badges24 silver badges40 bronze badges

9 Comments

max7 Over a year ago

the question was asking about dynamically updating list-style-image, which is a legitimate approach, not updating the background image.

Toni Leigh Over a year ago

@max7 I was using background-image as a simple of example of the problem he was seeing, it makes no difference what the property on the left is, also, I'm not here just to dump correct code for a copy and paste, I'd rather explain with an example so the OP can change their own code themselves and actually learn something

max7 Over a year ago

the property to the left absolutely does make a difference and I'm not sure which is more shocking, the fact that I have to say it or the fact that you made a such an obviously factually challenged statement in the first place. Don't dump code but do speak to the actual question asked, it's that simple.

Toni Leigh Over a year ago

@max7 - what is the difference? as far as i can see it's identical apart from the name: they both use a URL property which needs to be spliced rather than directly dropped in if you just have an actual URL

UXWill Over a year ago

Thanks, your example helped me understand the concept behind the problem

|

Collectives™ on Stack Overflow

Changing CSS properties using jQuery

3 Answers 3

4 Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related