...

View Full Version : Scrollbar works fine in IE, trouble in FF.



Single Paradox
08-11-2005, 07:48 PM
I made a custom javascript scrollbar and it works just peachy in Internet Explorer, but for some reason event.clientY doesn't want to work in Firefox. I think that is the problem but I can't be sure. Can anyone help?


Edit:

My apologies, forgot the link:
http://www.singleparadox.com/codes/scrollBar.htm

vwphillips
08-11-2005, 10:41 PM
I'm afraid there are a number of X-Browser issues
tryed to modify your script but was changing too much
so put this together to give you some ideas


<html><head>
<script>
// Custom Scroll (11-08-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

var zxcObj,zxcDragX,zxcMseX,zxcDragY,zxcMseY;


function zxcCustomYScroll(){
zxcarg=zxcCustomYScroll.arguments;
for (zxc0=0;zxc0<zxcarg.length;zxc0+=2){
zxcobj=document.getElementById(zxcarg[zxc0+1]);
zxcpobj=zxcobj.getElementsByTagName('DIV')[0];
zxcsobj=document.getElementById(zxcarg[zxc0]).getElementsByTagName('DIV')[0];
zxcsobj.onmousedown=function(event){ zxcYMseDown(event,this);}
zxcsobj.theheight=zxcpobj.offsetHeight-zxcobj.offsetHeight+zxcsobj.offsetHeight*2;
zxcsobj.ph=zxcobj.offsetHeight;
zxcsobj.parentNode.style.height=(zxcsobj.ph)+'px';
zxcsobj.obj=zxcpobj;
}
}

function zxcCustomXScroll(){
zxcarg=zxcCustomXScroll.arguments;
for (zxc0=0;zxc0<zxcarg.length;zxc0+=2){
zxcobj=document.getElementById(zxcarg[zxc0+1]);
zxcpobj=zxcobj.getElementsByTagName('DIV')[0];
zxcsobj=document.getElementById(zxcarg[zxc0]).getElementsByTagName('DIV')[0];
zxcsobj.onmousedown=function(event){ zxcXMseDown(event,this);}
zxcsobj.thewidth=zxcpobj.offsetWidth-zxcobj.offsetWidth+zxcsobj.offsetWidth*2;
zxcsobj.pw=zxcobj.offsetWidth;
zxcsobj.parentNode.style.width=(zxcsobj.pw)+'px';
zxcsobj.obj=zxcpobj;
}
}


function zxcYMseDown(event,obj) {
document.onmousemove=function(event){zxcYDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}
zxcObj=obj;
zxcMse(event);
zxcDragY=zxcMseY-zxcObj.offsetTop;
}

function zxcXMseDown(event,obj) {
document.onmousemove=function(event){zxcXDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}
zxcObj=obj;
zxcMse(event);
zxcDragX=zxcMseX-zxcObj.offsetLeft;
}

function zxcYDrag(event) {
zxcMse(event);
if ((zxcMseY-zxcDragY)>0&&(zxcMseY-zxcDragY)<zxcObj.ph-zxcObj.offsetHeight){
zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
}
zxcObj.obj.style.top=(-zxcObj.theheight*(zxcObj.offsetTop)/(zxcObj.ph))+'px';
}

function zxcXDrag(event) {
zxcMse(event);
if ((zxcMseX-zxcDragX)>0&&(zxcMseX-zxcDragX)<zxcObj.pw-zxcObj.offsetWidth){
zxcObj.style.left=(zxcMseX-zxcDragX)+'px';
}
zxcObj.obj.style.left=(-zxcObj.thewidth*(zxcObj.offsetLeft)/(zxcObj.pw))+'px';
}

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}

function zxcMseUp(event) {
document.onmousemove=null; zxcDragX=-1; zxcDragY=-1;
}

</script>

</head>

<body onload="zxcCustomYScroll('scrollbox','databox','scrollbox2','databox2');zxcCustomXScroll('scrollboxX','datab ox');">

<div id="databox" style="position: absolute;overflow:hidden;left:50px;top:50px;width:200px;height:200px;border:solid black 1px;" >
<div style="position: absolute; left: 0px; top: 0px; width:400px;text-Align:center;" >
<br>
MouseOver=stop<br>
MouseOut=start<br>
SingleClick=slower<br>
DoubleClick=faster<br>
This page has data in it.<br>

More data More data More data More data
More data<br>
More data<br>
More data<br>
More data<br>
More data<br>

Some stuff1<br>
Some stuff2<br>
Some stuff3<br>
Some stuff4<br>
Some stuff5<br>
Some stuff6<br>
Some stuff7<br>
<br>
</div>
</div>
<div id="scrollbox" style="position:absolute;overflow:hidden;left:250px;top:50px;width:20px;height:200px;background-Color:blue;border:solid black 1px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:red;border:solid black 1px;" >
</div>
</div>
<div id="scrollboxX" style="position:absolute;overflow:hidden;left:50px;top:250px;width:200px;height:20px;background-Color:blue;border:solid black 1px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:red;border:solid black 1px;" >
</div>
</div>


<div id="databox2" style="position: absolute;overflow:hidden;left:100px;top:350px;width:200px;height:100px;border:solid black 1px;" >
<div style="position: absolute; left: 0px; top: 0px; width: 200px;text-Align:center;" >
<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
The quick bown Fox<br>
<br>
<br>
</div>
</div>
<div id="scrollbox2" style="position:absolute;overflow:hidden;left:50px;top:350px;width:20px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:10px;background-Color:green;border:solid black 1px;" >
</div>
</div>

</body>
</html>

Single Paradox
08-11-2005, 11:07 PM
I'm sorry, I didn't understand one single thing in that script... Lets put it like this:

In IE:

event.clientY

In FF:

?????????????

Can you fill in the question marks please. If I figure that little bit out I can rewrite the code so I can read it. Sorry for being so ignorant. I am not expierienced with what FF can read. Just recently I found out that Firefox interprets differently than IE. Can you please fill in that little blank and I will be fine?

vwphillips
08-11-2005, 11:20 PM
you need to pass the event in firefox

note

document.onmousemove=function(event){zxcYDrag(event);}
document.onmouseup=function(event){zxcMseUp(event);}

and also note

function zxcMse(event){
if(!event) var event=window.event;
if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
}

for finding the mouse position

as I say I had problems modifying your code and dont like modifying code anyway, prefer to start afresh

these X-Browser issues are a pain

also my script still has a X-Browser problem(too much hast) but will sort tomorrow

Single Paradox
08-11-2005, 11:24 PM
Thank you VERY much with all your help (emphasis on very), I will look over your code and try to figure out what does what (too many "zxc"s lol). I will google what the difference is and so on so forth. Yes, I noticed in your code, scrolling was MUCH slower in Firefox than IE, it didn't even go all the way to the bottom of the div. Thanks again.

vwphillips
08-11-2005, 11:37 PM
said there was an issue, fixed now, silly error

ps note that style.top=(whatever)+'px';

the 'px' is needed for FF



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum