I need a voting plugin, will pay

Post by **Don Chambers** » Tue Jan 15, 2008 5:28 pm

OK Jude - I know your site is back up, I just hit it. So where is your example? This solution could really solve a lot of issues and serve as the motivation to really clean up the plugin code.

judebert · Post by **judebert** » Tue Jan 15, 2008 5:57 pm

Yeesh, aren't you the impatient one?

Yes, I finally got my site back up (grumble, grumble), figured out how to include a stylesheet with a single entry (modify template and use custom entry properties; very slick, and we should modify all the templates to do that), and found all the problems with my entry. It's ready now:

Judebert's All-CSS Star Rating Tool

Probably needs some polishing, but it gets the point across. Maybe I'll spend some time finding some nice animated smileys to use, so it looks nicer.

Naah. Who's got that kind of time?!?

judebert · Post by **judebert** » Tue Jan 15, 2008 10:27 pm

Apparently, I do.

I updated my article with an animated rating bar, some pictures, and a complete article/tutorial. Let me know if you need any more information.

Easyfunk · Post by **Easyfunk** » Tue Jan 15, 2008 10:30 pm

This is so cool! I would love using this rating brought by the karma plugin! I followed this discussion from it's beginnings and im looking forward to see what happens. This will be great work. Thank you!

gregman · Post by **gregman** » Wed Jan 16, 2008 12:26 am

Hi Don,

your images are awesome. Will you share them? I made the necessary changes to the plugin. Maybe someone has time to test it. As mentioned before, compatibility is the main problem. IE 7, Firefox 2.x and Opera 9.x are supported. Probably IE 6 won't cooperate. Can someone test it?

Greg

Post by **Don Chambers** » Wed Jan 16, 2008 12:41 am

Greg - did you incorporate what Jude did inclusive of his final revision? He and I were going back and forth via IM for quite some time today (and yesterday) with this stuff..... I want to make sure you are using the latest.

Also - using his example, I detected no problems in IE6... and I would not expect any either since the images are all background images and the sizes are provided.

EDIT: Just looking at your site I see that you have not structured the links in the same manner Jude explained on his site. He has an absolutely brilliant explanation and code example in his blog entry. I strongly suggest you implement this exactly according to his example.

And your site is exhibiting a problem in ie6 that is not present in Jude's example..... when moving from left to right, the scale properly increases from -2 to 2... but when moving right to left, the scale stays on +2, or 5 stars.

Hopefully, identically matching the code Jude has worked out will solve the problem.

As far as the images I created, the idea was to release the plugin with minimal images and let others create new ones, sharing them if they wanted. However, if you want to swipe the green/yellow/grey version I gave Jude, go ahead. I'm not sure i like my purple/orange one, or even the rainbow one just yet, so please do not use those right now.

gregman · Post by **gregman** » Wed Jan 16, 2008 1:14 am

No, I didn't. I made some explorations by myself and tried to get rid of the unnecessary code in the css. The worst IMHO is the use of the ul and li tag for aligning purposes (at least you can call it a hack). And I absolutely disagree with Judebert: Making your site interactive is a core discipline of JavaScript. Remember AJAX!
The plugin does support multiple images with variable size, different images on each "place" (e.g. animated ones), floating points with two decimals and even works in IE 5.0.

Greg

EDIT: I'm too t ired to solve the IE 6 Bug. I'll do this the next days. And of course I did change the structure of the links. I made them similar to the text based karma code.

Post by **Don Chambers** » Wed Jan 16, 2008 3:31 am

Greg - your continued efforts are much appreciated!!! Nice to see that javascript gone!!

I'm not sure I completely agree with your assessment of <ul> vs. <div>, but I do not want to focus primarily on that.

I also would suggest that the continuing to do something because the existing code does it that way is not necessarily a good defense.... the code of that plugin, as I'm sure you already know, is not exactly an example of best practices.

I'll let Jude address the differences between what he has proposed, and what you are proposing. I will say this - if it is a 50/50 draw as to which method is "superior" (whatever that might imply), I would suggest using his example for the simple reason that he located an ideal solution, expanded it for the very cool concept he demonstrated with his animated GIFs, and documented the entire process for the benefit of the s9y community, as well as any other developers reading his blog. It would be nice to see this plugin serve as an extension of that article.

Meanwhile, I'll continue on the sidelines proposing ideas, testing, and playing around in photoshop - I have a couple of additional images that are even better that I have not publically displayed just yet!!

Post by **Don Chambers** » Wed Jan 16, 2008 5:44 am

Greg - this is just the result of a side-by-side comparison, and a quick check with my MSIE development tools, but I think this is the problem:

Code: Select all

.serendipity_karmaVoting_links a:hover,
.serendipity_karmaVoting_links a:active,
.serendipity_karmaVoting_links a:focus {
    background-position: left bottom;
    z-index: 7;
    text-decoration: none;
}

