dirkgroenen / viewport-checker Goto Github PK

Would like a way to do something like:

Hi,
In my project it's running "fine", but is creating ghost in elements animated.
The elements with animation are duplicate, one with animation and other static.
Sometimes when i refresh, work fine, but most part with this problem.
Can you help me?

I have a class "hidden" that is applied to another class "fullcoverbackground_lifestyle" immediately on load of viewportChecker. Then, when the an element with class "fullcoverbackground_lifestyle" comes into view the class "fadeIn" is applied.

Here's the malfunction. If class "hidden" has property "display:none" viewportChecker will immediately apply "fadeIn" to "fullcoverbackground_lifestyle" as well as applying style "full-visible".

If class "hidden" does not have property display:none things function as expected. Class "fadeIn" is not applied until class "fullcoverbackground_lifestyle" is in view.

Any idea what is going on?

Heya!

One thing I've noticed. The following code makes the scrolling insanely choppy on Ios devices:

    // Run checkelements on load and scroll
    $(document).bind("touchmove MSPointerMove pointermove", this.checkElements);
    $(window).bind("load scroll touchmove", this.checkElements);

This, however, doesn't (old versions of viewport-checker):

    $(window).scroll(this.checkElements);
    this.checkElements();

Not sure if this is something you can look into.
Thanks again for a great plugin.

-Jonas

I'm using viewport-checker to fade in elements as the user scrolls.
In 1.8.6, the element fades in just fine but then it disappears.

edit seems to be just this issue here: #31

I thought I was using 1.8.6 but it seems the version on cloudflare I was using: https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.6/jquery.viewportchecker.min.js
says its 1.8.6 in the url, but infact it is 1.8.5, which is before the bug was fixed.

Closing...

As mentioned by @ondjazz in issue #10

If you at some point in the future can toggle a class/function when the entire element in in view it would be perfect. This plugin i like the perfect companion to online storytelling. Great work.

Hi, I'm using jInverter for horizontal scroll and I'm trying to use your script to trigger animation but in horizontal scroll it's not working.

Note: I am writing the animation for an element and not for a full div.

The plugin works fine on a Mac OS X (Yosemite) running on the same machine, but it does not work when run on a Windows OS. My first guess was that there was something wrong with my code, but it does not show any errors in the console whatsoever. I then tried running the demo that you have provided, which also does not seem to behave as intended.

Using Chrome Version 39.0.2171.71 m.

I'm having a script that combines ANimate.css and viewportChecker. Looks like this :
jQuery('.item').addClass('ts-hidden').viewportChecker({
classToAdd: 'ts-visible animated bounceInUp',
classToRemove: 'ts-hidden',
removeClassAfterAnimation: true
});
The problem is that removeClassAfterAnimation is working the opposite way it should (when set to false, it's removing the class,and when set to true it's adding it) . But it depends on the animation class added from Animate.css. Sometimes "true" will remove, sometimes "false" will remove

Have anyone notice this issue? Everytime I set "repeat: true", the element is revealed and blinks for a few times after that te animation starts. It does not happen bottom to up, just up to bottom.

console.log(objOptions.offset); on line 86 in jquery.viewportchecker.js

Hi - I'm having trouble with PC based browsers - it seems my "visible" classes just aren't being applied upon scroll. No errors in the console. I dont have access to a PC so its a bit difficult for me to diagnose. Has anyone had trouble with this? I was thinking the line below might have something to do with the issue:

var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html')

Here's a live example:

http://kcoolman.staging.wpengine.com/shows/the-sunday-service/

Hey

Version 1.8.0 has a console.log which was introduced in b762ed3
This has been fixed in 755ff60 but no new release was made.
Could you bump the version number to prevent having console.log in production?

Thanks

problem when use with bootstrap
if is the div Contain within them the bootstrap grid class
then make the effect all div in the same time
example :

<div class="post">
    <div class="entry-content col-lg-6 col-md-6 col-sm-6 col-xs-6 outer">
    <div class="entry-header">
           <h3 class="entry-title">the title</h3>
    </div>
    </div>
</div>

Hello Guys. For my candidacy to an enterprise i made an own portfolio-website.
Specially for this i made a jquery animated schedule for my knowledge in the different facultys of my job.
i made it with divs and in Firefox everything worked quite great. The Problem is, that when i going to run the file in Chrome, these divs are hidden. I used a code snippet which i modified after. My jquery is going to hide all the div elements, till they are in the viewport. If they are, they got other classes added with ClassToAdd. These classes make the content visible. But sadly not in Google Chrome. I want to fix it, because Google Chrome is very important. Im a beginner with jquery which makes it hard fixin problems like this by myself.

