[JavaScript+PHP] IE Browser Ruins Rating System

[s-p-n]

Oh what a tangled web I've weaved..

Just as I thought I completed my rating system, IE Browser seems to have trouble displaying one of my PHP generated directory pages.

I did a quick JavaScript tut on How to change multiple images on a single Roll-Over. Basically, I just wanted all the stars behind the rolled over star to light up for a simple visual for ratings. Like how Yahoo ratings work; When you roll over a star, all the ones before it should light up, and the ones after should dull out (turn grey in my case).

I need a JavaScript Wiz Kid to help me out here. I couldn't get the for(i=0;i<5;i++ loop working right, so I just followed the tutorial the site gave me and made it compatible to do 5 stars.

It works like this in the head:

 <SCRIPT language="JavaScript">
<!--
  if (document.images)
   {
     pic1on= new Image(20,20);
     pic1on.src="[URL]http://www.avsbest.com/images/rating_star1.png[/URL]";  
     pic2on= new Image(20,20);
     pic2on.src="[URL]http://www.avsbest.com/images/rating_star1.png[/URL]";
     pic3on= new Image(20,20);
     pic3on.src="[URL]http://www.avsbest.com/images/rating_star1.png[/URL]";
     pic4on= new Image(20,20);
     pic4on.src="[URL]http://www.avsbest.com/images/rating_star1.png[/URL]";
     pic5on= new Image(20,20);
     pic5on.src="[URL]http://www.avsbest.com/images/rating_star1.png[/URL]";
 
     pic1off= new Image(20,20);
     pic1off.src="[URL]http://www.avsbest.com/images/rating_star0.png[/URL]";
     pic2off= new Image(20,20);
     pic2off.src="[URL]http://www.avsbest.com/images/rating_star0.png[/URL]";
     pic3off= new Image(20,20);
     pic3off.src="[URL]http://www.avsbest.com/images/rating_star0.png[/URL]";
     pic4off= new Image(20,20);
     pic4off.src="[URL]http://www.avsbest.com/images/rating_star0.png[/URL]";
     pic5off= new Image(20,20);
     pic5off.src="[URL]http://www.avsbest.com/images/rating_star0.png[/URL]";
   }
function lightup(imgName,imgName2,imgName3,imgName4,imgName5)
 {
   if (document.images)
    {
      imgOn=eval("pic1on.src");
      document[imgName].src= imgOn;
   if(imgName2){
        imgOn2=eval("pic2on.src");
        document[imgName2].src= imgOn2;
   } if(imgName3){
        imgOn3=eval("pic3on.src");
        document[imgName3].src= imgOn3;
   } if(imgName4){
        imgOn4=eval("pic4on.src");
        document[imgName4].src= imgOn4;
   } if(imgName5){
        imgOn5=eval("pic5on.src");
        document[imgName5].src= imgOn5;
   }
    }
 }
function turnoff(imgName,imgName2,imgName3,imgName4,imgName5)
 {
   if (document.images)
    {
      imgOff=eval("pic1off.src");
      document[imgName].src= imgOff;
   if(imgName2){
        imgOff2=eval("pic2off.src");
        document[imgName2].src= imgOff2;
   } if(imgName3){
        imgOff3=eval("pic3off.src");
        document[imgName3].src= imgOff3;
   } if(imgName4){
        imgOff4=eval("pic4off.src");
        document[imgName4].src= imgOff4;
   } if(imgName5){
        imgOff5=eval("pic5off.src");
        document[imgName5].src= imgOff5;
   }
    }
 }
//-->
</SCRIPT>

I don't need a for(i) loop, I think it works fine like this and I'm not complaining.

This is where the stars are made in PHP:

