zeusdeux / isinviewport Goto Github PK

This is quite rare and wrt >=2.0.0 releases (currently sitting in dev branch)

Implement a selector similar to $(el).do so we can get the effected element.

Hi,
I am using your script to control the autoplay of a video.
The sites has a slider with several slides. The slides consist of a fullscreen image followed by the content. On one slide I am having the video that should autoplay as soons as the user scrolls the according slide down. (The slides are set to "display block" or "display none".

Is your script able to help me out here because right now it's not working?

Hello,

I want to use the in-viweport with selector and toleranance but from the bottom of the page

if ( $('.mydiv').is( ':in-viewport(300)') ) {
	alert('yes');
	}

Thanks for your help!

Greeteings

Hi I implemented isInViewport with the minus value. I am looping this for testing every 50ms:

$('.anim:in-viewport(' -200 ')').addClass('active');

My understanding is that on a viewport height of 1000px this would add the active class to all items within the first 800px?

It seems to work fine if you scroll slowly. As soon as I scroll faster it doesn't add the class anymore. Can you help me resolve that issue?

i'd like to be able to do the following:

currently:

//example 1
//the height of tolerance region is 100px from top of viewport
$( 'div' ).isInViewport({ tolerance: 100 }).css( 'background-color', 'red' );

//example 2
//the height of tolerance region is (viewport.height - 100px) from top of viewport
$( 'div' ).isInViewport({ tolerance: -100 }).css( 'background-color', 'green' );

requesting:

//example 3
//the height of tolerance region is (viewport.height + 100px) from top of viewport
$( 'div' ).isInViewport({ tolerance: +100 }).css( 'background-color', 'blue' );

How I can add delay (2s for example) before play() and after pause() method?

$(window).scroll(function() {
$('#video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();

    } else {
        $(this)[0].pause();
    }
})

});

Hello,

Using lib/isInViewport.min.js I have this error in Chrome or Firefox.

Should I use babel or something now ?

Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined

Hello, I ask you before i'm going crazy. My goal is to detect elements BEFORE they are visible for lazy loading. I tried many things with tolerance but i'm unable to have the correct behavior.

See the image for more informations : http://dev.wdx.fr/tmp/viewport.png

Thanks !

I would love to be able to use percents instead of having to calculate the pixels in percent myself.

Hi, the script gives errors on IE8, even on the demo page. See image attached.

Hi,

the demos in the downloadable zip Archive are not working, neither in Chrome 54 nor in Firefox 50 on Windows 10.

The console is throwing the following error:

SyntaxError: expected expression, got '.'[Weitere Informationen] isInViewport.js:1
uncaught exception: Syntax error, unrecognized expression: in-viewport

I'm not sure to follow, what's the expected behavior of that line of code?

import window from 'window'

ERROR in ./~/is-in-viewport/lib/isInViewport.js
Module not found: Error: Can't resolve 'window' in '*/node_modules/is-in-viewport/lib'

hi
i have this variable

var activates = $('#notification');

and it is an ul having scroll-able li items and i want to target what is appear on ul view ? (it has max-width) okay !

that is worked perfectly with me

activates.children('li:in-viewport( 0, #notification )');