HTML

			<div class="spalte1">
					<img src="img/Indesign.jpg" alt="Indesign">
					<p class="textinteresse">Adobe InDesign: 76%</p>
				<div class="progress-bar">
					<div class="bar positive positive3">
						<span class="count">76%</span>
					</div>
					<div class="bar negative negative3">
						<span class="count">76%</span>
					</div>
				</div>
			</div>

JQUERY

Hi All,
Thanks for creating great script.I'm using it for animation effects.
But currently It is not working with latest version of Google Chrome (Version 61.0.3163.79 (Official Build) (64-bit)).
I have tested with older an version of google chrome it is working fine .Your created demo is also not working in latest version of google chrome.
http://dirkgroenen.nl/jQuery-viewport-checker

Please fix this issue as soon as possible.

Thanks in Advance!
CoolHappy

Hello,

we use the plugin just like in the demo to animate elements onscroll. Now if I refresh the website with already having scrolled down a bit before (or by a hash) and I scroll up then, the animation shows up which in my opinion is wrong behavior.

Of course, your plugin is more general than animation, so an option like "classToAddIfOverscrolled" would be awesome.

Is that possible (already)? Thanks in advance.

Bye Defcon0

Imagine this: you start your site with a big image (logo, keyvisual, whatever..) which you don't want apply a fixed height to (maybe it's inside your header). Beneath that you got some sections which you want to fade in as you scroll. As the big image takes some time to load, the sections will be inside the viewport at page load (maybe it's so fast you will not even see it, but technically it will happen) and therefore the script will trigger the animation before you get to scroll there. "Well then just set a fixed height and the problem is solved".. yeah.. no ;-) would it make sense to implement an option in your script (false/true) to allow the script to wait for images to be loaded until it starts to do it's job? It took me like forever to figure out why the first few of my sections got animated on page load (i first thought it was a padding issue..).

I made a Graphic to show you what I mean:

Hi, there!
Great plugin. It's easy to use, and produces reliable results across devices.

Is is possible to have the "bottom offset" inverse to the top offset? I'm using this plugin for storytelling, and i'm autoplaying a video with an offset of 100. I'm using the repeat option to stop the video when it goes out of view, but that doesn't happen untill 100px below the video.
(see image 1).

It would be great if the offset-value somehow could work in both directions, so that if you have 100px offset, the repeat/remove-event happens 100px before the targeted element goes out of view. The possibility to specify a negative number to have the event fire before an element goes into view could also be cool (advanced lacyloading etc).
(see image 2. I've mocked up a fictional param called reverse).

Having the option to have viewport checker decide if an element is visible in its entirety would also be great.

Keep up the great work.

I don't really know what's wrong with this yet, but if you enable Chrome Experimental Extension APIs (in chrome://flags) jQuery-viewport-checker won't work anymore.
Have you tried this?

Hi,

This plugin is very useful, Thanks for this.

I try to to make sequential animation by adding classes with delay. Below you can see my code but it works only for the first visible elements. setTimeout function goes on to work. As I wait and scroll down, all the other elements(in the same row) are coming in the same time.

Do you have any idea about this?
Regards
J

$('.animateit:not(.visible)').each(function(i){
        var row = $(this);
        function haydi() {
            row.viewportChecker({ 
                classToAdd: "visible animated zoomIn",      
                }); 
        };
        setTimeout( haydi, 300*i ); 
});

Hi, the animations are very sluggish on mobile devices. Any suggestions to improve it?
Or is there any way to disable it completely on smaller screen sizes?

The option repeat: true don't work well for all animation types.

It's possible set some classes when element pass in viewportChecker scrolling down and other classes when we scrolling up?

Hello ! normally i don't have problems with this library, but for first time i try to use it in horizontal website.

Not working for me, Nothing happens :(

$( '.hide' ).viewportChecker( {
        classToAdd: 'visible animated fadeInUp',
        scrollHorizontal: true
} );

Hi, Dirk!

Again, thanks for a great piece of script. If possible somewhere down the line, it would be great to be able to set the trigger point in percentages.

A typical usecase would be to trigger a motion graphic or cue some text when XX% of the element is in view regardless of screen size.

A full screen 16:9 video is 1080px tall of my desktop, and 180px tall on my mobile. It's hard to set a meaningful px value in between.

-J

1. You have a spelling error in the name
2. There is an issue with your main, it should point to #{path-to-your-vendor}/#{your-vendor-name}

In sites where the scroll is managed by other elements (like a #outer-wrap with 100% height and width) the checker never gets trigged.

Should be good an option to define the element that fires the scroll action.

On Ipad there seems to be a problem: the class is not added when the element enters the viewport. Oddly enough, a swipe left or right seems to trigger it.

This happens on safari and chrome too (from my understanding, the chrome on ios ipad uses UIWebView... something to do with the app store rules - so it's just an safari with another user interface).

Hi,

I'm using the script on the new version of my website, still in development. But it is not working on Chrome Canary, without generating any error in the console...

Do you have an idea about what to do to make it works ?
Best regards,
Audrey

This problem occurs only on some devices, not sure why. Some suggested that I uninstall Chrome completely but it didn't work.
After debug I found out that $('body').scrollTop() always returns 0 on the problematic devices, while $('html').scrollTop() always returns 0 on the non-problematic devices.

So I made a small change and now as far as I can tell it is working fine on all devices:

this.checkElements = function(){
            var viewportStart, viewportEnd;
            
            // By Nofar 2017-09-07: Fixing viewportChecker bug in Chrome.
            if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) {
              if (!$('body').scrollTop() && $('html').scrollTop()) {
                scrollElem = 'html';
              }
            }

If you have any other ideas please let me know.

Does not work in the new version Google Chrome

jQuery('.add_bounceIn').addClass("hidden").viewportChecker({
classToAdd: 'visible animated bounceIn',
offset: 200
});

Chrome version: 51.0.2704.106 (64-bit)
Mac OS X El Capitan

The classToAdd is not added to the element when it's on viewport.

The demo & checker are not working too

Hej.
First of all: nice plugin!

Situation
js-newbie (me) is using your plugin for bouncing up a container at the bottom of the page. The added class 'visible' is added correctly and also correctly replaced with 'full-visible' so the animation works fine when the element is entering the viewport.

Issue
When I scroll up again, the classes were removed at the very first pixel scrolled and the container disappears. Sometimes the classes were added again in a certain area of the container. (can't define what height this secret area has. I don't know if this has sth to do with the offset option?) Also the class invisible is gone forever till reload.

Code
html:

<div class="bouncethisshit animated bounceInUp">

css:
The container has a height of 180px
Animation is enabled only with classes combination 'visible.animated' and 'visible.animated.bounceInUp'

js:

$('.bouncethisshit').viewportChecker({
        classToAdd: 'visible',             // works
        classToRemove: 'invisible',        // works
        removeClassAfterAnimation: false,  // <- classes removed on scroll despite using this opt 
        repeat: true,                      // works
        offset: 100                        // don't really know how to handle this... *noob*
});

Questions
Is it meant to be, that the 'full-visible' class is removed immediately when scrolling 1px back to top? Or should it replaced again with the class 'visible' as long the container is in the viewport?
I don't know if this might be a bug or what I'm doing wrong.
I'm sorry ':D

Thanks in advance.
—Jessman5

Need to update css/parent.css (and the minified version) with changes from style.css.

Hi guys, I was using this library with NPM. I was trying to update to the latest version (1.8.8) but the latest version that's on NPM is 1.8.3. Is it possible to make it available on NPM as well? Thanks!

Is there any way to destroy viewportChecker on elements it was earlier initialized ?
I did not find something like that.
Can you add destroy method, please ?

As visiting a site with animated objects (that fly into view as you scroll down using your awesome script) on a mobile device is everything but fun, what do you think about implementing a feature to just turn off the functionality on mobile devices if you don't want it to work on these (like for example scrollReveal.js does)?

Can I use viewportchecker for adding class to fixed element when a relative comes to viewport?

Thanx!

I stopped working on all sites. Incognito mode is selected, without extensions.

used this for 1 of my project, awesome features. at 1 point this actually conflicted with the iphone webkit overflow scrolling touch features. also the detection for windows phone seem wrong as the navigator.useragent return html instead of body. my jquery & javascript not very good, here's the porposed changes for viewportchecker.js *tested & working;

(function ($) {
    $.fn.viewportChecker = function (useroptions) {
        // Define options and extend with user
        var options = {
            classToAdd: 'visible',
            offset: 100,
            callbackFunction: function (elem) { }
        };
        $.extend(options, useroptions);
        // Cache the given element and height of the browser
        var $elem = this,
            windowHeight = $(window).height();
        this.checkElements = function () {
            // Set some vars to check with
            var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html' || (navigator.userAgent.toLowerCase().indexOf('windows phone') != -1) ? 'body' : 'html' ),
                viewportTop = $(scrollElem).scrollTop(),
                viewportBottom = (viewportTop + windowHeight);
            $elem.each(function () {
                var $obj = $(this);
                // If class already exists; quit
                //if ($obj.hasClass(options.classToAdd)) {
                if ($obj.hasClass("visible")) { 
                    return;
                }
                // define the top position of the element and include the offset which makes is appear earlier or later
                var elemTop = Math.round($obj.offset().top) + options.offset,
                    elemBottom = elemTop + ($obj.height());
                // Add class if in viewport
                if ((elemTop < viewportBottom) && (elemBottom > viewportTop)) {
                    $obj.addClass(options.classToAdd);
                    $obj.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
                        $obj.removeClass("animated bounceInUp");
                    });
                    // Do the callback function. Callback wil send the jQuery object as parameter
                    options.callbackFunction($obj);
                }
            });
        };
        // Run checkelements on load and scroll
        $(window).scroll(this.checkElements);
        this.checkElements();
        // On resize change the height var
        $(window).resize(function (e) {
            windowHeight = e.currentTarget.innerHeight;
        });
    };
})(jQuery);

it is problem, flexslider not work correctly

Hi,

I noticed that jQuery-viewport-checker doesn't work with the latest version of Chrome, Version 63.0.3239.132 (Official Build) (64-bit). Kindly help rectify.

Thanks.

Supposedly I have one section or div that have multiple elements on it, so when the parent div/section is triggered, the elements inside it are all triggered at the same time.

Since commit efc0cae on touch devices only the events "touchmove MSPointerMove pointermove" are used. Since scrolling on touch devices often works by swiping and it remains scrolling after ending the touch some content is not shown although it should be visible.

Additionally some devices exist which have both a touchscreen and other possibilities to scroll (e.g. notebooks with touchscreen and touchpad). I am not able to test it due to not owning such a device but I assume that scrolling using the touchpad wouldn't work (since a touchscreen is recognized and the scroll event is not binded).

I think the scroll event should also be used on devices with touch screens. But since you changed that in the mentioned commit I assume there is a reason not to do that.

Lucas

Hi,

I have question regarding the offset param, not very clear to me.

• if offset is not set, default is 0 ?
• if offset is set eg to 25 it means that function will fire when top of the element is 25px from top of the screen?
• if offset is set to -25 it means it will fire when element position is -25 from bottom of screen?

I'm trying to start animation as soon as top of the element is in viewport, but I find it difficult for some elements that are positioned on bottom of viewport.

Thanks for making this. It makes it a lot easier for me to fire off CSS animations.

I'm working on my personal photography website and have been using fullpage.js. One of the options for fullpage.js is "autoscroll: true" which changes the scrolling of a site so each scroll action moves up or down a section. You can see it in action on my site (davidsiglinphotography.com). So here's my question - I just noticed that when I have "autoscroll: true", viewport-checker doesn't fire off when the div class it is watching for comes into the viewport. When I set "autoscroll: false" viewport-checker fires off just fine. I was curious if you knew why. Thanks.

I was trying to use this for css animations on scrolling down in a bootstrap modal. but it does not appear to work... it works on main screen just fine though..

I am currently building a web application with Angular 2. I have a simple html page with multiple divs where I was trying to apply a simple background change color to the last div of the page -- named C3

However, when loading the page, firefox starts by loading all the elements and only afterwards it applies the proper styling.
What I get out of this is that firefox pre-loads everything in such a way that my div will automatically come into the view port for a split second.

You can see a snapshot of what happens at the start of a page load in my case.

But just after a couple of seconds, it loads the full page and the C3 div animation already started (without me even scrolling there).

For clearing sake here's a bit of the full page, so that you can see my divs are not small enough:

Google chrome loads the full page at once so C3 does not come up on the viewport for a split second.

Does anyone know why firefox does this? And is there any work-around?
It's not too bothering for what I want to do but it starts a animation before I wanted it to.

Thanks for the read!

After upgrading to Chrome v61 I noticed that the plugin isn't correctly identifying elements in the viewport. Elements initially selected continue to be identified as selected once leaving the viewport. Also, elements below the fold are almost never identified.

Is anyone else experiencing this issue with this version of Chrome?

I'm running on the Chrome developer edition (v48) and Viewport Checker behaves odd in this version of Chrome. Could be the a bug with Chrome since it's a dev version but it might be worth checking.

Viewport Checker doesn't work in this Chrome version but doesn't give any error. It seems to work when I open developer tools and close it again while on the part of the page that should react. I've tested this with my own site and the demo page.