Note that there are some explanatory texts on larger screens.

plurals
  1. PORemoving a function from JS
    text
    copied!<p>I originally had the <a href="http://prinzhorn.github.io/skrollr/" rel="nofollow">Skrollr library</a> running which I have now had to remove. After hours and hours of running through code my eyes are shot. </p> <p>I have a side nav which changes the URL hash on scroll (each section has a tag id) and I now want to remove the skrollr wrap but still retain the URL hash side nav. The issue is that when I remove the wrap of var <code>s = skrollr.init({ forceHeight: true, beforerender: function(info){</code> my side nav doesn't function anymore :/</p> <pre><code>var layers = document.getElementById('skrollr-body').getElementsByClassName("slide"); var nav = document.getElementById('options').getElementsByTagName('ul'); var layer = 0; var activeLayer = 0; var onLoad = true; var lockButton = false; var storeOffset = -1; var first = true; var initialAnimation = false; var animateUpSettings = { duration: 500, done: function() { document.body.style.overflow = 'auto'; lockButton = false; } }; var animateDownSettings = { duration: 500, easing: 'sqrt', done: animateUpSettings.done }; var s = skrollr.init({ forceHeight: true, beforerender: function(info){ if(first &amp;&amp; !window.location.hash){ for(var i = 0; i &lt; nav.length; i++){ if(i == 0){ nav[i].setAttribute("class", "button active"); }else{ nav[i].setAttribute("class", "button inactive"); } } }else if(first &amp;&amp; window.location.hash){ for(var i = 0; i &lt; nav.length; i++){ if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){ nav[i].setAttribute("class", "button active"); }else{ nav[i].setAttribute("class", "button inactive"); } } for(var i = 0; i &lt; layers.length; i++){ if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){ goTo = layers[i]; activeLayer = i; break; } } storeOffset = this.relativeToAbsolute(goTo, 'top', 'top'); var m = document.height - window.innerHeight; if(storeOffset &gt; m){ storeOffset = m; } if(this.getScrollTop() &lt; storeOffset){ this.animateTo(storeOffset, animateDownSettings); }else{ this.animateTo(storeOffset, animateUpSettings); } first = false; }else{ if(!this.isAnimatingTo()){ if(onLoad){ onLoad = false; if(window.location.hash &amp;&amp; layers[activeLayer].getAttribute("tag") != window.location.hash.substring(1)){ initialAnimation = true; } } } if(!window.location.hash){ nav[0].setAttribute("class", "active"); }else if(!this.isAnimatingTo()){ for(var i = 0; i &lt; nav.length; i++){ if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){ nav[i].setAttribute("class", "button active"); }else{ nav[i].setAttribute("class", "button inactive"); } } } } }, render: function(info) { if(!this.isAnimatingTo()){ if(!lockButton){ layer = -2; for(var i = 0; i &lt; layers.length; i++){ if(this.getScrollTop() &gt;= this.relativeToAbsolute(layers[i], 'top', 'top')){ layer = i; } } if(layer &lt; 0) layer = 0; window.location='#'+layers[layer].getAttribute("tag"); } } if(initialAnimation){ initialAnimation = false; goTo = null; for(var i = 0; i &lt; layers.length; i++){ if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){ goTo = layers[i]; activeLayer = i; break; } } storeOffset = this.relativeToAbsolute(goTo, 'top', 'top'); var m = document.height - window.innerHeight; if(storeOffset &gt; m){ storeOffset = m; } if(this.getScrollTop() &lt; storeOffset){ this.animateTo(storeOffset, animateDownSettings); }else{ this.animateTo(storeOffset, animateUpSettings); } } } }); document.getElementById('nav').onclick = function(){ s.stopAnimateTo(); onLoad = true; s.refresh(layers); lockButton = true; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload