Add function hook to JS

[OpherV]

It would be nice if you could add an option to add your own hooks for JS function. For example, I have a google map that I want to zoom in a certain part of the page scroll.

Example format:

addJsHook( startOffset, endOffset, easingFunc, executeFunc);

where executeFuncis of the sort function(percent) { }

So if I call addJsHook( 0, 500, "linear", function(percent) { console.log(percent) } );
I would get 0 when scroll is top of page, 50 when scroll is 250px and 500 when scroll is 500px.

[Prinzhorn]

Related: #99

Until I implement some sort of waypoint plugin, you can easily get around this like this

skrollr.init({
    render: function(data) {
        if(data.curTop >= 0 && data.curTop <= 500) {
            var p = data.curTop / 500;

            //p is the percentage in the range [0, 1]
        }
    }
});

This code is untested, but gives you the idea

[Prinzhorn]

Keeping this open until I added something like this

[Prinzhorn]

I added an experimental "keyframe" event https://github.com/Prinzhorn/skrollr#keyframe

It's not exactly what you where asking for, but I'm closing this since you can still use the code I posted above.

[dillinghamio]

would be cool to have..

<div id="airplane" data-500="" data-event="eventName"></div>

$('#airplane').on('eventName', function(){
    // do stuff
});

[Prinzhorn]

would be cool to have..

Sure, it just doesn't work in IE, as I wrote in the docs

Originally I wanted to emit the events right on the element, so you could do this

//Wouldn't this be nice?
document.querySelector('#foo').addEventListener('skrollr.dataTopBottom.up', function() {
//#foo just passed the data-top-bottom keyframe while scrolling up
}, false)

but IE.

[dillinghamio]

There are work arounds for IE < 9. Using attachEvent vs addEventListener
http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer
http://stackoverflow.com/questions/9769868/addeventlistener-not-working-in-ie8
https://github.com/WebReflection/ie8

or even a function that saves all callbacks to an assoc array and calls them when, internally, skrollr has reached one of those scroll points or key.. kind of like a queue.

[Prinzhorn]

Those stackoverflow posts are about receiving standard events. The problem lies in triggering custom events on DOM level. Which simply does not exist in IE.

[Prinzhorn]

If you are already using jQuery, then you can easily proxy the keyframes event from skrollr to the element

skrollr.init({
    keyframe: function(element, name, direction) {
        $(element).trigger(name, [direction]);
    }
});

//....later...


$('.some-stuff').on('data500', function(e, direction) {
    console.log(direction);
});

[dillinghamio]

Beautiful! Thats exactly what Im looking for, this opens up a world of code for me.

Also found this post regarding events http://stackoverflow.com/a/3209320/1342440,
I'll get out of your hair now =) Thanks for the help.

[Prinzhorn]

I know this post as well. If you read through it, you'll see that it does still not actually trigger the even so everyone can listen for it. You can only listen for it using a specially crafted listener method.

That's what jQuery does. You can .trigger whatever you want, but attachEvent will never get it. You can only listen for it using jQuery itself, because it handles a list of callbacks internally.

[dillinghamio]

ah thats makes sense. You're jquery solution suffices for me and probably all jquery users. Im not sure of the drawbacks to replicating it for non-jquery users. I dont know that it would be bad to only have one place to have neatly organized code that fires when that point is reached.

skrollr.when('skrollr.dataTopBottom.up', function(){

});

Thanks again for your help and this awesome library.

[chris-mackie]

Can we do

data--100-top="loadContent()" ?

just an example for lazy loading

[Prinzhorn]

Can we do

no

[chris-mackie]

shame, that would be awesome!

[minuz1991]

Hi,

I've got a problem. I'm trying to add event listeners to the elements. For example $('#element').on('click',function(){alert('some stuff')}); but I believe because elements are positioned absolutely and they are offset somewhere in the dom, I'm unable to click on the right thing and get the alert message. Is there a way to get element positions and be able to fire a function on click?