Skip to content

Instantly share code, notes, and snippets.

@lafikl lafikl/steady.js
Created Jul 3, 2014

Embed
What would you like to do?
var el = document.getElementById('head'); // caching it for better performance
var steady = new Steady({
throttle: 100,
handler: function(el, done) {
console.log('woo!');
// this important to tell Steady that you finished processing so it can call you later
done();
}
});
steady.addTracker('is-visible-head', function(){
var rect = el.getBoundingClientRect();
return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
);
});
steady.addCondition('is-visible-head', true);
@mikemaccana

This comment has been minimized.

Copy link

commented Jul 3, 2014

Still no luck.

  1. No 'handler complete' log
  2. My 'is-visible-.mission' tracker doesn't fire.

Code:

var log = console.log.bind(console);
log('Setting up steady...')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
});
@lafikl

This comment has been minimized.

Copy link
Owner Author

commented Jul 3, 2014

First thing you don't have a condition that steady matches the tracker value to!

var log = console.log.bind(console);
log('Setting up steady...')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
   // you need to return a value that Steady matches it to the condition value
   return true
});

steady.addCondition('is-visible-.mission', true);
@mikemaccana

This comment has been minimized.

Copy link

commented Jul 3, 2014

Hrm, adding the return true still doesn't change anything - only 'Setting up steady...' ever gets run. No errors.

@mikemaccana

This comment has been minimized.

Copy link

commented Jul 3, 2014

var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
    // you need to return a value that Steady matches it to the condition value
    return true
});
@lafikl

This comment has been minimized.

Copy link
Owner Author

commented Jul 3, 2014

The condition is missing, that's why it's not firing.

Because Steady can't match the values it collects with something you didn't assign a condition to.

Add this line after the code you pasted:

steady.addCondition('is-visible-.mission', true);
@mikemaccana

This comment has been minimized.

Copy link

commented Jul 3, 2014

OK - I think I've been confused about what the tracker is vs the condition.

Current code - no events still fire.

var log = console.log.bind(console);

log('Setting up steady')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
    return true
});

steady.addCondition('is-visible-.mission', true);
@lafikl

This comment has been minimized.

Copy link
Owner Author

commented Jul 3, 2014

I just copied your code and tested it on this page through the console and it worked!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.