snipt

Ctrl+h for KB shortcuts

JavaScript

Make item scroll slower than window (Parallax)

1
2
3
4
5
$(window).scroll(function () { 
   $('#object').css({
      'bottom' : -($(this).scrollTop()/10)+"px" // increase # to make even slower
   }); 
});
https://snipt.net/embed/722d16388068ce3814f91cdae688b479/
/raw/722d16388068ce3814f91cdae688b479/
722d16388068ce3814f91cdae688b479
js
JavaScript
5
2019-06-14T08:28:18
True
False
False
/api/public/snipt/59214/
make-item-scroll-slower-than-window-parallax
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#object&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span> </span><span id="L-3"><a name="L-3"></a> <span class="s1">&#39;bottom&#39;</span> <span class="o">:</span> <span class="o">-</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span><span class="o">/</span><span class="mi">10</span><span class="p">)</span><span class="o">+</span><span class="s2">&quot;px&quot;</span> <span class="c1">// increase # to make even slower</span> </span><span id="L-4"><a name="L-4"></a> <span class="p">});</span> </span><span id="L-5"><a name="L-5"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
javascript, jquery, parallax

JavaScript

Add ie7 Class to Body if Browser is ie7

1
2
3
4
5
6
// if ie7 add class of ie7 to body
$(function() {
	if($.browser.msie && parseInt($.browser.version, 10) == 7) {
		$('body').addClass('ie7');
	}
});
https://snipt.net/embed/e1621fe805364c6f75ae4e8c7eb4c9bc/
/raw/e1621fe805364c6f75ae4e8c7eb4c9bc/
e1621fe805364c6f75ae4e8c7eb4c9bc
js
JavaScript
7
2019-06-14T00:58:33
True
False
False
Mar 28, 2013 at 11:42 AM
/api/public/snipt/58463/
add-ie7-class-to-body-if-browser-is-ie7
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c1">// if ie7 add class of ie7 to body</span> </span><span id="L-2"><a name="L-2"></a><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">msie</span> <span class="o">&amp;&amp;</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">version</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">==</span> <span class="mi">7</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-4"><a name="L-4"></a> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;ie7&#39;</span><span class="p">);</span> </span><span id="L-5"><a name="L-5"></a> <span class="p">}</span> </span><span id="L-6"><a name="L-6"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
"ie fix", ie7, jQuery, javascript

JavaScript

Event Trigger When User Scrolls To Element jQuery

1
2
3
4
5
6
7
8
var target = $('p').offset().top;

var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        alert('here it is!');
        clearInterval(interval);
    }
}, 200);
https://snipt.net/embed/bc7fa157a67a27f709fd4ed6ba3e8d44/
/raw/bc7fa157a67a27f709fd4ed6ba3e8d44/
bc7fa157a67a27f709fd4ed6ba3e8d44
js
JavaScript
8
2019-06-03T09:13:31
True
False
False
Jan 28, 2013 at 10:43 AM
/api/public/snipt/54643/
event-trigger-when-user-scrolls-to-element-jquery
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a> <a href="#L-7">7</a> <a href="#L-8">8</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">).</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span><span class="p">;</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="kd">var</span> <span class="nx">interval</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="o">&gt;=</span> <span class="nx">target</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;here it is!&#39;</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a> <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">interval</span><span class="p">);</span> </span><span id="L-7"><a name="L-7"></a> <span class="p">}</span> </span><span id="L-8"><a name="L-8"></a><span class="p">},</span> <span class="mi">200</span><span class="p">);</span> </span></pre></div> </td></tr></table>
event, javascript, jquery, trigger