if($thisRating > 0) {
 
  for($r=1;$r<=$thisRating;$r++) {
   if(strlen($iRated)>1) {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'/editRating/'.$r.'_'.$_SESSION['SessionID'].'_'.$myRating.'/'.$parent.'.html#'.$parent;
   } else if(strlen($_SESSION['SessionID'])>0) {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'/addRating/'.$r.'/'.$parent.'.html#'.$parent;
   } else {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'.html#'.$parent;;
   }
   echo '<a href="'.$submitRatingURL.'" onMouseOver="lightup(';
 
   for($t=1;$t<($r+1);$t++) {
    echo "'".$parent."_".$t."'";
    if($t<$r) {
     echo ', ';
    }
   }
 
   echo ')" />';
   echo '<IMG width="20" height="20" src="http://www.avsbest.com/images/rating_star1" border="0" alt="Rating: '.$thisRating.'" name="'.$parent.'_'.$r.'" />';
   echo '</a>';
 
    }
    for($r=1;$r<=(5-$thisRating);$r++) {
   $s = $r+$thisRating;
   if(strlen($iRated)>1) {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'/editRating/'.$s.'_'.$_SESSION['SessionID'].'_'.$myRating.'/'.$parent.'.html#'.$parent;
   } else if(strlen($_SESSION['SessionID'])>0) {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'/addRating/'.$s.'/'.$parent.'.html#'.$parent;
   }
 
   echo '<a href="'.$submitRatingURL.'" onMouseOver="lightup(';
 
 
   for($t=1;$t<=$s;$t++) {
    echo "'".$parent."_".$t."'";
    if($t<$s) {
     echo ', ';
    }
   }
 
   echo ')" onMouseOut="turnoff(';
   for($t=$thisRating+1;$t<=$s;$t++) {
    echo "'".$parent."_".$t."'";
    if($t<$s) {
     echo ', ';
    }
   }
 
   echo ')" />';
   echo '<IMG width="20" height="20" src="http://www.avsbest.com/images/rating_star0" border="0" alt="Rating: '.$thisRating.'" name="'.$parent.'_'.$s.'" />';
   echo '</a>';
 
 
 
    }
   } else {
  for($r=1;$r<6;$r++) {
   if(strlen($_SESSION['SessionID'])>0) {
    $submitRatingURL = 'http://www.avsbest.com/categories/'.$category.'/addRating/'.$r.'/'.$parent.'.html#'.$parent;
   }
   echo '<a href="'.$submitRatingURL.'" onMouseOver="lightup(';
 
   for($t=1;$t<($r+1);$t++) {
    echo "'".$parent."_".$t."'";
    if($t<$r) {
     echo ', ';
    }
   }
 
   echo ')" onMouseOut="turnoff(';
   for($t=1;$t<($r+1);$t++) {
    echo "'".$parent."_".$t."'";
    if($t<$r) {
     echo ', ';
    }
   }
 
   echo ')" />';
   echo '<IMG width="20" height="20" src="http://www.avsbest.com/images/rating_star0" border="0" alt="Rating: '.$thisRating.'" name="'.$parent.'_'.$r.'" />';
   echo '</a>';
  }
 }

When all is said and done, this is what gets exported to the browser's source to make 5 stars for 1 listing.(Enter Spaces added after each HTML enclosed brackets for readablillity. If ther were spaces in the source, there would be a space after each star.. too much space)

<a href="[URL]http://www.avsbest.com/categories/automotive.html#listing_247[/URL]" onMouseOver="lightup('listing_247_1')" >
<IMG width="20" height="20" src="[URL]http://www.avsbest.com/images/rating_star1[/URL]" border="0" alt="Rating: 4" name="listing_247_1" />
</a>
<a href="[URL]http://www.avsbest.com/categories/automotive.html#listing_247[/URL]" onMouseOver="lightup('listing_247_1', 'listing_247_2')" >
<IMG width="20" height="20" src="[URL]http://www.avsbest.com/images/rating_star1[/URL]" border="0" alt="Rating: 4" name="listing_247_2" />
</a>
<a href="[URL]http://www.avsbest.com/categories/automotive.html#listing_247[/URL]" onMouseOver="lightup('listing_247_1', 'listing_247_2', 'listing_247_3')" >
<IMG width="20" height="20" src="[URL]http://www.avsbest.com/images/rating_star1[/URL]" border="0" alt="Rating: 4" name="listing_247_3" />
</a>
<a href="[URL]http://www.avsbest.com/categories/automotive.html#listing_247[/URL]" onMouseOver="lightup('listing_247_1', 'listing_247_2', 'listing_247_3', 'listing_247_4')" >
<IMG width="20" height="20" src="[URL]http://www.avsbest.com/images/rating_star1[/URL]" border="0" alt="Rating: 4" name="listing_247_4" />
</a>
<a href="[URL]http://www.avsbest.com/categories/automotive.html#listing_247[/URL]" onMouseOver="lightup('listing_247_1', 'listing_247_2', 'listing_247_3', 'listing_247_4', 'listing_247_5')" onMouseOut="turnoff('listing_247_5')" >
<IMG width="20" height="20" src="[URL]http://www.avsbest.com/images/rating_star0[/URL]" border="0" alt="Rating: 4" name="listing_247_5" />
</a>

Notice: It only puts the onMouseOut option if the star is not lit up. In this listing, it has a rating of 4, so only the 5th star is programmed to turn off onMouseOut.

The varriable $parent is what I use to tell my server what part of the site it's on. For example, for Business Listing with the ID of 123, it exports: listing_123. If it were a rating on someone's profile with the ID of 15, (not invented yet, but hope for the future), it would export: profile_15. I break it apart later by splitting at the underscore.

