Uncaught TypeError: Object function (a,b){return new c.fn.init(a,b)} has no method 'isWindow'
in waypoints.js

Dear Mr. Troughton,

I'm struggling with a weird problem that waypoint() fires upon page load before any scroll happens (in FF, Opera, and Chrome, IE 8 seems to behave differently, but I'll leave it to another day)

Being a JavaScript novice, I'd really appreciate if you could take a look. For which I have opened up a backdoor in my production site at

http://74.207.247.52:6543/

which upon loading will fire waypoint() (as can be verified with HttpFox) of the $.get() to http://74.207.247.52:6543/biz_ajax/dcc46f90035544a587033c2f7d4bdb35 (this URL might change if there are new user submission, but its location can be easily pined in the HTML) before any scroll can happen. The intended behavior is obviously to load new items only when user scrolls to the bottom of the page.

I truly hope it's something stupid that I did or can be fixed quickly.

Sincerely,
Jerry

If I set offset 100% my waypoints are triggered when first pixel of them are reached on scrolldown, but it does not trigger them when I scrollup, I would like also to trigger them when first pixel of bottom is reached. Is it possible to do with offset: function()?

Trying to bind the same waypoints twice I get only last one.

My idea is to show waypoint when any pixel of element is visible in viewport or is there much easier way to do it without even using waypoints?

A great plugin! Thank you.

But I have a little problem. When browser loading a page.
I see DIV "Back to top" for a moment. Because jQuery hide
element after loading. Please, have you got any advice.

Please, please

Bug demo:
http://jsfiddle.net/8Wafr/17/

Instructions:
scroll to bottom then wait 3 seconds. The green bloc will disappear.
It should not !

This isn't really an issue, just a comment : First, let me state that I've been designing websites since 1997, and while I do know my HTML and CSS pretty well at this point, I don't know any javascript. That being said, I've always been able to successfully implement scripts, from jQuery to mooTools and everything in between.

Now, I just spent 3 days trying to get this to work, and am having the hardest time, because I don't know javascript. I'm not saying your installation notes aren't well-written. I'm sure they are. But if you dumb them down another notch, you will see a much wider audience starting to use this script in all their site designs. People like me.

Something simple like : 1) Copy this text here. 2) Copy this file here. 3) Use this file only if you need [insert feature here]. etc.

Right now, after 3 days of trial and error, I seem to have it working by copying the function call word for word... but the sections won't vertically center like they do in the sample pages. And I still don't know what modernizr and flexi do, and whether or not I need to copy those too. Know what I mean?

I really want to make this thing a part of the sites I'm putting together, but the docs need to be dumbed down a bit further.

embarrassed look

In some cases my waypoint elements are visible initially without scrolling or resizing.

Is there a way to trigger waypoint.reached for that elements?

trying to achieve a scrolling issue

My attempt: http://www.oldlink.com/test.html

Do i use an offset here? still getting an awkward effect !

