76699

Peform a function if an element is completely in the viewport (live)

Question:

I've tried to use a jQuery plugin <a href="https://github.com/cpatik/within-viewport" rel="nofollow">within viewport</a> to detect whether or not an element is in the viewport.

It works, but it doesn't update.

He recommandes <a href="http://james.padolsey.com/javascript/special-scroll-events-for-jquery/" rel="nofollow">ScrollStop</a>. I add it, but it doesn't work.

I only put my code here:

$(document).ready(function() { $(window).bind("resize scrollStop", function() { $("div").withinViewport().append("<span>hi</span>"); }); });

(plus, it's using the bind method, so it's a bit outdated..)

So, it may be simple, but I didn't get it to work.

I'm new to jQuery and javascript so.. It may be super simple.

<a href="http://aurelieremia.be/tfa/about.html" rel="nofollow">Here's the website with the code and everything</a>

edit: works on resize ! but not on scroll.

Answer1:

From here

<a href="https://stackoverflow.com/questions/14035083/jquery-bind-event-on-scroll-stops" rel="nofollow">jQuery - bind event on Scroll Stop</a>

$.fn.scrollStopped = function(callback) { $(this).scroll(function(){ var self = this, $this = $(self); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback,250,self)); }); }; $(window).scrollStopped(function(){ $("div").withinViewport().append("<span>hi</span>"); });

How this works.

The function is first clearing any timeout associated with the data element scrollTimeout.

It think creates a new element there with a timeout of 250 ms with the function passed in.

Thus while scroll is moving it is always clearing the function from running and resetting it to run "in a little bit".

When the scrolling stops -- then it can't clear the function so the function executes.

Cute trick.

Recommend

  • Stripe - PHP error - Stripe no longer supports API requests made with TLS 1.0
  • Why doesn't MSHTML for .Net have querySelector and querySelectorAll, or where are they?
  • Rapidly iterating Silverlight development
  • Visual Studio extension: Change the hint path of an assembly reference
  • crash in __tcf_0
  • How to add closing tag for canvas in three js rendered Canvas?
  • Get the pasted content on document on paste event
  • react split panel resize
  • Examples of how to a STS in .Net 4.5 using WCF
  • Knockout custom binding handler
  • there is no graph with tensorboard
  • CSS bleed-through with cfinput type=“datefield”
  • R Split data.frame using a column that represents and on/off switch
  • Can I programmatically choose the Android layout folder?
  • Run multiple queries from 1 SQL file showing result in multiple tables
  • Not able to aggregate on nested fields in elasticsearch
  • wxPython: displaying multiple widgets in same frame
  • Unable to install Git-core+svn by MacPorts
  • Django simple Captcha “No module named fields” error
  • Could not find rake using whenever rails
  • Alert pop up with LWUIT
  • FileReader+canvas image loading problem
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • VBA Convert delimiter text file to Excel
  • How to delete a row from a dynamic generate table using jquery?
  • AngularJs get employee from factory
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How to get Windows thread pool to call class member function?
  • Is there any way to bind data to data.frame by some index?
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize