So, I have been working on this script for a while, and I have it to where it works in Firefox, and Internet Explorer. I have been testing the code in a browser, but it loads the file from my HDD.
I uploaded the script to my site for use with my news feed, and it works great (in FireFox), but not so well in IE.
In IE, there is a bit of slowness to the motion of the rating bar. This slowness turns to a complete stop if there is a flash animation in the viewable window area (such as one of my news icons).
OK, now that you know the story, I'll give you the data.
This is the script that controls the bar.
This is the HTML code for the bar itself.
There is more Javascript for the AJAX but I didn't include that because It wouldn't effect this. The AJAX functions are only called after on clicks on the bar to rate the news item.
To better illustrate my dilemma, Copy the javascript and HTML into a page of your own and display it in a browser. In both IE and FF its pretty smooth motion. However if you go to My Website you will see the sluggishness in Internet Explorer.
Any ideas as to what might be causing this?
I uploaded the script to my site for use with my news feed, and it works great (in FireFox), but not so well in IE.
In IE, there is a bit of slowness to the motion of the rating bar. This slowness turns to a complete stop if there is a flash animation in the viewable window area (such as one of my news icons).
OK, now that you know the story, I'll give you the data.
This is the script that controls the bar.
| Code: |
|
function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curleft,curtop]; } function getMousePosition(event) { var IE = document.all?true:false; if(!IE){ var _X=event.clientX; var _Y=event.clientY; } else if(IE){ var _X=window.event.clientX; var _Y=window.event.clientY; } return [_X,_Y]; } function Calculate(holderid,barid,event) { obj = document.getElementById(holderid); mX = getMousePosition(event)[0]; oX = findPos(obj)[0]; _X = (mX-oX); _P = (_X/100)*100; var percent = new Number(_P); if(percent<=100.0 & percent>=1) { document.getElementById(barid).innerHTML = (percent/10).toFixed(1); document.getElementById(barid).style.width = percent+2 + "%"; document.getElementById(barid).style.textAlign = "right"; } } function reset(barid,currating){ document.getElementById(barid).style.width = (currating*10) + "%"; document.getElementById(barid).style.textAlign = "left"; document.getElementById(barid).innerHTML = "Rate Me"; } onerror=handleErr; function handleErr(msg,url,l) { var txt = ""; txt="There was an error on this page.\n\n"; txt+="Error: " + msg + "\n"; txt+="URL: " + url + "\n"; txt+="Line: " + l + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); return true; } |
This is the HTML code for the bar itself.
| Code: |
|
<div id="Holder" class="rateholder" onmouseout="reset('bar')" onmousemove="Calculate(this,'bar',event)"> <div id="bar" class="ratebar">Rate Me</div> </div> |
There is more Javascript for the AJAX but I didn't include that because It wouldn't effect this. The AJAX functions are only called after on clicks on the bar to rate the news item.
To better illustrate my dilemma, Copy the javascript and HTML into a page of your own and display it in a browser. In both IE and FF its pretty smooth motion. However if you go to My Website you will see the sluggishness in Internet Explorer.
Any ideas as to what might be causing this?
