It looks like in your example you are in two places using
"making_vote_left" where you probably meant "make_vote_left".
It seems to me that your code could be simplified by using a more
semantic CSS markup, rather than 'right' and 'left.' You can also re-
use classes, e.g., "selected" rather than "left_selected" or
"right_selected", and rely upon the cascade to style them properly.
Without seeing your CSS it is a little difficult to make specific
recommendations.
$(document).ready(function() {
$(".show_votes").mouseout(function () {
$(".show_votes").hide();
$(".making_vote").show();
});
$(".making_vote").mouseout(function () {
$(".making_vote").hide();
$(".show_votes").show();
});
$(".for, .against").hover(function() {
$(this).css("background-position", "-240px 0pt");
}, function() {
$(this).css("background-position, null);
}).click(function(event) {
var story_id = $(event.target).parents((".story").attr(id);
var vote_value = ($(event.target).attr("class") == "for" ? 1 :
2);
$.get("/stories/vote/"+vote_value+"/"+story_id, function(data) {
$(event.target).addClass("selected");
alert(data);
});
});
});
XHTML:
<div class="story" id="<?php echo $readstory['Story']['id']; ?>">
<h1 id="title"><?php echo $readstory['Story']['title']; ?></h1>
<p id="body"><?php echo $readstory['Story']['body']; ?></p>
<p id="related_story"><a href="/stories/submit/<?php echo
$readstory['Story']['id'];?>/<?php echo $readstory['Story']['title'];?
>">Write A Related Story</a></p>
<div class="vote_box">
<div class="show_votes">
<div class="<?php echo ($already_voted_for ? 'selected'
: 'vote') ?
>"></div>
<div class="<?php echo ($already_voted_against ?
'selected' :
'vote') ?>"></div>
</div>
<div class="making_vote" style="display: none;">
<div class="for"></div>
<div class="against"></div>
</div>
</div>
</div>
On Aug 3, 1:57 pm, Jim Newfer <[EMAIL PROTECTED]> wrote:
> Hello everyone,
>
> After spending quite some time trying to figure this out, I have
> resorted to asking for help because after trying what seems like
> everything, I have yet to find a solution. So maybe someone could help
> me out/point me in the right direction or offer some function names. I
> have tried everything in regards to the .css() function, .load() and
> removeAttr and attr() function to no avail. Something in my javascript
> design process is failing me. Well enough of the introduction, what I
> am doing is simple enough, and can be found here, jyte.com The main
> vote buttons on the page is what I am trying to do. My backend works
> great via the $.get() function, except that my user can only vote once
> because of classes getting changed and not being recognized. I want
> the user to be able to continually swich their votes, 100 times if
> they wanted. So far my design has been...
>
> -Show normal buttons, onmousehover("show_vote_box()")
>
> div.Vote box (hidden by default, but shown using .show() in the
> show_vote_box() function
>
> <div class="vote_for" onmouseover="show_vote_for_color()"
> onclick="vote_for()"></div>
> <-- these two
> classes are hidden as well from the start because they are
>
> contained within the vote box <div>
> <div class="vote_against" onmouseover="show_vote_against_color()"
> onclick"vote_against()"></div>
>
> </div>
>
> Now it appears that the visual aspects work fine, UNTIL I vote, then
> everything gets all screwy. From not letting me vote again, to not
> recognizing changed classes.
>
> Here is my code, hope this helps, any pointers, suggestions,
> modifications are greatly appreciated.
>
> Query File:
>
> function showVote(){
> $("div.show_votes").hide();
> $("div.making_vote").show();
>
> }
>
> function restoreVote(){
> $("div.making_vote").hide();
> $("div.show_votes").show();
>
> }
>
> function positionFor(){
> $(".make_vote_left").css("background-position", "-240px 0pt");
>
> }
>
> function positionAgainst(){
> $(".make_vote_right").css("background-position", "-240px 0pt");
>
> }
>
> function positionForOff(){
> $("div.make_vote_left").removeAttr("style");
>
> }
>
> function positionAgainstOff(){
> $("div.make_vote_right").removeAttr("style");
>
> }
>
> function voteFor(story_id){
> $.get("/stories/vote/1/"+story_id, function(data){
> $(".making_vote_left").addClass("left_selected");
> $
> (".making_vote_left").removeClass("making_vote_left");
> alert(data);
>
> });
> }
>
> function voteAgainst(story_id) {
> $.get("/stories/vote/2/"+story_id, function(data){
> $(".making_vote_right").addClass("right_selected");
> $
> (".making_vote_right").removeClass("making_vote_right");
>
> alert(data)
>
> });
> }
>
> XHTML:
>
> <div id="story">
> <h1 id="title"><?php echo $readstory['Story']['title']; ?></h1>
>
> <p id="body"><?php echo $readstory['Story']['body']; ?> </p>
> <p id="related_story"><a href="/stories/submit/<?php echo
> $readstory['Story']['id'];?>/<?php echo $readstory['Story']['title'];?
>
> >">Write A Related Story</a></p>
>
> <div class="vote_box">
>
> <div class="show_votes" onmouseover="showVote()" >
>
> <div class="<?php if($already_voted_for) { ?>vote_left_selected <?
> php } else { ?> vote_left <?php } ?>">
> </div>
>
> <div class="<?php if($already_voted_against) { ?>vote_right_selected <?
> php } else { ?>vote_right<?php } ?>">
> </div>
> </div>
>
> <div class="making_vote" style="display:none"
> onmouseout="restoreVote()">
>
> <div class="make_vote_left" onmouseover="positionFor()"
> onmouseout="positionForOff()" onclick="voteFor(<?php echo
> $readstory['Story']['id']; ?>)">
>
> </div>
>
> <div class="make_vote_right"
> onmouseover="positionAgainst()"onmouseout="positionAgainstOff()"
> onclick="voteAgainst(<?php echo $readstory['Story']['id']; ?>)">
>
> </div>
>
> </div>
>
> </div>
>
> </div>
>
> Any advice is GREATLY appreciated.
>
> Sincerely,
> Jim
