TOPIC: Voting styling

Hi Daniel,

Today I'm trying to improve on the look of the voting system.
I created new thumbs up/thumbs down that each comes in grey/green grey/red.
In CSS I defined that the thumbs up/down shown are both grey, and on hover with the mouse they turn green/red.
So now this works and it looks good and more responsive to the visitor.

Now, you can guess what I'm missing... I want that on click they would stay green/red and not back to grey
(at least while the user is still on the same page).

I thought one of the following might have helped by putting it in CSS after the :hover one:

#comment div.voting_yes:active {background: url(../images/thumbup_green.png) no-repeat;}
or-
#comment div.voting_yes:focus {background: url(../images/thumbup_green.png) no-repeat;}
or-
#comment div.voting_yes:visited {background: url(../images/thumbup_green.png) no-repeat;}

But I understand this doesn't suppose to work (maybe because there's no link really).

So do you know how I could achieve this?
Is it only through some javascript? Perhaps it is OnClick?

Saw this in JOSC_post.php:
public function voting_cell($mode, $num, $id) {
return "<li><div id='$mode$id' class='voting_$mode' onclick='JOSC_voting($id,\"$mode\")'><span>$num</span></div></li>"; }

I'm not really sure what to do with the OnClick or something else in order to display the green thumbup image also after someone had clicked the thumbup.

Any ideas?

Thanks!

www.w3schools.com/CSS/css_pseudo_classes.asp

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

But you are probably right - there shouldn't be any :active pseudo class for div.

You can change the vote cell function to generate a tags. Just replace the div with an a. I don't know why jonus changed back than - I remember that I was wondering at it and perhaps I will have to reconsider changing back to an a.

I opened JOSC_post.php.

Changed this:
public function voting_cell($mode, $num, $id) {
return "<li><div id='$mode$id' class='voting_$mode' onclick='JOSC_voting($id,\"$mode\")'><span>$num</span></div></li>"; }

To:
public function voting_cell($mode, $num, $id) {
return "<li><a id='$mode$id' class='voting_$mode' onclick='JOSC_voting($id,\"$mode\")'><span>$num</span></a></li>"; }

But even before doing anything in CSS, the above change caused the voting icons not to be displayed.
All I could see on the frontend are the number of votings up and votings down. Like this:
0 1
with a line beneath the numbers, as if they are links.
But all the styling and icons were gone.

I don't know if this is the only place you meant I should change the div to <a>,
but if you happen to know of another place or something I could change then please do let me know.

Many thanks,
Owen

YEp, since you've started changing the css I thought that you know what you are doing
Look at the css file - there you have to make the appropriate changes to show the voting buttons...

You're right, the icons appeared again when I changed the div to <a> also in CSS:
#comment a.voting_yes:active {background: url(../images/thumbup_green.png) no-repeat;}

Nevertheless, after that, clicking on the icon still didn't make the green image to remain.
I also noticed that although it's an <a> tag hovering over the icon doesn't cause the status bar
to display any sort of link that it supposed to lead to.

the statusbar should show the onclick event, doesn't it???

I don't know, the status bar doesn't show the onclick event for me, even when I tried reverting back to all the default files without any modifications.

It could be that perhaps there's no need necessarily to use the a:active to acheive this.
Could be that it's all about the onclick alone.
Specifically, adding an event that would change the id/class on onclick.

I thought perhaps something needs to be added to the onclick in JOSC_post.php to change the id/class onclick:
public function voting_cell($mode, $num, $id) {
return "<li><div id='$mode$id' class='voting_$mode' onclick='JOSC_voting($id,\"$mode\"); ? ? ? '><span>$num</span></div></li>"; }

Or could also be that the above original code should remain as it were, but maybe in client.js something could be added to the function there that would change the id/class onclick.

I tried a few suggestions that I found in online forums on how to change style onclick, but I'm sure I missed all the small details correctly, such as which qoutes to put and where, and which method to use for this specific instense.