I got an error: e is undefined on my javascript slider code when running it on Firefox.
On Chrome it works like a charm.
I’ve looked for an answer and found some posts and answers (even this one: Windows.event is undefined -Javascript error in firefox)
However , I didn’t succeed to implement that solution in my code and allways got more e is undefined errors.
Would like to get an advice of how to solve it.
My js code: (Focusing on the this.sliderMove function)
(function(){
function reallyNiceSlider(obj){
/* From how far the mouse starts affecting the item? in pixels */
this.range = {min: 2, max: 200};
/* how smooth would the transition be? Every step is another call of the interval function before getting to the final goal */
this.steps=5;
/* A variable to hold the index of our interval function */
this.t=-1;
/* 2 dimensional array: targets[i][0] = goal width of object; targets[i][1] = step size; targets[i][2] = the object; targets[i][3] = saving the width of the object; targets[i][4] = Width when mouse is out of range */
this.targets = new Array();
/* The object of the slider */
this.slider = obj;
/* max and min sizes */
this.values = {min: 80, max: 130}
/* safe range */
this.safe = 0;
this.sideMargin = 3;
this.init = function(){
var children = this.slider.getElementsByTagName('a');
var selectedObj = null;
for(var i = 0; i < children.length; i++){
if(children[i].className == 'selected')
selectedObj = children[i];
children[i].getElementsByTagName('img')[0].style.width = this.values.min + 'px';
this.targets[i] = Array(-1, 0, children[i], this.values.min, -1);
}
if(selectedObj)
this.sliderPick();
}
this.truePosition = function(obj){
var x=obj.offsetWidth/2, y=obj.offsetHeight/2;
do{
x += obj.offsetLeft;
y += obj.offsetTop;
}while(obj = obj.offsetParent);
return {x:x,y:y};
}
this.sliderMove = function(obj){
var e = window.event;
var range = obj.range;
var offset, cursor={x:0,y:0}, diff={x:0,y:0,total:0,ratio:0}, opacity, max = range.max+obj.safe, child;
var selectedObj = null;
if(e.pageX || e.pageY){
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else{
cursor.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
cursor.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
for(var i=0; i < obj.targets.length; i++){
child = obj.targets[i];
offset = obj.truePosition(child[2].getElementsByTagName('img')[0]);
diff.x = cursor.x > offset.x ? cursor.x - offset.x : offset.x - cursor.x;
diff.y = cursor.y > offset.y ? cursor.y - offset.y : offset.y - cursor.y;
diff.total = Math.sqrt(diff.y*diff.y + diff.x*diff.x);
if(diff.total < max){
max = diff.total;
diff.ratio = diff.x / diff.total;
}
if(child[2].className == 'selected')
selectedObj = child[2];
}
if(max <= range.max){
for(var i=0; i < obj.targets.length; i++){
child = obj.targets[i];
offset = obj.truePosition(child[2].getElementsByTagName('img')[0]);
diff.x = cursor.x > offset.x ? cursor.x - offset.x : offset.x - cursor.x;
diff.y = cursor.y > offset.y ? cursor.y - offset.y : offset.y - cursor.y;
diff.total = Math.sqrt(diff.y*diff.y + diff.x*diff.x);
if(diff.total > range.max) diff.total = range.max;
if(diff.total < range.min) diff.total = 0;
child[0] = parseInt( obj.values.max - ((diff.total/range.max) * (obj.values.max - obj.values.min) ));
if(child[0] > obj.values.max) child[0] = obj.values.max;
child[1] = (child[0] - child[3])/this.steps
obj.targets[i] = child;
}
if(this.t < 0)
obj.makeInterval(obj);
}
else if(selectedObj && max >= range.max+(obj.safe * diff.ratio))
obj.sliderPick();
}
this.findSize = function(range_obj){
var range = this.range, values = this.values;
if(range_obj > range.max) return values.min;
var range_edge = range.max - range_obj;
var size_at_point = (values.max - values.min) * ( range_edge / range.max);
return (range_edge / ((range_edge / size_at_point) + 1)) + values.min;
}
this.sliderPick = function(){
var e = window.event;
var range = this.range;
var offset, cursor={x:0,y:0}, diff={x:0,y:0,total:0}, opacity, child;
var selectedObj;
var difference = {init: 0, cumulative: 0}, j;
if(this.safe == 0){
for(j=0; j < this.targets.length; j++){
child = this.targets[j];
if(child[2].className == 'selected'){
child[0] = this.values.max;
child[4] = child[0];
child[1] = (child[0] - child[3])/ this.steps;
difference.init = (child[0] / 2) + this.sideMargin;
this.safe = (child[0] - child[3]) / 2;
cursor = this.truePosition(child[2].getElementsByTagName('img')[0]);
break;
}
}
difference.cumulative = difference.init;
for(var i=j+1; i < this.targets.length; i++){
child = this.targets[i];
child[0] = parseInt( this.findSize(difference.cumulative) );
child[4] = child[0];
difference.cumulative += child[0] + this.sideMargin;
child[1] = (child[0] - child[3])/this.steps;
this.safe += (child[0] - child[3]) / 2;
}
difference.cumulative = difference.init;
for(var i=j-1; i >= 0; i--){
child = this.targets[i];
child[0] = parseInt( this.findSize(difference.cumulative) );
child[4] = child[0];
difference.cumulative += child[0] + this.sideMargin;
child[1] = (child[0] - child[3])/this.steps;
this.safe += (child[0] - child[3]) / 2;
}
}
else{
for(var i=0; i < this.targets.length; i++){
child = this.targets[i];
child[0] = child[4];
child[1] = (child[0] - child[3])/this.steps
this.targets[i] = child;
}
}
if(this.t < 0)
this.makeInterval(this);
}
this.makeStep = function(obj){
var target, diff, sliderOffset = this.slider.offsetHeight, done=0;
for(var i = 0; i < obj.targets.length; i++){
target = obj.targets[i];
if(target[0] < 0) continue;
done = 1;
if(target[1]*target[1] >= (target[0] - target[3])*(target[0] - target[3])){
target[3] = target[0];
target[0] = -1;
}
else
target[3] = target[3] + target[1];
target[2].getElementsByTagName('img')[0].style.width = Math.round(target[3]) + 'px';
target[2].getElementsByTagName('img')[0].style.marginTop = Math.round( ( sliderOffset - target[2].getElementsByTagName('img')[0].offsetHeight ) / 2 ) + 'px';
opacity = parseInt(100* (target[3] / this.values.max) );
target[2].style.opacity=opacity/100;
target[2].style.filter='alpha(opacity=' + opacity + ')';
}
if(done == 0){
clearInterval(obj.t);
obj.t = -1;
}
}
this.makeInterval = function(obj){
obj.t = setInterval(function(){obj.makeStep(obj)}, 40);
}
this.init();
}
function reallyNice_slider_init(){
jQuery('.reallyNice_slider').each(function(){
var slider = new reallyNiceSlider(this);
if(document.addEventListener)
document.addEventListener('mousemove', function(){slider.sliderMove(slider)}, false);
else
document.attachEvent('onmousemove', function(){slider.sliderMove(slider)});
this.style.visibility = 'visible';
});
}
if(window.addEventListener)
window.addEventListener('load', reallyNice_slider_init, false);
else
window.attachEvent('onload', reallyNice_slider_init);
})();
UPDATE 1: When using the Firefox error’s interface it says e is undefined and points the next line:
if(e.pageX || e.pageY){
Thanks in advance.
Change your handlers to this…
Then change your functions to receive the event object as the first argument.