Grrr... #$!@& hopping page!

[ppetree]

Hi All!

I found a simple star-rating system based on mootools, dhtml and css. It seems to work fine with one exception that I just can't seem to figure out.

You set it up as in the following:

<td class='td_stars'>
    <ul id="price" class="rating onestar">
      <li id="1" class="rate one"><a href="#" title="1 Star"></a></li>
      <li id="2" class="rate two"><a href="#" title="2 Stars"></a></li>
      <li id="3" class="rate three"><a href="#" title="3 Stars"></a></li>
      <li id="4" class="rate four"><a href="#" title="4 Stars"></a></li>
      <li id="5" class="rate five"><a href="#" title="5 Stars"></a></li>
      <li id="6" class="rate six"><a href="#" title="6 Stars"></a></li>
      <li id="7" class="rate seven"><a href="#" title="7 Stars"></a></li>
      <li id="8" class="rate eight"><a href="#" title="8 Stars"></a></li>
      <li id="9" class="rate nine"><a href="#" title="9 Stars"></a></li>
      <li id="10" class="rate ten"><a href="#" title="10 Stars"></a></li>
    </ul>

Notice the href='#' - when you click on a star the URL gets rewritten and a # gets appended to it... which is no problem if the stars are above the scroll point (which the top 3 are) but if you have scrolled down to the 4th + rating and click a star the page "refreshes" or "hops" and you are taken back to the top.

To see this click here and then scroll down to the "Number of People" rating and click one of the stars.

Obviously the original designer is using the link to create a simple "onclick()" event so that he can change/set the star clicked on from the yellow "hoover star" to a "permanent green star" but the # thing... well, thats just GOTTA go!

Any ideas, thoughts, suggestions? I'll share what ever code needs to be shared.

Thanks!

Pete

[ShawnCplus]

Find the function that is getting attached to the <a> tags' onclick to actually do the magic and return false at the end of it. That prevent the link from jumping.

[wrivera]

remove the href='#' altogether. that is what causes the link to refresh the page or jump as you called it.

[ShawnCplus]

remove the href='#' altogether. that is what causes the link to refresh the page or jump as you called it.

An a tag without an href attribute is invalid, it also removes the pointer cursor from the a tag.

[wrivera]

An a tag without an href attribute is invalid, it also removes the pointer cursor from the a tag.

you could aslo use href="JavaScript:void(0);"

[ppetree]

you could aslo use href="JavaScript:void(0);"

This turned out to be the winning solution!

I tried finding the onclick() source and nothing appeared in the starrating.js (that was obvious to me - but I'm posting it here for the rest of you).

Next I tried the <a href="JavaScript:void(0);" and that worked... mostly. The side effect is that the stars stay yellow until you move away and then it shows your click took effect. Not ideal but I am probably the only one who will notice it.

Then I tried using a <a name="fake"> and then changing the <a href='#fake' and that caused two sets of rows of stars (yellow ones on bottom and green ones on top, you could only click the yellow ones but the green ones were updated). This was very strange since it was only the <a name= tag that was added and there is nothing in the .css that used that name.

So then I went back to the <a href="JavaScript:void(0);" and we're gonna live with that.

The Star Rating javascript is as follows:

// JavaScript Document
//<script>
$$('.rate').each(function(element,i){
	element.addEvent('click', function(){
		var myStyles = ['nostar', 'onestar', 'twostar', 'threestar', 'fourstar', 'fivestar', 'sixstar', 'sevenstar', 'eightstar', 'ninestar', 'tenstar'];
		myStyles.each(function(myStyle){
			if(element.getParent().hasClass(myStyle)){
				element.getParent().removeClass(myStyle)
			}
		});		
		myStyles.each(function(myStyle, index){
			if(index == element.id){
				element.getParent().toggleClass(myStyle);
        var parent_id = element.getParent();
				var hidden_name = 'txt_' +parent_id.id;
        var hidden_value = "";
        				
				$(hidden_name).set('value', element.id);

        hidden_value = $(hidden_name).get('value');
//				alert('Clicked: '+element.id +'\nField: ' +hidden_name);
//				alert('Value: ' +hidden_value);
        exit;
			}
		});		
		
	});
});

//</script>