CODEWITHSUNDEEP
jqueryhtmlcss
dux0r
dux0r

Reputation: 21

jQuery .css() property simply not functioning (no error)?

As part of an upvote/downvote system (like on stackoverflow or Reddit) I'm using jQueries .css() property to change the background-position when an upvote or downvote arrow is clicked:

jQuery code:

$(document).ready(function() {
    $('#vpUp').click(function() {
        $('.vpVote').css('background-position','28 0;');
        var pId=1;
        vpVoteF(pId,1);
    });
    $('#vpDown').click(function() {
        $('.vpVote').css('background-position', '56 0;');
        var pId=1;
        vpVoteF(pId,-1);
    });
});

HTML:

<div class="vpVote">
    <div class="vpUD" id="vpUp"></div>
    <div class="vpUD" id="vpDown"><span id="vpVoteText"><?php echo $Votes; ?></span></div>
</div>

The background-position would change the background image to the upvote being highlighted or the downvote highlighted. However, the code doesn't seem to run at all. When I place an alert in either function it alerts when I click #vpUp or #vpDown, but they don't change the background position and in Chrome and Firefox with firebug open there are no errors.

I am completely at a loss.

Note: You can see a live demo of the voting (not) in action here: http://www.texturepacker.net/viewPacks2.php

Upvotes: 0

Views: 63

Answers (2)

SeanCannon
SeanCannon

Reputation: 78046

$(document).ready(function() {
    $('#vpUp').click(function() {
        $('.vpVote').css('background-position','28px 0px');
        var pId=1;
        vpVoteF(pId,1);
    });
    $('#vpDown').click(function() {
        $('.vpVote').css('background-position', '56px 0px');
        var pId=1;
        vpVoteF(pId,-1);
    });
});

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

Specify UNITS (px) with your position.

Upvotes: 5

Related Questions