I think it is the z-index: 7;

gregman · Post by **gregman** » Wed Jan 16, 2008 10:45 am

Hi Don,

in deed it was the

Code: Select all

z-index: 7

. I added it to get the plugin work in IE 5.0. I fixed it now to also support IE 6. As you can see, the css code works (even better) without the <ul>/<li> tags. You can keep it much more simple and that should be a main effort (and besides it should keep compatibility to most browsers). Why would you prefer to create a list and get rid of the listing option via the display:inline command?

For me, the plugin is nearly done. But I'm looking forward to future improvements on it.

Greg

judebert · Post by **judebert** » Wed Jan 16, 2008 3:40 pm

Yeah, I tried to get rid of the unnecessary CSS, too. It turned out that I was still the student, and he was the master. My solution is word-for-word identical with the original, with only one exception: I use EMs and pixel-based font size for the rating, so it can be stated in a 1-5 scale; the original solution uses percentages (which is also pixel-free, now that I think about it).

The difference between div and ul/li is pretty much academic, in my opinion. There are no semantics for a rating bar. It makes sense to consider it as a list, but it also makes sense to consider it as a container. We do tend to use lists for CSS, I've noticed.

I don't think gregman and I disagree so much on the JavaScript thing. It definitely does make your site interactive. I prefer CSS, because I want to focus on content as much as possible, and overly complex interaction can get in the way. (And possibly because "KISS" keeps getting pounded into me.) Additionally, I sometimes browse with JavaScript off, and I know a few paranoids who do so all the time. I like my sites to work even then.

I'm switching back to the sequence widget now (which uses JavaScript, because you just can't drag with CSS. See? We're not so far apart after all). Once I'm done with that, maybe I'll get a chance to attempt a PHP cleanup on the karma plugin. More likely, my actual job will become too busy to do anything else. But I'll try to check back.

Post by **Don Chambers** » Wed Jan 16, 2008 4:50 pm

Thanks again Greg & Jude - this is again a good example of "open source" and "community". This revision is truly working out to be a collective effort.

The latest version of Greg's code produces the following markup (which I am showing in a very simplified manner):

Code: Select all

<div class="serendipity_karmaVoting">
    <div class="serendipity_karmaVoting_text">aktuelle Bewertung:</div>
    <div align="right">
        <div class="serendipity_karmaVoting_links">
            <div class="serendipity_karmaVoting_current-rating"> </div>
            <a class="serendipity_karmaVoting_link1"> </a>
            <a class="serendipity_karmaVoting_link2"> </a>
            <a class="serendipity_karmaVoting_link3"> </a>
            <a class="serendipity_karmaVoting_link4"> </a>
            <a class="serendipity_karmaVoting_link5"> </a>
        </div>
    </div>
    <span class="serendipity_karmaVoting_current">6 Stimme(n) </span>
    , 
    <span class="serendipity_karmaVoting_visits"> 38 Klicks</span>
</div>

1) what purpose does the <div align="right"> serve?
2) I suggest for the spaces after the comma, votes, and before # of Klicks.

gregman · Post by **gregman** » Wed Jan 16, 2008 8:41 pm

I totally agree.

1) to align right

I just missed kicking it out again
2) I'm not sure, if I understand... but I removed it anyway.

Greg

Post by **Don Chambers** » Wed Jan 16, 2008 9:15 pm

Greg - what I meant was to use in place of literal spaces after the comma which follows votes, and preceeds hits. I got sidetracked on something else temporarily so I have not yet tested your recent version. I'll get to that asap.

I am also redoing the star graphic so it takes up the full width. I'll let you know when that is complete and where you can get it.

carl_galloway · Post by **carl_galloway** » Thu Jan 17, 2008 8:40 am

Gee a lot has happened since my last worthless reply to this thread.

Gregman I'm loving what you've done with the plugin, it's been a long time coming, thanks dude.

You guys made a comment somewhere about modernising the code away from the old legacy stuff (a lot of which was written several years ago) and frankly has been the proverbial pain in the ass for any of us who have developed themes, often plugins are the worst culprit because none of them use the same bit of code, if you guys can update the html in the karma plugin away from the standard div filled with links to an unordered list that would be awesome, I think it would be a lot easier for us all if every plugin was standardised with lists instead of container divs. Heck it makes the html almost identical to our navbars which has got to be a good thing.

I've had a moment to test the plugin on my test server and I love the config options but I'd also like to see two other functions added if they're possible,

1. Make it possible to extend the karma voting period to all time. For me personally I'd prefer to see my all time votes instead of just articles upto x days after they were published.

2. I'd love to see a sidebar list of most popular entries, but not the current karma ranking which lists the author and their popularity, I'd prefer a list similar to the recent entries list but showing the top x number of popular entries.

Once again can't wait to see what the finished result will look like. Good work Gregman