Mouse wheel scrolling in FireFox JavaScript

Hello, i would ask you to help me with a custom scrollbar javascript, my problem is that the mouse wheel scrolling is not working in FF, only in IE, rest of the code is good, i've been working on it for a 1or2 weeks but i cant find the solution :( Hope u can help me, it would be really important.

Thanks
// Made by geeeet@ghtml.com
                              // Keep these two lines and you're free to use this code
 
                              // Known bugs :
                              // Not able to remove browser-scrollbar in netscape 6, if the span "content" is heigher than browserwindow... :-(
                              // If ie4.5 mac, please press apple-t to remove sidebar, otherwise everything is pushed 20px to the right...
 
                              // Corrected bugs :
                              // 25.01.2001 - When the height of the span "content" was less than the height of the span "contentClip" a javascript error occured, function changed : move()
                              // 21.02.2001 - Scrolling text wasn't selectable in ie, function changed : move()
                              // 05.03.2001 - Ie x and y coordinates was wrong when page was scrolled, function changed : getMouse()
 
 
 
 
 
 
 
                              // Touch me here :-)
                              var upH = 18; // Height of up-arrow
var upW = 21; // Width of up-arrow
var downH = 18; // Height of down-arrow
var downW = 21; // Width of down-arrow
var dragH = 42; // Height of scrollbar
var dragW = 44; // Width of scrollbar
var scrollH = 198; // Height of scrollbar
var speed = 10; // Scroll speed
 
 
                              // And now... go to the bottom of the page...
 
                              // Browser detection
                              var dom = document.getElementById ? true:false;
                              var nn4 = document.layers ? true:false;
                              var ie4 = document.all ? true:false;
 
                              var mouseY; // Mouse Y position onclick
                              var mouseX; // Mouse X position onclick
 
                              var clickUp = false; // If click on up-arrow
                              var clickDown = false; // If click on down-arrow
                              var clickDrag = false; // If click on scrollbar
                              var clickAbove = false; // If click above scrollbar
                              var clickBelow = false; // If click below scrollbar
 
                              var timer = setTimeout("",500); // Repeat variable
                              var upL; // Up-arrow X
                              var upT; // Up-arrow Y
                              var downL; // Down-arrow X
                              var downT; // Down-arrow Y
                              var dragL; // Scrollbar X
                              var dragT; // Scrollbar Y
                              var rulerL; // Ruler X
                              var rulerT; // Ruler Y
                              var contentT; // Content layer Y;
                              var contentH; // Content height
                              var contentClipH; // Content clip height
                              var scrollLength; // Number of pixels scrollbar should move
                              var startY; // Keeps track of offset between mouse and span
 
                              // Mousedown
                              function down(e){
                                   if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
                                   getMouse(e);
                                   startY = (mouseY - dragT);
 
                                   // If click on up-arrow
                                   if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
                                        clickUp = true;
                                        return scrollUp();
                                   }
                                   // Else if click on down-arrow
                                   else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
                                        clickDown = true;
                                        return scrollDown();
                                   }
                                   // Else if click on scrollbar
                                   else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
                                        clickDrag = true;
                                        return false;
                                   }
                                   else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
                                        // If click above drag
                                        if(mouseY < dragT){
                                             clickAbove = true;
                                             clickUp = true;
                                             return scrollUp();
                                        }
                                        // Else click below drag
                                        else{
                                             clickBelow = true;
                                             clickDown = true;
                                             return scrollDown();
                                        }
                                   }
                                   // If no scrolling is to take place
                                   else{
                                        return true;
                                   }
                              }
 
                              // Drag function
                              function move(e){
                                   if(clickDrag && contentH > contentClipH){
                                        getMouse(e);
                                        dragT = (mouseY - startY);
 
                                        if(dragT < (rulerT))
                                             dragT = rulerT;
                                        if(dragT > (rulerT + scrollH - dragH))
                                             dragT = (rulerT + scrollH - dragH);
 
                                        contentT = ((dragT - rulerT)*(1/scrollLength));
                                        contentT = eval('-' + contentT);
 
                                        moveTo();
 
                                        // So ie-pc doesn't select gifs
                                        if(ie4)
                                             return false;
                                   }
                              }
 
 
 
 
                                     function mouseWheel()
                              {
                                   if(!window.event) return; // Only do for IE
 
                                   var sspeed = 8; // Should be an integer >= 1
 
                                   if(window.event.wheelDelta > 0)
                                   {
                                        clickUp = true;
 
                                        for(var i = 0; i < sspeed; i++)
                                        {
                                             scrollUp();
                                        }
                                   }
                                   else if(window.event.wheelDelta < 0)
                                   {
                                        clickDown = true;
 
                                        for(var i = 0; i < sspeed; i++)
                                        {
                                             scrollDown();
                                        }
                                   }
 
                                   clickUp = clickDown = false;
                              }
 
 
 
                              function up(){
                                   clearTimeout(timer);
                                   // Resetting variables
                                   clickUp = false;
                                   clickDown = false;
                                   clickDrag = false;
                                   clickAbove = false;
                                   clickBelow = false;
                                   return true;
                              }
 
                              // Reads content layer top
                              function getT(){
                                   if(ie4)
                                        contentT = document.all.content.style.pixelTop;
                                   else if(nn4)
                                        contentT = document.contentClip.document.content.top;
                                   else if(dom)
                                        contentT = parseInt(document.getElementById("content").style.top);
                              }
 
                              // Reads mouse X and Y coordinates
                              function getMouse(e){
                                   if(ie4){
                                        mouseY = event.clientY + document.body.scrollTop;
                                        mouseX = event.clientX + document.body.scrollLeft;
                                   }
                                   else if(nn4 || dom){
                                        mouseY = e.pageY;
                                        mouseX = e.pageX;
                                   }
                              }
 
                              // Moves the layer
                              function moveTo(){
                                   if(ie4){
                                        document.all.content.style.top = contentT;
                                        document.all.ruler.style.top = dragT;
                                        document.all.drag.style.top = dragT;
                                   }
                                   else if(nn4){
                                        document.contentClip.document.content.top = contentT;
                                        document.ruler.top = dragT;
                                        document.drag.top = dragT;
                                   }
                                   else if(dom){
                                        document.getElementById("content").style.top = contentT + "px";
                                        document.getElementById("drag").style.top = dragT + "px";
                                        document.getElementById("ruler").style.top = dragT + "px";
                                   }
                              }
 
                              // Scrolls up
                              function scrollUp(){
                                   getT();
 
                                   if(clickAbove){
                                        if(dragT <= (mouseY-(dragH/2)))
                                             return up();
                                   }
 
                                   if(clickUp){
                                        if(contentT < 0){
                                             dragT = dragT - (speed*scrollLength);
 
                                             if(dragT < (rulerT))
                                                  dragT = rulerT;
 
                                             contentT = contentT + speed;
                                             if(contentT > 0)
                                                  contentT = 0;
 
                                             moveTo();
                                             timer = setTimeout("scrollUp()",25);
                                        }
                                   }
                                   return false;
                              }
 
                              // Scrolls down
                              function scrollDown(){
                                   getT();
 
                                   if(clickBelow){
                                        if(dragT >= (mouseY-(dragH/2)))
                                             return up();
                                   }
 
                                   if(clickDown){
                                        if(contentT > -(contentH - contentClipH)){
                                             dragT = dragT + (speed*scrollLength);
                                             if(dragT > (rulerT + scrollH - dragH))
                                                  dragT = (rulerT + scrollH - dragH);
 
                                             contentT = contentT - speed;
                                             if(contentT < -(contentH - contentClipH))
                                                  contentT = -(contentH - contentClipH);
 
                                             moveTo();
                                             timer = setTimeout("scrollDown()",25);
                                        }
                                   }
                                   return false;
                              }
 
                              // reloads page to position the layers again
                              function reloadPage(){
                                   location.reload();
                              }
 
                              // Preload
                              function eventLoader(){
                                   if(ie4){
                                        // Up-arrow X and Y variables
                                        upL = document.all.up.style.pixelLeft;
                                        upT = document.all.up.style.pixelTop;
                                        // Down-arrow X and Y variables
                                        downL = document.all.down.style.pixelLeft;
                                        downT = document.all.down.style.pixelTop;
                                        // Scrollbar X and Y variables
                                        dragL = document.all.drag.style.pixelLeft;
                                        dragT = document.all.drag.style.pixelTop;
                                        // Ruler Y variable
                                        rulerT = document.all.ruler.style.pixelTop;
                                        // Height of content layer and clip layer
                                        contentH = parseInt(document.all.content.scrollHeight);
                                        contentClipH = parseInt(document.all.contentClip.style.height);
 
                                   }
                                   else if(nn4){
                                        // Up-arrow X and Y variables
                                        upL = document.up.left;
                                        upT = document.up.top;
                                        // Down-arrow X and Y variables
                                        downL = document.down.left;
                                        downT = document.down.top;
                                        // Scrollbar X and Y variables
                                        dragL = document.drag.left;
                                        dragT = document.drag.top;
                                        // Ruler Y variable
                                        rulerT = document.ruler.top;
                                        // Height of content layer and clip layer
                                        contentH = document.contentClip.document.content.clip.bottom;
                                        contentClipH = document.contentClip.clip.bottom;
                                   }
                                   else if(dom){
                                        // Up-arrow X and Y variables
                                        upL = parseInt(document.getElementById("up").style.left);
                                        upT = parseInt(document.getElementById("up").style.top);
                                        // Down-arrow X and Y variables
                                        downL = parseInt(document.getElementById("down").style.left);
                                        downT = parseInt(document.getElementById("down").style.top);
                                        // Scrollbar X and Y variables
                                        dragL = parseInt(document.getElementById("drag").style.left);
                                        dragT = parseInt(document.getElementById("drag").style.top);
                                        // Ruler Y variable
                                        rulerT = parseInt(document.getElementById("ruler").style.top);
                                        // Height of content layer and clip layer
                                        contentH = parseInt(document.getElementById("content").offsetHeight);
                                        contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
                                        document.getElementById("content").style.top = 0 + "px";
 
                                   }
                                   // Number of pixels scrollbar should move
                                   scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
                                   // Initializes event capturing
 
                                   if(nn4){
                                        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
                                        window.onresize = reloadPage;
                                   }
                                   document.onmousedown = down;
                                   document.onmousemove = move;
                                   document.onmouseup = up;
                                   document.onmousewheel = mouseWheel;
                              }
 
                              function MM_swapImgRestore() { //v3.0
                                var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                              }
 
                              function MM_preloadImages() { //v3.0
                                var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                                   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                                   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                              }
 
                              function MM_findObj(n, d) { //v4.01
                                var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                                   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                                if(!x && d.getElementById) x=d.getElementById(n); return x;
                              }
 
                              function MM_swapImage() { //v3.0
                                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                                 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                              }

