jeremyBass26
asked on
a better, more reliable wheel scrolling script... maybe a refactor?
Hello, I'm looking to work on my script that I wrote based off a bunch of different articles and plug-ins all patched together to work for me... It's not pretty by any means... but it does work ... I think it's a little heavy and not very concise as it should be... but I'm still learning :-) almost 1 year yeah!!... so I was wanting to refactor I think... see if there was more of a fully jQuery way may-be... at least a shorter faster version I could turn this into... thanks for the help...
jeremyBass
jeremyBass
$(function() {function handle(delta) {
if (delta < 0) {
$(".SA").scrollTo({
top: '+=65px',
left: '+=0px'
},
{
offset: -0
});
} else {
$(".SA").scrollTo({
top: '-=65px',
left: '+=0px'
},
{
offset: -0
});
}
}
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel; (function(h) {
var m = h.scrollTo = function(b, c, g) {
h(window).scrollTo(b, c, g)
};
m.defaults = {
axis: 'y',
duration: 1
};
m.window = function(b) {
return h(window).scrollable()
};
h.fn.scrollable = function() {
return this.map(function() {
var b = this.parentWindow || this.defaultView,
c = this.nodeName == '#document' ? b.frameElement || b: this,
g = c.contentDocument || (c.contentWindow || c).document,
i = c.setInterval;
return c.nodeName == 'IFRAME' || i && h.browser.safari ? g.body: i ? g.documentElement: this
})
};
h.fn.scrollTo = function(r, j, a) {
if (typeof j == 'object') {
a = j;
j = 0
}
if (typeof a == 'function') a = {
onAfter: a
};
a = h.extend({},
m.defaults, a);
j = j || a.speed || a.duration;
a.queue = a.queue && a.axis.length > 1;
if (a.queue) j /= 2;
a.offset = n(a.offset);
a.over = n(a.over);
return this.scrollable().each(function() {
var k = this,
o = h(k),
d = r,
l,
e = {},
p = o.is('html,body');
switch (typeof d) {
case 'number':
case 'string':
if (/^([+-]=)?\d+(px)?$/.test(d)) {
d = n(d);
break
}
d = h(d, this);
case 'object':
if (d.is || d.style) l = (d = h(d)).offset()
}
h.each(a.axis.split(''),
function(b, c) {
var g = c == 'x' ? 'Left': 'Top',
i = g.toLowerCase(),
f = 'scroll' + g,
s = k[f],
t = c == 'x' ? 'Width': 'Height',
v = t.toLowerCase();
if (l) {
e[f] = l[i] + (p ? 0 : s - o.offset()[i]);
if (a.margin) {
e[f] -= parseInt(d.css('margin' + g)) || 0;
e[f] -= parseInt(d.css('border' + g + 'Width')) || 0
}
e[f] += a.offset[i] || 0;
if (a.over[i]) e[f] += d[v]() * a.over[i]
} else e[f] = d[i];
if (/^\d+$/.test(e[f])) e[f] = e[f] <= 0 ? 0 : Math.min(e[f], u(t));
if (!b && a.queue) {
if (s != e[f]) q(a.onAfterFirst);
delete e[f]
}
});
q(a.onAfter);
function q(b) {
o.animate(e, j, a.easing, b &&
function() {
b.call(this, r, a)
})
};
function u(b) {
var c = 'scroll' + b,
g = k.ownerDocument;
return p ? Math.max(g.documentElement[c], g.body[c]) : k[c]
}
}).end()
};
function n(b) {
return typeof b == 'object' ? b: {
top: b,
left: b
}
}
})(jQuery);
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
So I did find that plugin (below)... bit long like mine and I still need to tell it to move up or down the page...
>>>you should probably be more specific in your question (of what you want), and ask for things in smaller pieces
:-) this is the small piece of the much lager script... but I guess a smaller piece would be
>>>like instead of addEventListener you should use bind.
um... :-)
this
if (window.addEventListener) window.addEventListener('D OMMouseScr oll', wheel, false);
would be this??
$().bind('DOMMouseScroll', wheel, function(e){ false});
using bind in this manor is new to me... I've only used it for click before... :-/
>>>Take what you have and make it a plugin.
Never done that before and could use any help there you could spare...
/////////////////////
//////////////In short
/////////////////////
I'm open to ideas... I'm not set on anything more then improving the scroll function of the bigger script... so any ideas are welcomed... thank you again for the help...
>>>you should probably be more specific in your question (of what you want), and ask for things in smaller pieces
:-) this is the small piece of the much lager script... but I guess a smaller piece would be
>>>like instead of addEventListener you should use bind.
um... :-)
this
if (window.addEventListener) window.addEventListener('D
would be this??
$().bind('DOMMouseScroll',
using bind in this manor is new to me... I've only used it for click before... :-/
>>>Take what you have and make it a plugin.
Never done that before and could use any help there you could spare...
/////////////////////
//////////////In short
/////////////////////
I'm open to ideas... I'm not set on anything more then improving the scroll function of the bigger script... so any ideas are welcomed... thank you again for the help...
/**
*
* credits for this plugin go to brandonaaron.net
*
* unfortunately his site is down
*
* @param {Object} up
* @param {Object} down
* @param {Object} preventDefault
*/
/**
18 * Apply the mousewheel event to the elements in the jQuery object.
19 * The handler function should be prepared to take the event object
20 * and a param called 'delta'. The 'delta' param is a number
21 * either > 0 or < 0. > 0 = up and < 0 = down.
22 *
23 * The pageX, pageY, clientX and clientY event properties
24 * are fixed in Firefox.
25 *
26 * @example $("p").mousewheel(function(event, delta){
27 * if (delta > 0)
28 * // do something on mousewheel scroll up
29 * else if (delta < 0)
30 * //do something on mousewheel scroll down
31 * });
32 *
33 * @name mousewheel
34 * @type jQuery
35 * @param Function handler A function to call when onmousewheel fires. Should take two params: event and delta.
36 * @cat Plugins/Mousewheel
37 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
38 */
jQuery.fn.extend({
mousewheel: function(up, down, preventDefault) {
return this.hover(
function() {
jQuery.event.mousewheel.giveFocus(this, up, down, preventDefault);
},
function() {
jQuery.event.mousewheel.removeFocus(this);
}
);
},
mousewheeldown: function(fn, preventDefault) {
return this.mousewheel(function(){}, fn, preventDefault);
},
mousewheelup: function(fn, preventDefault) {
return this.mousewheel(fn, function(){}, preventDefault);
},
unmousewheel: function() {
return this.each(function() {
jQuery(this).unmouseover().unmouseout();
jQuery.event.mousewheel.removeFocus(this);
});
},
unmousewheeldown: jQuery.fn.unmousewheel,
unmousewheelup: jQuery.fn.unmousewheel
});
jQuery.event.mousewheel = {
giveFocus: function(el, up, down, preventDefault) {
if (el._handleMousewheel) jQuery(el).unmousewheel();
if (preventDefault == window.undefined && down && down.constructor != Function) {
preventDefault = down;
down = null;
}
el._handleMousewheel = function(event) {
if (!event) event = window.event;
if (preventDefault)
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var delta = 0;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (up && (delta > 0 || !down))
up.apply(el, [event, delta]);
else if (down && delta < 0)
down.apply(el, [event, delta]);
};
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', el._handleMousewheel, false);
window.onmousewheel = document.onmousewheel = el._handleMousewheel;
},
removeFocus: function(el) {
if (!el._handleMousewheel) return;
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', el._handleMousewheel, false);
window.onmousewheel = document.onmousewheel = null;
el._handleMousewheel = null;
}
};
ASKER
Also... this (code in code area) works great for saying the wheel is going up or down... which is just the top of the stuff above... but... it does not have the means to move the "page" (or ".SA") up and down which is what I need to do...
So I guess what I'm saying is that if someone knows a better way to move up or down the page only replacing the alert("up"); that would solve this question.... that would be I think the best course... then I can try rewriting in a more jquery way... Hope that was clear ... if not please just ask me and I'll restate in a different way...thanks for the help...
jeremyBass
So I guess what I'm saying is that if someone knows a better way to move up or down the page only replacing the alert("up"); that would solve this question.... that would be I think the best course... then I can try rewriting in a more jquery way... Hope that was clear ... if not please just ask me and I'll restate in a different way...thanks for the help...
jeremyBass
function handle(delta) {
if (delta < 0) {
alert("down");
} else {
alert("up");
}
}
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No need to be sorry, and it's not your fault.
I was just explaining why you might not get the help you need.
BTW, that's a clever workaround.
I was just explaining why you might not get the help you need.
BTW, that's a clever workaround.
ASKER
Thanks... funny what you think of when you have no choice but to fix something... still one issue with it but should be easy... anyways you can check it http://hellscanyonsportfishing.com/ not fully done but almost... thanks again for the help
jeremyBass
jeremyBass
ASKER
jeremyBass