Menu
Hi, I’m new to JavaScript. I am using YUI and i am trying to make a star rating widget. I want to have multiple star ratings on a page. The problem is, is that i don’t know how to keep the state of the object.
When the user mouses over a star i want to be able to fire an event (which i can) but be able to access variables from that object (which i can’t)
i do not think i’m creating the object correctly. any help would be greatly appreciated. I’m at my wits end!
[CODE]
(function() {
rating = function(elem,avg) {
this.init(elem, avg);
};
rating.prototype = {
init :function(elem,avg) {
alert(“x”)
this.ratingDiv = YAHOO.util.Dom.get(elem);
this.starDiv = document.createElement(‘div’);
this.avgDisp = document.createElement(‘span’);
this.average = avg;
this.submitted = false;
this.make_stardiv();
},
make_stardiv : function() {
YAHOO.util.Dom.addClass(this.starDiv, ‘rating’);
this.starDiv.id=’starDiv’ + this.ratingDiv.id;
// make the stars
for (var i=1; i<=5; i++) {
// first, make a div and then an a-element in it
var star = document.createElement(‘div’);
star.id = ‘star’ + i + this.ratingDiv.id;
var a = document.createElement(‘a’);
a.href = ‘#’ + i;
a.innerHTML = i;
YAHOO.util.Dom.addClass(star, ‘star’);
star.appendChild(a);
this.starDiv.appendChild(star);
// add needed listeners to every star
YAHOO.util.Event.addListener(star, ‘mouseover’, this.hover_star, i);
YAHOO.util.Event.addListener(star, ‘mouseout’, this.reset_stars);
YAHOO.util.Event.addListener(star, ‘click’, this.submit_rating, i);
}
this.ratingDiv.appendChild(this.starDiv);
YAHOO.util.Dom.addClass(this.avgDisp, ‘oScoreText’);
//rating.avgDisp.id = ‘avgScore_’;//+ rating.ratingDiv.id;
this.starDiv.appendChild(this.avgDisp);
// show the average
this.reset_stars();
},
reset_stars : function() {
// if form is not submitted, the number of stars on depends on the
// given average value
if (this.submitted == false) {
var avg =this.average.split(“.”);
var stars_on = avg[0];
if (avg[1] >= 0)
stars_on = parseInt(avg[0]) + 1;
var last_star_width = avg[1] + ‘0%’;
} else {
// if the form is submitted, then submitted number stays on
var stars_on = this.submitted;
var last_star_width = ‘100%’;
}
// cycle trought 1..5 stars
var node;
if(this.parentNode != undefined)
node = this.parentNode.parentNode.id;
else
node = this.ratingDiv.id;
for (var i=1; i<=5; i++) {
var star = YAHOO.util.Dom.get(‘star’ + i + node);
var a = star.firstChild;
// first, reset all stars
YAHOO.util.Dom.removeClass(star, ‘hover’);
YAHOO.util.Dom.removeClass(star, ‘on’);
// for every star that should be on, turn them on
if (i<=stars_on && !YAHOO.util.Dom.hasClass(star, ‘on’))
YAHOO.util.Dom.addClass(star, ‘on’);
// and for the last one, set width if needed
if (i == stars_on)
YAHOO.util.Dom.setStyle(a, ‘width’, last_star_width);
}
if(this.average !=””) {
this.avgDisp.innerHTML=this.average;
}
},
hover_star : function(e, which_star) {
for (var i=1; i<=which_star; i++) {
var star = YAHOO.util.Dom.get(‘star’ + i + this.parentNode.parentNode.id);
var a = star.firstChild;
YAHOO.util.Dom.addClass(star, ‘hover’);
YAHOO.util.Dom.setStyle(a, ‘width’, ‘100%’);
}
}
};
})();
// i call this function to create the 2 rating objects
function foo(){
var x = new rating(‘ratingdiv’,’3.4′);
var y= new rating(‘ratingdiv2′,’2.4’);
}