patik / within-viewport Goto Github PK

See http://codepen.io/adam-lynch/pen/myabKK. Scroll until green box is in view, then run $(".a").is(":within-viewport") in console.

Hi, we've been using your plugins and it has been very useful but when we try to set the threshold manually we can't. Maybe you could give us more ideas in how to specify it or where to initialize, thanks in advance!

jQuery isn't required, right?

I'm trying to use this library without jQuery, and it seems to have issues. I think it can be resolved by ensuring that jQuery is defined prior to testing.

Do you have any examples of within-viewport being used w/o jquery?

would love to see this on npm as well.

How can we verify if the content in the viewport is 25% out or in the viewport.

I am looking to a way to add element classes when the element is 25% in the viewport and remove it when it its 25% out.

Please any suggestions?

Working on a custom carousel and want to target images inside of the slideshow. Wondering if you've had any experience with changing the viewport to equal a particular div with overflow: hidden?

Hey, maintainer(s) of patik/within-viewport!

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 patik/within-viewport 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": "patik/within-viewport",
  "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!

http://f.cl.ly/items/2h3B0d473K1J1e1S2n0d/Screen%20Shot%202013-11-21%20at%204.21.33%20PM.png

I've made a bit scroll to bottom and got this.

Chrome Version 31.0.1650.57
Mac OSX 10.7.5

My mouse is http://www.logitech.com/en-us/product/marathon-mouse-m705?crid=7
Are you tested the widget with trackpad? I think that the problem is somewhere near this

Thanks

Hi,
I would kindly ask if it would be possible to add ES module support to this module?
I added a pull request regarding that: #140
This will keep the original result and also provide an ESM version also supported in the package.json file.
Would you like to accept that?
If corrections, changes or adjustments are needed do not hesitate reply.

kind regards

Hi,

I am integrating my existing angular project into Universal code.I am able to bulid the server and in dist folder i am able to create server and browser folders.While i am running the server, i am getting the below error. This is not in my custom modules. It is in withinviewreport.js under node_modules

   dist\server.js:160472
     var canUseWindowDimensions = window.innerHeight !== undefined; // IE 8 and lower fail this
                                                          ^      ReferenceError: window is not defined

Versions of ngx-bootstrap, Angular, and Bootstrap:

 "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-2-local-storage": "^1.0.1",
    "angular-highcharts": "^5.0.7",
    "angular2-emoji": "^0.1.6",
    "angular2-emoji-picker": "^1.4.6",
    "angular2-highcharts": "^0.5.5",
    "angular2-infinite-scroll": "^0.3.5",
    "angular2-social-login": "^3.1.1",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "core-js": "^2.4.1",
    "highcharts": "^6.0.2",
    "jquery": "^3.2.1",
    "lg-autoplay": "^1.0.4",
    "lg-fullscreen": "^1.0.1",
    "lg-hash": "^1.0.3",
    "lg-pager": "^1.0.2",
    "lg-share": "^1.1.0",
    "lg-thumbnail": "^1.1.0",
    "lg-video": "^1.1.0",
    "lg-zoom": "^1.1.0",
    "lightgallery": "^1.6.4",
    "lightgallery.js": "^1.0.1",
    "ng2-go-top-button": "^2.0.8",
    "ng2-google-place-autocomplete": "^1.4.2",
    "ng2-pop-over": "^0.9.37",
    "ng2-toastr": "^4.0.1",
    "ng2-validation": "^4.2.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-chips": "^1.5.3",
    "ngx-pagination": "^3.0.1",
    "ngx-tour": "0.0.1",
    "rxjs": "^5.5.2",
    "time-ago-pipe": "^1.2.1",
    "ts-loader": "^3.1.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/highcharts": "^5.0.11",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }

Please let me know how can i over come to run my project

Hey, I'm not sure if I am doing something wrong or not but it seems to be returning false on every element pass through.

Perhaps this will help...

Hi, Could we get an update to NPM with the changes (#24 ) that were added?

Thanks!

Can you release last changes fix error (#22) and push him to npm. Tnx man!

Hi,
is it possible to constantly measure viewport state while scrolling?
currently it seems that in/out state is only tested on scroll end

-Thanks

This might already be a setting/option but I couldn't find it. Let's say you have a large area that is bigger than the viewport. As of now it will always return false as it's impossible that it's entirely within the viewport. If it's not already an option, I think that would be mega-useful. Use case: you have a large area someone is scrolling down through and you want to apply a class to it whenever any part of it is visible so you can, for instance, fixed position a bar.