i want to use my variable activates in this selector ('li:in-viewport( 0, #notification ) i want to replace #notification with my variable activates;

why i have to target the viewport again and find it from the begging in the DOM and i have already done !!

sorry for my bad english

http://experiments.muditameta.com/isInViewport/

Got some warnings when installing via bower:

bower invalid-meta  The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower invalid-meta  The "main" field cannot contain minified files

With node v6.3.1 & npm v3.10.3 the installation of this package fails:

npm i is-in-viewport

results in:

npm ERR! [email protected] postinstall: `grunt`
npm ERR! spawn ENOENT
npm ERR! Failed at the [email protected] postinstall script 'grunt'.

It would be useful for horizontal-scroling sites

The demo page was blocked due to suspected malicious content. It may be hacked.

As the title states. I have a one page which scrolls horizontally and I'm trying to play / pause HTML5 videos when they are in / out of the viewport.

No luck so far, anyone else?

Great library, but how do I use this with jquery required by NPM?

For example:

myFile.js

import $ from 'jquery';
import isInViewport from 'is-in-viewport';

// Throws an error: 
// Uncaught ReferenceError: jQuery is not defined(…) isInViewport.js:182 

Hi,

We added view detect to the site below and it is working perfectly in modern browsers, although I noticed that it isn't working on IE11:
https://infinityworks.com/

The DOM element that it is added to is header.home-hero which is the large hero you first see. On IE11, the in-view viewed classes have not been applied.

I have tried also including the IntersectionObserver script before jQuery, but that does not seem to have any effect.

Do you have any suggestions?

Thank you and warmest regards,
Elliott

Hi,

I think there's a bug when using negative tolerance.

if I put an element squarely in the centre of the screen and call:

$(#test).is(':in-viewport(-100)');

It will return false.

This is because the bottom is less than the settings.tolerance (which is set to the viewport height minus the offset).

isVisibleFlag = settings.tolerance ? top <= settings.tolerance && bottom >= settings.tolerance : bottom > 0 && top <= $viewportHeight

I believe that this should be bottom <= settings.tolerance.

I regularly cache my jQuery elements early:

var $myElem = $('#my-elem');

It would be super handy if I could use this plugin like:

if ($myElem.is(':in-viewport')) {
  // do stuff...
}

Thanks for this package.

I am getting the following error...

Any ideas pls?

isInViewport needs tests for the browser.
This is an absolute necessity as of now.

So I'm using horizontal scroll and seems I can't use tolerance for it?

When used on elements inside an iframe, functionality breaks.
For example:

• When used in an iframe, default viewport should be contentWindow not window.

Hey, maintainer(s) of zeusdeux/isInViewport!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library zeusdeux/isInViewport is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "zeusdeux/isInViewport",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I am looking for an example of how to keep the :viewport running consistantly like it is in the demos, as it is not working for me

Sometimes the dollar sign ($) is already used by another library (Prototype, MooTools) and it is impossible to use your plugin. Would be great to add the support for jQuery alias for it.

Thank you.

e.not(':in-viewport') doesn't seem to work.

As a workaround I use if(! e.is(':in-viewport')) ...

Hello,

I have div with the class="xyz". Now I want say if xyz in the viewport "scroll to the article-div". For the first action, if the first xyz is in the viewport everything is fine.
But then it scroll to the next articel-div without the request "if xyz in the viewport".

Is it possible to remove the class from the xyz which is it any more in the viewport and then use the next xyz-div for the request.

Thanks very much!

Greetings

Hi author,

I want to check element has within the window for scroll up or down. But i see it detect for up.

Could you help me ?

Thanks.

I'm not sure if this type of functionality exists within the plugin, but I am looking a for a way to determine when a specific element is no longer in the viewport, and chain a function to that as well. For example:

$('#elementA:in-viewport').do(function(){
$('#elementB').addClass('hidden');
});

That works just fine. Now, I'm looking for a method so that when elementA is no longer in the viewport, I can remove that class from elementB.

Apologies if I am overlooking something simple. Thanks.

I've seen some really odd results using the offset option. Perhaps I've missed something or the documentation needs updating to make its use clear?

My understanding is that a positive offset should reduce the viewport dimensions top and bottom by the value e.g. :in-viewport(100) would make the viewport shorter by 200 pixels. Conversely, a negative would increase the viewport height allowing detection of objects before they appear on-screen.

The current release works for me if the element starts outside of this new viewport but if I refresh the page and the element is inside the viewport, then :in-viewport(100) returns false until I scroll to a position where the element starts to leave the viewport.

I think that there are 2 issues, first this code - I think it should be removed;

if (settings.tolerance < 0) { settings.tolerance = $viewportHeight + settings.tolerance; // viewport height - tol }

Secondly, this line;

isVisibleFlag = settings.tolerance ? top <= settings.tolerance && bottom >= settings.tolerance : bottom > 0 && top <= $viewportHeight;

I suggest it's changed to;

isVisibleFlag = settings.tolerance ? (bottom >= settings.tolerance && top <= $viewportHeight - settings.tolerance) : bottom > 0 && top <= $viewportHeight;

I now get the results I had expected.

I'm using this module in a browserify project and getting the following error when I try and build:

Error: Cannot find module 'window' from '[path to project]/node_modules/is-in-viewport/lib'

I'm including the plugin after I include jQuery, and jquery is a available as a module with the correct name:

var jQuery = $ = require('jquery');
require('is-in-viewport');

Any thoughts on what might be going on here?