Hello, I am having some difficulties writing a class, in my code I have a class
where I need to be able to bind event listeners to values. In my code I want
the variable pointerIndex to be accessible outside of the initialize function,
but right now it is not. If I make a global variable for pointerIndex I can
solve the problem, but I would rather have a class variable using the this
keyword.
I am not positive, but I believe the problem is from my event listeners on the
line:
Now: $(e).observe('click', this.doSlide.bind(featuresWrapper[i].id));
Before: (working) $(e).observe('click',
mySlide.doSlide.curry(featuresWrapper[i].id));
With the new way of calling the doSlide function I can't even seem to be able
to call the function, nothing happens when the function should get called.
Before I was using the curry function to try and pass the values of the
featuresWrapper array to the doSlide function. I was able to get that to work,
but I would rather just use bind and this to make the code more object
oriented. Based on my alert statements I can tell that the this keyword is
different inside and outside of the map function.
var SlideShow = Class.create({
initialize: function(parentDiv) {
this.pointerIndex = 0;
//pointerIndex = 0;
// Load the event listener for each section
document.observe("dom:loaded", function() {
var featuresWrapper = $('featuresWrapper').childElements();
var i = 0;
alert(this);
$(parentDiv).childElements().map(function(e) {
alert(this);
$(e).observe('click', this.doSlide.bind(featuresWrapper[i].id));
//$(e).observe('click', mySlide.doSlide.curry(featuresWrapper[i].id));
i++;
});
slides = $$('.featureImage').map(function(e) {
return e.id;
});
});
},
doSlide: function(slideClicked) {
alert('here');
if(active == 0) {
active = 1;
var yValCurrent = $(slides[this.pointerIndex]).viewportOffset().top;
//var yValCurrent = $(slides[pointerIndex]).viewportOffset().top;
var yValClick = $(slideClicked).viewportOffset().top;
var yValDiff = yValClick - yValCurrent;
var pointerShift = 0;
if (Math.abs(yValDiff) == Math.abs(210)) {
pointerShift = 70; // Change this to get the height as well as a few more
}
else {
pointerShift = 140;
}
if (yValDiff > 0) {
$$('.featureImage').map(function(e) {
new Effect.Move(e, { y: -yValDiff, duration: .8, afterFinish: function(e) {
active = 0; } });
});
new Effect.Move('featurePointer', { y: pointerShift });
}
else if (yValDiff < 0) {
$$('.featureImage').map(function(e) {
new Effect.Move(e, { y: -yValDiff, duration: .8, afterFinish: function(e) {
active = 0; } });
});
new Effect.Move('featurePointer', { y: -pointerShift });
}
this.pointerIndex = slides.indexOf(slideClicked);
}
}
});
var slides;
var active = 0;
//var pointerIndex = 0;
var mySlide = new SlideShow('featureList');
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
