snipt

Ctrl+h for KB shortcuts

JavaScript

jQuery. Steps in $.each()

1
2
3
4
5
6
var eachItem = 4; // someFunction() will work on 1st, 5th, 9th ... element
$('.selector').each(function(i) {
	if(i++ % eachItem === 0) { // to select 4th, 8th etc. elements use ++i instead of i++
		someFunction();
	}
});
https://snipt.net/embed/48ddd2a0e4e231a034ac64ebf3fde8ac/
/raw/48ddd2a0e4e231a034ac64ebf3fde8ac/
48ddd2a0e4e231a034ac64ebf3fde8ac
js
JavaScript
6
2019-06-24T00:28:46
True
False
False
/api/public/snipt/129927/
jquery-steps-in-each
<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="kd">var</span> <span class="nx">eachItem</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span> <span class="c1">// someFunction() will work on 1st, 5th, 9th ... element</span> </span><span id="L-2"><a name="L-2"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.selector&#39;</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">i</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">i</span><span class="o">++</span> <span class="o">%</span> <span class="nx">eachItem</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// to select 4th, 8th etc. elements use ++i instead of i++</span> </span><span id="L-4"><a name="L-4"></a> <span class="nx">someFunction</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>
each, function, hack, jquery

JavaScript

Get Viewport width. jQuery

1
2
3
4
5
6
7
8
function viewportWidth() {
    var $body = $('body'),
        viewPortWidth = $body.css('overflow', 'hidden').width();
    
    $body.css('overflow', '');

    return viewPortWidth;
}
https://snipt.net/embed/9935d9ab42e952161c3411323936eafc/
/raw/9935d9ab42e952161c3411323936eafc/
9935d9ab42e952161c3411323936eafc
js
JavaScript
8
2019-06-24T02:20:49
True
False
False
Apr 05, 2014 at 03:42 PM
/api/public/snipt/127685/
get-viewport-width-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">function</span> <span class="nx">viewportWidth</span><span class="p">()</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="kd">var</span> <span class="nx">$body</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">),</span> </span><span id="L-3"><a name="L-3"></a> <span class="nx">viewPortWidth</span> <span class="o">=</span> <span class="nx">$body</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;overflow&#39;</span><span class="p">,</span> <span class="s1">&#39;hidden&#39;</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a> <span class="nx">$body</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;overflow&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a> </span><span id="L-7"><a name="L-7"></a> <span class="k">return</span> <span class="nx">viewPortWidth</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
function, jquery, simple, width

JavaScript

Fancybox open from needed index

$.fancybox.open($('.fancybox'), {index: 0});
https://snipt.net/embed/4d744b9fa5a28fda34ebe36ec7df5f47/
/raw/4d744b9fa5a28fda34ebe36ec7df5f47/
4d744b9fa5a28fda34ebe36ec7df5f47
js
JavaScript
1
2019-06-13T07:57:04
True
False
False
Mar 22, 2014 at 07:02 AM
/api/public/snipt/123027/
fancybox-open-from-needed-index
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</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="nx">fancybox</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.fancybox&#39;</span><span class="p">),</span> <span class="p">{</span><span class="nx">index</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span> </span></pre></div> </td></tr></table>
box, fancy, fancybox, gallery, image, images, jquery, modal, plugin

JavaScript

Hide block on click outside of them

1
2
3
4
5
6
7
$(document).on('click', function(e) {
	var $container = $("#block");

	if (!$container.is(e.target) && $container.has(e.target).length === 0) {
		$container.hide();
	}
});
https://snipt.net/embed/0dc3ee6be83acf2f279c8f0ff1d1ba57/
/raw/0dc3ee6be83acf2f279c8f0ff1d1ba57/
0dc3ee6be83acf2f279c8f0ff1d1ba57
js
JavaScript
7
2019-06-23T01:27:46
True
False
False
/api/public/snipt/120311/
hide-block-on-click-outside-of-them
<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></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">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="kd">var</span> <span class="nx">$container</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#block&quot;</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$container</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">$container</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">$container</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">}</span> </span><span id="L-7"><a name="L-7"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
click, hide, jquery, simple, snipet

JavaScript

Show-Hide

1
2
3
4
5
6
function show(sel) {
	$(sel).css({'display':'block','visibility':'hidden'});
}
function hide(sel) {
	$(sel).css({'display':'none','visibility':'visible'});
}
https://snipt.net/embed/504fba4c837baa026ca851ed22d9c609/
/raw/504fba4c837baa026ca851ed22d9c609/
504fba4c837baa026ca851ed22d9c609
js
JavaScript
6
2019-06-23T09:50:36
True
False
False
/api/public/snipt/88722/
show-hide-1
<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="kd">function</span> <span class="nx">show</span><span class="p">(</span><span class="nx">sel</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="nx">sel</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s1">&#39;display&#39;</span><span class="o">:</span><span class="s1">&#39;block&#39;</span><span class="p">,</span><span class="s1">&#39;visibility&#39;</span><span class="o">:</span><span class="s1">&#39;hidden&#39;</span><span class="p">});</span> </span><span id="L-3"><a name="L-3"></a><span class="p">}</span> </span><span id="L-4"><a name="L-4"></a><span class="kd">function</span> <span class="nx">hide</span><span class="p">(</span><span class="nx">sel</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">$</span><span class="p">(</span><span class="nx">sel</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="s1">&#39;display&#39;</span><span class="o">:</span><span class="s1">&#39;none&#39;</span><span class="p">,</span><span class="s1">&#39;visibility&#39;</span><span class="o">:</span><span class="s1">&#39;visible&#39;</span><span class="p">});</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
function, hide, show