Ultimater
05-08-2006, 01:12 AM
Open this in Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript">
function AdjustmentH(){
var t=this;
var div=document.createElement("div");
div.style.overflow="auto";
div.style.overflowY="hidden";
div.style.whiteSpace="nowrap";
div.style.width=arguments.length>0?arguments[0]:"100px";
div.style.height="20px";
var p=document.createElement("p");
p.style.width=arguments.length>1?arguments[1]:"10000px";
div.appendChild(p);
this.scrollLeft=0;
this.getPosition=function(){var scrollPos=div.scrollLeft, maxScroll=(div.scrollWidth-div.offsetWidth), scrollPercent=(scrollPos/maxScroll); return scrollPercent;}
this.setPosition=function(){t.scrollLeft=arguments[0]*(div.scrollWidth-div.offsetWidth);div.scrollLeft=t.scrollLeft;if(arguments.length>1 && arguments[1] && "call" in t.onchange)t.onchange(t.getPosition())}
div.onscroll=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
div.onmousemove=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
div.onclick=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
this.onchange=null;
this.element=div;
}
</script>
<script type="text/javascript">
var a=new AdjustmentH("200px","100000px");
a.onchange=function(p){document.getElementById("countPercent").firstChild.data=Math.round(p*100)+"%"}
</script>
</head>
<body>
<div>
<div id="el1" style="float:left;"></div><div style="float:left;"><span id="countPercent"> </span></div>
<script type="text/javascript">
document.getElementById("el1").appendChild(a.element);
a.setPosition(0.5,true)
</script>
</div>
</body>
</html>
If the you enter the page for the first time, the scrollbar will be centered and the textNode on the right will read correctly "50%". Then hit F5 on your keyboard to refresh the page and the scrollbar will move a little to the left, enough to knock it off center, and the textNode on the right will read incorrectly "50%".
How do I get a.setPosition(0.5,true) to center the scrollbar even if the user hits the F5 key on their keybaord so the textNode on the right will read correctly "50%"?
Any ideas as to why Firefox is stubbornly moving the scrollbar to the left?
I'm basically trying to write an easy to manage object for use in the future based-on this script of mine:
http://javascript.aplustv.com/colors/colorpicker.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript">
function AdjustmentH(){
var t=this;
var div=document.createElement("div");
div.style.overflow="auto";
div.style.overflowY="hidden";
div.style.whiteSpace="nowrap";
div.style.width=arguments.length>0?arguments[0]:"100px";
div.style.height="20px";
var p=document.createElement("p");
p.style.width=arguments.length>1?arguments[1]:"10000px";
div.appendChild(p);
this.scrollLeft=0;
this.getPosition=function(){var scrollPos=div.scrollLeft, maxScroll=(div.scrollWidth-div.offsetWidth), scrollPercent=(scrollPos/maxScroll); return scrollPercent;}
this.setPosition=function(){t.scrollLeft=arguments[0]*(div.scrollWidth-div.offsetWidth);div.scrollLeft=t.scrollLeft;if(arguments.length>1 && arguments[1] && "call" in t.onchange)t.onchange(t.getPosition())}
div.onscroll=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
div.onmousemove=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
div.onclick=function(){if(t.scrollLeft==div.scrollLeft)return;t.scrollLeft=div.scrollLeft;if("call" in t.onchange)t.onchange(t.getPosition())};
this.onchange=null;
this.element=div;
}
</script>
<script type="text/javascript">
var a=new AdjustmentH("200px","100000px");
a.onchange=function(p){document.getElementById("countPercent").firstChild.data=Math.round(p*100)+"%"}
</script>
</head>
<body>
<div>
<div id="el1" style="float:left;"></div><div style="float:left;"><span id="countPercent"> </span></div>
<script type="text/javascript">
document.getElementById("el1").appendChild(a.element);
a.setPosition(0.5,true)
</script>
</div>
</body>
</html>
If the you enter the page for the first time, the scrollbar will be centered and the textNode on the right will read correctly "50%". Then hit F5 on your keyboard to refresh the page and the scrollbar will move a little to the left, enough to knock it off center, and the textNode on the right will read incorrectly "50%".
How do I get a.setPosition(0.5,true) to center the scrollbar even if the user hits the F5 key on their keybaord so the textNode on the right will read correctly "50%"?
Any ideas as to why Firefox is stubbornly moving the scrollbar to the left?
I'm basically trying to write an easy to manage object for use in the future based-on this script of mine:
http://javascript.aplustv.com/colors/colorpicker.htm