Sajt
asked on
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
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];}
}
ASKER
Yeah but with this can i add custom pictures for ex. up and down arrow etc u know...
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
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();
});
};
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!
Open in new window