This system seems to be working good on every generated page on every browser. Of corse, with the exception of IE, but only on the automotive page. Every other page I tried with IE worked fine, just like Firefox and Safari. Another thing, the Automotive page reacts fine with Safari and Firefox.

My question to you is: What could be causing a single browser (IE) to have a problem with 1/20 pages generated from the same exact source?

JavaScript Error: Object Expected

Problem Page (only broken on IE 7 for me..):
http://www.avsbest.com/categories/automotive.html

 

[Daevius]

Debugging JS is really a pain. The only thing it could be, is that the input or the output causes the error, not the code itself. The only advice I can give you...is check each value and narrow down the problem. Perhaps look for IE inabilities with JS, also, which IE version did you use?

Also, are you aware that old IE versions do not support transparent PNG's?

 

[s-p-n]

I know right..?

My site would look so trashy in old IE browsers..... .. But GIFs always seem to look yucky to me..

I realize transparent PNGs only work in later IE browsers, but I like the way PNGs can be clean-cut, low sized graphics, and GIFs always look distorted and color-shot.. I decided a while ago to work with PNGs instead of GIFs or JPEGs. Since hardly anyone uses old internet explorer, and so many people are drawn to firefox, I figured it wouldn't be too bad of a problem.

I'm using IE 7, and I tried using my new Monsta Browsa, (also IE 7) and did the little debug thing he put there, but that didn't help me.. Learned that I don't know how to debug javascript.. lmao!

Are there any other scripting languages that work during runtime? What does <script language="PHP"> do.. Anything?

I was messing around with the language type in DreamWeaver, and it gave me the option to use C#, JavaScript 1.0-1.5, jscript, PHP, VB, and VBscript. Do all of these work during runtime or just the JavaScript ones? I never knew that you could type language="PHP" lol..... am I that slow, or is dreamweaver off track here?

Or maybe JavaScript is my best bet, since it works on 90% of the pages it's used on.. not bad..

Anyway, the functionallity of the ratings system is done and over-with. A signed-in, registered user can, with the click of a single button, easily rate any listing in my database. Sadly, they don't get the luxery of rolling-over lightup while visiting the Automotive page... That's not too bad though. User-friendliness is my main goal here.

 

[Daevius]

Yep, I use PNG's only as well (or JPG's for big low resolution pictures).

JS is the only language which is executed at the client, in normal sites.

 

[Alphabeat]

IE ruins more than a ratings-system, it ruins your whole internet-experience.
Firefox owns.

 

[s-p-n]

IE ruins more than a ratings-system, it ruins your whole internet-experience.
Firefox owns.

Yeah but I have to design for IE because it's the browser that over 50% of the users on the Internet use. Most people, (not developers), like the way Internet explorer works, and blame web designers for why the site looks broken in IE.

Everyone else who uses IE might not even know of FireFox, or how to get it. My Grandma doesn't like firefox because... Well I can't really understand why actually. Internet Explorer appeals to some users as a browser that feels like home; Especially if the user doesn't even know what a browser is.

Just because a site works in Firefox doesn't mean it will work in IE. If you test for IE and it works, odds are that it works in Firefox and other browsers.

If you design something to work in firefox, it will look the same in firefox, Netscape, opera, safari.. etc.. the list goes on and on.. But usually not Internet explorer.

However, even though most browsers work like firefox, most users on your website still use Internet explorer. So when testing, test with IE. Problems with IE are problems with your website. My broken ratings system is my responsibility as a web-designer to fix. IE isn't going to magically change over night to fit my needs.

I really don't like how IE is the most popular browser because Windows is the most popular OS... Windows and Internet Explorer both suck, both are full of bugs, and windows even invented a way for computers to get "sick".. How the fuck did viruses come to be? lol... Stupid windows didn't think of alot of things...

 

[Daevius]

I really don't like how IE is the most popular browser because Windows is the most popular OS... Windows and Internet Explorer both suck, both are full of bugs, and windows even invented a way for computers to get "sick".. How the fuck did viruses come to be? lol... Stupid windows didn't think of alot of things...

Very true, it's unbelievable how they can make an OS so slow and insecure, and still have a market share of about 98% :S, but that's another matter

Fact is, IE doesn't keep to the rules (MS never does that). So why would I keep to IE's rules? I make my site for Firefox, which lets me use the correct standards. Then I'd add fixes for IE...rather annoying -.-

 

[playg]

Dono why but for me IE downlaods way faster then firefox

 

[Callan]

It can be a pain that old IE browsers don't support transparency on PNG's.

IE PNG fix

 

[Daevius]

Dono why but for me IE downlaods way faster then firefox

Bandwidth has nothing to do with browsers.

 

[s-p-n]

any suggestions on how to fix my javascript problem? lol..