In IE (9 and below), an error occurs if a window is resized to expose a waypoint (at least under some circumstances.

To reproduce:

1. Create a waypoint just offscreen with {offset: "100%", triggerOnce: true}.

2. Resize the window to expose the waypoint.

3. I get the error

   Line: 386
   Error: Unable to get value of the property 'options': object is null or undefined

The problem originates in the refresh call. An element of c.waypoints is undefined. I was able to fix the symptoms by adding:

if (!o) return;

within the $.each(c.waypoints, function (j, o) call, though I assume there's a better way to fix it.

Hi!
This functionality is pretty incredible. I'm using the sticky nav functionality and when I refresh from my browser, the sticky unsticks.
I've tested in Safari and IE and it's working fine in those browsers, any ideas?
Thanks in advance for your help!

I think your scroll analytics is awesome.

When scrolling all the way down and fire the waypoints when scrolling down everything is fine, but if i'm at the end of the page and hit the refresh button in my browser , all waypoints fire at the same time.

I want to fire the visible waypoint only. Is that possible.

I want to use it with Google Analytics and want to send a page view when scrolling to a new section of the page.

Thank you for a really great script.

// jonas

I think it will much better to provide the ability to set the context using a pure DOM element, instead of string selector + it will be much faster,
unfortunately i am working on a project that uses jquery 1.5.1, and it is not easy to shift to version 1.6.

Thanks

Hi there,

I'm working on a site (http://bpds.co.uk/test/portfolio.html) that uses a sticky sidebar and can't figure out a way to stop the sidebar once it reaches the bottom of the containing div (#main) - currently it continues down into the footer which i've made unnecessarily tall to highlight the issue.

Any help with this would be much appreciated.

Thanks, Matt

Hi

I must start to say that you plugin is really awesome! It really makes something really hard really easy! Thanks!

I have made a website, where i am trying to make a div which contain a youtubeplayer iframe.

I works fine in Chrome and IE9, but in Firefox the iframe reloads.

I do not know, if it is cause by the waypoint, but i think it could be.

http://partychart.dk

Friendly regards
Kevin Simper

I have a div that has content that scrolls. Is there any way to use waypoints to fire when an element in that div reaches the top/bottom/% of the div instead of the whole viewport?

I'd like to explore the best way to implement this. At the very least, waypoint.reached would have to become just a general hook and not the end-all-be-all event that all this functionality centers around.

Hi Caleb,

Sorry it's me Jerry again. I ran into another strange problem with waypoint, again it could be something deadly wrong that I did but I just don't know where to look.

The problem is now live at my site http://bizspeaking.com , Upon a fresh load, when it is scrolled to the bottom for the first time, waypoint fires correctly and appends the AJAX return. Then waypoint stops firing anymore when it's scrolled to the bottom. To make things more puzzling, now only after I scroll all the way to the top and then back to the bottom would waypoint fire again, but only once. To make it work again, scroll up-and-down and repeat the pattern...

I've been pulling my hair the whole day without any clue, it would be much appreciated if you could shed some light on the issue.

Again many thanks in advance!

Jerry

Use case: Infinite scroll. When window height is sufficiently large, the bottom item is already in view. I expect waypoints already in view to be immediately triggered.

It appears that Waypoints tries to handle this scenario by calling doScroll() on the window load event. However, I am using Waypoints on a part of the page which is loaded after the window load event has been fired, so the scroll check never happens.

As a workaround, I am calling jQuery(window).trigger('scroll'); however, in my opinion, this is not an acceptable solution, since the window has not really been scrolled, and there may be unrelated handlers on that event.

Have I missed something in the docs? Am I doing this totally wrong?

Hi,

I have a number of waypoint elements that basically trigger the fade in and out of a nav bar which gets repositioned to be at the top element currently in view.

This works fine and the waypoint event is triggered when I scroll past the top of the elements.

What I ideally want is for the event to be triggered both when you scroll past the top and bottom of the elements if that makes sense?

I know there's offset: 'bottom-in-view' but what I want is for it to trigger for both bottom-in-view or "top-in-view".

A) Is this possible and B) Is something like this along the right lines?

{offset: function() {

if(#NOT SURE WHAT TO CHECK FOR@) {
    return $.waypoints('viewportHeight') - $(this).outerHeight();
} else {
    return 0;
}
}

Would appreciate any help.

Thanks

Ryan

Hi,

Thanks for a great plugin!

I have implemented a sticky header based on the demo that is provided with one change which is causing problems in certain scenarios.

My change is that the header has a large height set in css before the .sticky class is attached.

Once .sticky class is attached a .sticky specific rule changes the height of the header.

This works fine in most scenarios. However, when the height of the page is only just scrollable the page jumps back to full height header element and wont display the minimized .sticky height of the header. The problem is not present when the page has a lot of content.

I have made the ammends to a local version of the sticky demo just to make sure it was not anything in my implementation.

Here is the demo i made to show the problem http://postnatalcounselling.com/original-waypoints-sticky-demo/ .

Any help you can suggest would be great. many thanks Neil

Excellent plugin! It's amazing.

One thing -- I'm trying to use Waypoints to create 'sticky' headers for collapsable sections, like so:

▼ HEADER 1
This content is inside a sliding container that can be toggled by clicking 'HEADER 1'.

▼ HEADER 2
This content is current visible too!

Clicking either "HEADER" will collapse (or show) the content, like so:

► HEADER 1

► HEADER 2

The issue with Waypoints is that the Refresh function doesn't appear to recalculate/account for changes in document height (such as hiding or showing content). Thus, opening or closing sections messes up the calculation of when to trigger the waypoint.

Is there any workaround for this?

Thank you so much!

Hello there,

I was wondering how i would achieve the following:

I am working on a tumblr theme and i would like my clustered blog post dates to stick and un-stick when it reaches a new blog post date. For instance there are 3 posts on 04 FEB. then 04 FEB should stick until i reach the posts older. Then it should un-stick and the older date should stick. I seem to have created something that does this partly

half: http://letsgobabyhippo.tumblr.com/

As you scroll down, the post dates will stick, and un-stick when you reach a new one. I altered the code of your site's menu to do so. But now when my scrolling direction is up, the old date remains sticky until it reaches the newer date.

How do i fix this?
Thanks in advance!

Cheers,
Ronny

Not sure if this is just the demo, or a bug in Waypoints itself:

On the demo page, http://imakewebthings.com/jquery-waypoints/, click Full Documentation and then About. In my browser (Chrome / Mac OS X), the middle button, Examples, appears to flash out of sequence. I.e., the About button isn't quite displaying expected button behavior - it pops up and down as the page moves.

I'm thinking now that the behavior may be programmatically correct, but a different strategy would provide a more natural appearance. E.g., updates are disabled to the buttons if the scroll is happening due to button press. Or alternatively, "location" would be signified differently than "button press". Or, yet another idea would be to allow multiple buttons to appear highlighted/pressed. This would prevent the flickering effect while the page scrolls.

I'll play with the source and see if I can come up with a demo of what I'm talking about.

I'm trying to make a way point on one element that scrolls left to right, and make that make another div fade away.
It seems like the direction listener only applies to up and down?

Here is what I've got:

$('#panel1').waypoint();
$('#scroll_box').bind('waypoint.reached', function(event, direction) {
    $('#scroll_box').fadeOut('slow', 0);

I want it to fade scroll_box once it hits panel1. Am I doing this terribly wrong?

I'm working on a simple sticky table of contents that's intended to work the same as the Sticky Elements example. On my page, resizing the window triggers the waypoint in the "up" direction if I am scrolled past where it kicks in. This causes the element to jump back to its original position.

I've tried to reduce the complexity of the page to the bare minimum to see if any of the other JS or CSS was causing the problem, but it still persists. Strangely, the Sticky Elements example page does not exhibit this problem, confounding me even further.

Also, on my page, if I scroll very quickly past the sticky element, I can sometimes get it to miss the waypoint trigger and it will remain at the top of the page. Once again, I am unable to reproduce on the example sticky elements page.

There is a fair amount of other JavaScript active on the page I'm using and I'm guessing something is interfering, but I wanted to bring this up in case you'd heard of this before. If I track down the problem, I'll update the ticket.

Same behavior on OSX Chrome, Safari, and Firefox.

How do I remove the button flash on page refresh?

Hi again, I've fixed the waypoints on the fixed window part, see :
http://jsfiddle.net/8Wafr/29/

I'm trying to constrain the moving bloc inside the TR column.
If you use Chrome and look at the js log you will see the wp2down event firing after wp1 is triggered,
maybe because the moving bloc position is switched from default (flow) to fixed ?

How can you fix this problem ?
I've tryed onlyOnScroll and continuous options without success.

Hi there,

Here's my issue:

Much like the nav on the Waypoints page (http://imakewebthings.github.com/jquery-waypoints/) I have a navigation element with active states triggering when the corresponding div IDs are reached.

However, I've also added in a couple of other waypoints that trigger other effects. The problem occurs when scrolling back up, the code 'if (direction === "up") {$active = $active.prev();}' includes the additional waypoints and triggers the nav active links in the wrong place.

Hope this makes sense?

Here's, my full script - any advice would be hugely appreciated! Thanks, Matt

$('.slide').waypoint();

$('body').delegate('.slide', 'waypoint.reached', function(event, direction) {

    var $active = $(this);

    if (direction === "up") {
        $active = $active.prev();
    }
    if (!$active.length) $active.end();

    $('.link-active').removeClass('link-active');
    $('a[href=#'+$active.attr('id')+']').addClass('link-active');

});


$('#homec').waypoint(function(event, direction) {
    if (direction === 'down') {
        $('.logo').addClass('fout');
    }
    else {
        $('.logo').removeClass('fout');
    }
},{
    offset: -100 
}); 


$('.twocol').waypoint(function(event, direction) {

    if (direction === 'down') {
        $(this).animate({opacity: 0.2}, 300);
    }
    else {
        $(this).animate({opacity: 1}, 300);
    }
},{
    offset: -100 
});

I would love the option not to fire events for elements that are not currently visible in the viewport.

Currently, if I remove the waypoints, scroll the list and put them back on, the elements that have been scrolled past are fired.

First off - I'm loving this extension. Makes things operate so smoothly on the page. Great for pages that are very LONG (magazine/newspaper in specific).

My problem is this - I'm using two of the effects you show in the examples on a single page. I'm making the topnav sticky when it passes through the browser window, displaying the 'Back To Top' link, and changing the BG colors of the 'active' topnav li as it passed through the window.

Everything 'works', but I think I'm overwriting settings and the TOP link shows when the first waypoint.reached occurs (I'd like it to be further down the page) and then when scrolling back up it gets hidden again after 100px at most, regardless of where you are on the page.

Here is the code that I'm using:
JS - http://scrp.at/Kq
HTML - http://scrp.at/Kr

Any help would be super appreciated!!

I have implemented waypoints to get a sticky skyscraper banner. It seems that there is an issue of the event not always triggering (e.g. when the banner reaches the top of the page and should stick). This happens at least 20% of the time, at least.

Looking in web inspector, I see that the class "sticky" is not added to the body element when the banner doesn't stick, so I guess it is the event of the banner "reaching the top of the page" that is not triggering.

The functionality was first tested on a static page, and later implemented in a large codebase with jsp templates etc, on a development server. The problem is persistent in both places.

This is the code in stickySkyskraper.js, which is included on selective pages:

(function ($){
    $(function() {
        $.waypoints.settings.scrollThrottle = 30;
        $('body').find('#skyskraper').waypoint(function(event, direction) {
            $(this).parent().toggleClass('sticky', direction === "down");
            event.stopPropagation();
        });

    });
}(jQuery));

Was hoping this was a known issue with an easy fix :-)

Cheers

Marius

Is it possible to have the a element inside a container using context but, have a offset for that element inside the container

Once the element is 66px away from the way point i need it to fire

$('.element').waypoint(function(){
  //do cool stuff
}, {
  context: '#container',
  offset: '-66px' // can it fire the waypoint 66px above this element??
}); 

This is the idea of what I'm trying to achieve, but isn't working. Or I may not have a complete understanding how to do this using offset.

Currently this plugin is difficult to use with CoffeeScript. While it's easy to pass the initial handler in:

$('.entry').waypoint ->
   alert('You have scrolled to an entry.')

It's not easy to add the second argument to this to customize the options. It would be nicer if a "handler" option were supported:

$('.entry').waypoint ->
  offset: '100%'
  handler: ->
    alert('You have scrolled to an entry.')

Would you consider adding this?

I tried using sticky waypoints and infinite scrolling waypoints together on a recent site. The skicky element was a notification and follows the user as they scroll down the page. When the user reaches the bottom of the page, more articles are insterted into the dom and scrolling can continue. However, as new articles were loaded in, a refresh would be triggered and the offset for the sticky would be recalculated. This results in the sticky, no longer being sticky :(

I managed to fix this temporarily by setting a sticky option when the waypoint is initialised, setting the value to el.offset().top. I then edited line 413 of waypoints and put a conditional in so that if there sticky is set o.offset, refers to that:

o.offset = (o.options.sticky) ? o.options.sticky : o.element.offset().top - contextOffset + contextScroll - adjustment;

Am I missing something in how waypoints should be set up?

I haven't got time to sort this issue out more elegantly and possibly I don't even really understand the problem properly, but when I do have more time I'll try for a better solution and turn it into a pull request

I have a UI which used the hiddenElement has way to trigger the infinite scroll

<div class="hiddenElement">
  <a href="#"  class="more">More</a>
</div>

I have a content which is loaded via node.js and backbone.js -dynamically

function initWayPoint(){
    var opts = {
        offset: '100%'
    };  
    var hiddenElementVar="<div class=\"hiddenElement\"><ul><li><a class=\"more\">More Link</a></ul></div>";
    $('body').append(hiddenElementVar);
    $('.hiddenElement').waypoint(function(event,direction){         
            console.log("Event Fired"+event);
            $('.hiddenElement').waypoint('remove');
            $.get($('.more a').attr('href'), function(data) {
                console.log("Anchor Action Fired");
                someObject.loadMorePosts('older'); loads new elements
                var $data = $(data);
                $('.more').replaceWith($data.find('.more'));
                $('.hiddenElement').waypoint(opts);
            });

        }); 
}

This code doesn't work after the point has been reached. I have a load more button just in case this doesn't work. After the first fetch the scroll for infinite trigger works. Is there something wrong that i am doing.

My testing indicates tat you sticky elements demo does not work in IE6. The panel that is suppose to stick to the top does not do so in IE6.

This is more of a question than an issue. First of all, great plugin. It's exactly what I need for a project I'm working on where I need to animate a menu element to a specific position based on when a certain section is in view. The thing that makes this difficult is that the element is docking in a specific position relative to other elements on the page. I have this, which is based on the code used for Waypoints Home Page:

jQuery(function($) {
  $('body').delegate('section.waypoint,footer.waypoint', 'waypoint.reached', function(event, direction) {
    var $active = $(this);
    if (!$active.length) $active = $active.end();
    $('.section-active').removeClass('section-active');
    $active.addClass('section-active');

    // HOME WORK
    if ($active.attr('id') == 'home-work'){
      $("#nav-dock").animate({top: '200px'});
    }
    // TRANSMISSION
    if ($active.attr('id') == 'home-transmission') {
      $("#nav-dock").animate({top: '870px'});
    }
  });
});

It works spottily, but not always. Not sure if has to do with a delay or that by sticking that in the function, it doesn't have a very frequent listening capability? A little out of my league here, but feeling close to getting this to work. Also, seems to not work at all if I'm scrolling up--do I need to stick the same conditions in the "up" if statement?

Don't expect help here, but if anyone has time or knowledge, much appreciated.

do nothing

need to add all user actions to history

tnx

hello,

i am using the infinite scroll function of waypoints at my site and it works perfectly. thanks for this great idea.
unfortunately additionaly to that i want a bar to place on the bottom of the window screen whenever an entry is scrolled to. i know it sounds a bit difficult to understand.

it works for the mainpage entries also perfect, but as soon as the new content is loaded via ajax the waypoints can not be triggered.

i have been searching a solution for three days and none of them has worked. i hope you can help me..perhaps somebody had had the same problem and can help me out.

sorry for my bad english ;)

Greetings,

I'm having trouble applying the waypoints "Sticky" effect to my Twitter feed (http://philipos.com).

I have the following in the header of my code:

....and the following in the body....

  height: 250,
  theme: {
    shell: {
      background: '#a30000',
      color: '#cfcfcf'
    },
    tweets: {
      background: '#e6e6e6',
      color: '#423542',
      links: '#9c0e0e'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: false,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('pysolomon').start();
</script>
</div> 

It would be great if I could assign different offsets for scrolling up and for scrolling down.

My goal is to show a title for the image that is scrolled in to view.

• when I scroll down offset: '50%' is perfect
• when I scroll up it should trigger on ($.waypoints('viewportHeight')/2) - $(this).outerHeight();

I guess there would be nice uses to that.

(by the way thank you so much for the great plugin and website going with it)

/* 
Set the element offset to the window scroll offset, less
all our adjustments.
*/
o.offset = o.element.offset().top - contextOffset + contextScroll - adjustment;
if (o.options.onlyOnScroll && oldOffset) o.offset = oldOffset;

When resizing browser, offset is change even with onlyOnScroll set to true. Added last line to correct behavior, I've tried to fork and pull request but I'm new with git and miserably failed to get your lastest commit.

Hello again,

First of thanks for being so quick in responding on my issues.

Now here i've got another weird bug. I must be doing something wrong. In internet explorer, when i reach a waypoint and the "sticky" class has been set, The element blinks. Since i don't know exacly how to explain, here is a screencapture : http://www.ronnywieckardt.net/scrap/error.mov

My code:

$('#filter .top').addClass('hidden');

$.waypoints.settings.scrollThrottle = 30;

$('#wrapper').waypoint(function(event, direction) {
  $('#filter .top').toggleClass('hidden', direction == 'up');
}, {
  offset: '-10%'
}).find('#filter').waypoint(function(event, direction) {
  $(this).toggleClass('sticky', direction == 'down');
  event.stopPropagation();
}, {
  offset: 80
});

Any ideas?

I've got a situation where I am loading content into a div VIA an AJAX call. I am binding my waypoints through a function like so...

$(".view_topic").waypoint(function()
{
//Doing stuff here on supposed triggering of waypoint.reached...
});

It is not triggering. When I check the console on load of the data the waypoints are registered... But they do not trigger. If I load the data normal the waypoints trigger. Any thoughts?

Michael

Great plugin but it doesn't work on my iOS devices

Put this script.
But found a problem: the article simply fixated. They are repeated. For example there are only 5 articles. I am scroll down. And once again displayed the same 5 articles.

Hello there... First off all I really need to congratz you for this Awesome plugin, I'll definitely use a lot. =D I just tested it on my iPad and sticky example didn't work and when we reach the end of the page didn't trigged the event to show more articles as you put in example.
I already saw another plugin trying to do sticky elements in iPad, but didn't work. I'll try to find something related to that.

Cheers, J.

Can you put some tests directly in this repository ?

This is not a bug with waypoints directly but I wondered if you could offer some pointers on getting events to trigger correctly on iOS / touch devices.

You may have noticed that a touch event only registers when a finger is lifted from the screen and any scroll inertia has stopped. There is a description of this behaviour on Stack Exchange (http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad).

Could waypoints be modified to fire during the scroll on touch devices?

Many thanks

A waypoint added to an element with an existing waypoint context is being triggered by the refresh method seemingly incorrectly

You can view the buggy behavior here, with directions on how to reproduce:

http://jsfiddle.net/jsoverson/6BJUC/5/

It looks like the Context's oldScroll is triggering the waypoint prematurely because it is reusing the old element's context without being reinitialized. You can get around it by setting it to that initial value somewhere in the init() method, after the check for the existence of a context.

That is what I am doing in my current scenario but don't know if it solves all the author's initial concerns.