Open in new window

SajtAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KelevraCommented:
Hi,

that's really impressive all that code, to get the scrolling working!

here, is something though:

first:
Download Jquery here:

http://jquery.com/



Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use: (cf code snippet).


Go to the page: http://docs.jquery.com/Events/scroll
or
http://docs.jquery.com/Effects/animate#paramsoptions

everything would be just fine then! You'll discover an complete library of tool, to do just about everything on any brother!




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });
 
  });
  </script>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
</body>
</html>

Open in new window

0
SajtAuthor Commented:
Yeah but with this can i add custom pictures for ex. up and down arrow etc u know...
0
gartronCommented:
hey ..... from what i can see you are trying to get the mousewheel to work on a scroll box with custom pics .... i just finished figuring it out .... you need to get and install jquery and the query dely plugin (jquery.delay.js) and the mouse wheel plugin (http://plugins.jquery.com/project/mousewheel) .... so in the head of your html file call something like this ScoolDown() and ScoolUp() refer to fucntions i wrote on the bottom of the handels/scroller js hope this helps if i you need more detailed help post all of the equivelent files and make the question worth more points i'll see what i can do
garrett




$(document).ready(function() { 
 
$('.scroll1Content').mousewheel(function(event, delta) {
         	if (delta > 0 ) {
 			 ScollUp();
                    $(this).delay(1000,function(){
                      stopScroll();
    });
 
		};
		if (delta < 0 ) {
			 ScollDown();
                    $(this).delay(1000,function(){
                      stopScroll();
    });
 
                };
                             
});

Open in new window

0
ee_autoCommented:
Question PAQ'd and stored in the solution database.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.