Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scrollbar works fine in IE, trouble in FF.

    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
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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
    Code:
    <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','databox');">
    
    <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>
    Last edited by vwphillips; 08-11-2005 at 10:36 PM.

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    525
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Single Paradox
    My Site (Under construction)

    Not too bad for a 15 year old

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    said there was an issue, fixed now, silly error

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

    the 'px' is needed for FF


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •