javascript - Check whether top +100px of element is visible -

-

i'm using jquery visible plugin (https://github.com/customd/jquery-visible) check whether element visible onscreen (and fire svg animation). whole element has visible, problem on screens less vertical space. plugin does provide option trigger when part of element visible onscreen if use animation not been seen. how can trigger animation when top of element +100px visible? think understand following script doing @ each stage, can't figure out change make in order achieve goal:

(function($){  var $w = $(window); $.fn.visible = function(partial,hidden,direction){      if (this.length < 1)         return;      var $t        = this.length > 1 ? this.eq(0) : this,         t         = $t.get(0),         vpwidth   = $w.width(),         vpheight  = $w.height(),         direction = (direction) ? direction : 'both',         clientsize = hidden === true ? t.offsetwidth * t.offsetheight : true;      if (typeof t.getboundingclientrect === 'function'){          // use native browser method, if available.         var rec = t.getboundingclientrect(),             tviz = rec.top    >= 0 && rec.top    <  vpheight,             bviz = rec.bottom >  0 && rec.bottom <= vpheight,             lviz = rec.left   >= 0 && rec.left   <  vpwidth,             rviz = rec.right  >  0 && rec.right  <= vpwidth,             vvisible   = partial ? tviz || bviz : tviz && bviz,             hvisible   = partial ? lviz || lviz : lviz && rviz;          if(direction === 'both')             return clientsize && vvisible && hvisible;         else if(direction === 'vertical')             return clientsize && vvisible;         else if(direction === 'horizontal')             return clientsize && hvisible;     } else {          var viewtop         = $w.scrolltop(),             viewbottom      = viewtop + vpheight,             viewleft        = $w.scrollleft(),             viewright       = viewleft + vpwidth,             offset          = $t.offset(),             _top            = offset.top,             _bottom         = _top + $t.height(),             _left           = offset.left,             _right          = _left + $t.width(),             comparetop      = partial === true ? _bottom : _top,             comparebottom   = partial === true ? _top : _bottom,             compareleft     = partial === true ? _right : _left,             compareright    = partial === true ? _left : _right;          if(direction === 'both')             return !!clientsize && ((comparebottom <= viewbottom) && (comparetop >= viewtop)) && ((compareright <= viewright) && (compareleft >= viewleft));         else if(direction === 'vertical')             return !!clientsize && ((comparebottom <= viewbottom) && (comparetop >= viewtop));         else if(direction === 'horizontal')             return !!clientsize && ((compareright <= viewright) && (compareleft >= viewleft));     } };  })(jquery);

the current working script can seen @ http://upright.cloudlevel.me need > 768x700px viewport height see animations.

edit - have partially working, animations started first applicable element comes view. how can trigger each applicable element when comes view? script now:

$(function() { var animated = $('.js-animate'),     distance = $(animated).offset().top,     $window = $(window); replacewithpaths(animated); hidesvgpaths(animated);  $window.scroll(function() {      $(animated).each(function(i) {          if ( $window.scrolltop() >= distance ) {             startsvganimation(this);             animated.splice(i,1);         }     });  }); });

could not without plugin

you can use $(document).height() height of window

and elementname.offset().top how far element top.

then can compare them

if (elementname.offset().top+100 < $(document).height()) {     //run animation }

note: might have change take scrolling account using document.scrolltop()


Comments

Post a Comment

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more