javascript - Skrollr & relative mode fails to work -

-

i'm trying use skrollr library (https://github.com/prinzhorn/skrollr) create think simple bit of functionality mean when bottom-top attribute triggered (when top 25px above bottom viewport) opacity 0, , user scrolls down further opacity increase 1 when bottom of element 25px above bottom viewport.

however, when load html file states in console elements either skrollable-after or skrollable-between, when not case later 2 elements (at least when viewport obscuring later 2 elements). final element stated being skrollable-between when in reality far beneath bottom of viewport.

i did think may issue loading of various assets, s.refresh() doesn't change (at least in manner using it).

html follows, skrollr.js being latest source file on github (0.6.11).

any guidance appreciated.

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="skrollr.js"></script> </head> <body> <div class="column"><p>column 1</p> </div>  <div class="column"><p>column 2</p>      <div class="imp-text-one" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">this important text</div>      <div class="placeholder"></div>      <div class="imp-text-two" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom="opacity: 1">this important text</div>      <div class="placeholder"></div>      <div class="imp-text-three" data--25-bottom-top="opacity: 0;" data--25-bottom-bottom:"opacity: 1">     important text</div>  </div>  <script type="text/javascript">    s = skrollr.init(); </script> <script>  window.onload = function(){      s.refresh(); } </script> </body> </html>

css below:

.column { width: 50%;  float: left; }  body { margin: 0; padding: 0; }  .imp-text-one { padding: 50px 10px 50px 10px; border-style: solid; }  .imp-text-two { padding: 50px 10px 50px 10px; border-style: solid; }  .placeholder { height: 400px; }  .imp-text-three { padding: 50px 10px 50px 10px; border-style: solid; }

it's data-[offset]-(viewport-anchor)-[element-anchor] , not data-[offset]-(element-anchor)-[viewport-anchor].

for example first element has 2 keyframes both relative bottom of viewport. never gets close bottom!

correct:

<div class="imp-text-one" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">this important text</div>  <div class="placeholder"></div>  <div class="imp-text-two" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom="opacity: 1">this important text</div>  <div class="placeholder"></div>  <div class="imp-text-three" data--25-top-bottom="opacity: 0;" data--25-bottom-bottom:"opacity: 1"> important text</div>

edit: need add proper doctype, e.g. <!doctype html>. otherwise browsers switch quirks mode, skrollr doesn't handle.


Comments

Post a Comment

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

-
Image
i'm trying self sizing uicollectionviewcells working auto layout, can't seem cells size content. i'm having trouble understanding how cell's size updated contents of what's inside cell's contentview. here's setup i've tried: custom uicollectionviewcell uitextview in contentview. scrolling uitextview disabled. the contentview's horizontal constraint is: "h:|[_textview(320)]", i.e. uitextview pinned left of cell explicit width of 320. the contentview's vertical constraint is: "v:|-0-[_textview]", i.e. uitextview pinned top of cell. the uitextview has height constraint set constant uitextview reports fit text. here's looks cell background set red, , uitextview background set blue: i put project i've been playing on github here . updated ios 9 after seeing github solution break under ios 9 got time investigate issue fully. have updated repo include several examples of different configurations s...
Read more

DOM Manipulation in Wordpress (and elsewhere) using php -

-
DOM Manipulation in Wordpress (and elsewhere) using php - i'm quite new dom manipulation world , head start in order avoid mutual errors. i looking efficient way manipulate content generated wordpress using php. @ moment using simple html dom seems work fine. found domdocument , few others , helpfull if cleared out 1 faster, improve or @ to the lowest degree generate less errors in case of bad markup. also on side can explain syntax (instead of $html @$html) thank much php wordpress domdocument simple-html-dom
Read more

asp.net - Passing parameter to telerik popup -

-
is there way pass parameter telerik similar window.showmodaldialog the way call window.showmodaldialog : window.showmodaldialog(pagename, myargs, 'status:no;dialoghide=true;help:no') myargs parameter passing popup try likes , <script type="text/javascript"> function openradwin(myargs) { radopen("yourpagename.aspx?parameter=" + myargs , "radwindow1"); } </script> <telerik:radwindowmanager id="radwindowmanager1" runat="server" enableshadow="true" visiblestatusbar="false"> <windows> <telerik:radwindow id="radwindow1" runat="server" showcontentduringload="false" width="400px" height="400px" title="telerik radwindow" behaviors="default"> </telerik:radwindow> </windows> </telerik:radwindowmanager> and , @ page_load of...
Read more