snipt

Ctrl+h for KB shortcuts
#126750

JavaScript

replace A HREF to SPAN

1
2
3
$('.head-recall').each(function () {
	$(this).replaceWith('<span>' + $(this).html() + '</span>');
});
https://snipt.net/embed/365826b2618249f8163f4b9d7bef8984/
https://snipt.net/raw/365826b2618249f8163f4b9d7bef8984/
365826b2618249f8163f4b9d7bef8984
js
JavaScript
3
2014-04-18T23:52:27
True
False
Apr 02, 2014 at 09:26 AM
/api/public/snipt/126750/
replace-a-href-to-span
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.head-recall&#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="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">replaceWith</span><span class="p">(</span><span class="s1">&#39;&lt;span&gt;&#39;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">html</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
javascript, js
#122560

JavaScript

Test if href points image

1
2
3
4
if($(this).attr('href').indexOf('.jpg') > 0) // or any other extension
{
    //do what you want
}
https://snipt.net/embed/6b6e76de0f8d48d7e980f025b5f0f153/
https://snipt.net/raw/6b6e76de0f8d48d7e980f025b5f0f153/
6b6e76de0f8d48d7e980f025b5f0f153
js
JavaScript
4
2014-04-18T23:46:29
True
False
Mar 17, 2014 at 01:11 PM
/api/public/snipt/122560/
test-if-href-points-image
<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></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="k">if</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">attr</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;.jpg&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="c1">// or any other extension</span> </span><span id="L-2"><a name="L-2"></a><span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="c1">//do what you want</span> </span><span id="L-4"><a name="L-4"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
check, href, image, img, javascript, jpeg, jpg, jquery, js, test
#114964

JavaScript

Detect animation end jQuery/CSS

1
2
3
4
5
el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
function(e) {
    // code to execute after animation ends    
    myBox.removeClass('change-size');
});
https://snipt.net/embed/b71bacffabc246414df93af4df6860dc/
https://snipt.net/raw/b71bacffabc246414df93af4df6860dc/
b71bacffabc246414df93af4df6860dc
js
JavaScript
5
2014-04-19T10:12:41
True
False
/api/public/snipt/114964/
detect-animation-end-jquerycss
<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 id="L-1"><a name="L-1"></a><span class="nx">el</span><span class="p">.</span><span class="nx">one</span><span class="p">(</span><span class="s1">&#39;webkitAnimationEnd oanimationend msAnimationEnd animationend&#39;</span><span class="p">,</span> </span><span id="L-2"><a name="L-2"></a><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-3"><a name="L-3"></a> <span class="c1">// code to execute after animation ends </span> </span><span id="L-4"><a name="L-4"></a> <span class="nx">myBox</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;change-size&#39;</span><span class="p">);</span> </span><span id="L-5"><a name="L-5"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
css, jquery, js
#114762

Text only

JavaScript iFrame Buster

1
2
3
4
5
6
7
/*
Oftentimes you want to make sure your site isn't being IFRAME'd.  Sometimes it's for security reasons, other times it's so your site's content isn't being skimmed else, and other times it's...oh, who cares, you just want to do it.  Here's a short way to escape frames:
*/

if (top.location != self.location) {
    top.location = self.location.href;
}
https://snipt.net/embed/ec92d1593c098837461fbc10ed5230fe/
https://snipt.net/raw/ec92d1593c098837461fbc10ed5230fe/
ec92d1593c098837461fbc10ed5230fe
text
Text only
7
2014-04-16T03:03:13
True
False
Feb 18, 2014 at 10:11 AM
/api/public/snipt/114762/
javascript-iframe-buster
<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 id="L-1"><a name="L-1"></a>/* </span><span id="L-2"><a name="L-2"></a>Oftentimes you want to make sure your site isn&#39;t being IFRAME&#39;d. Sometimes it&#39;s for security reasons, other times it&#39;s so your site&#39;s content isn&#39;t being skimmed else, and other times it&#39;s...oh, who cares, you just want to do it. Here&#39;s a short way to escape frames: </span><span id="L-3"><a name="L-3"></a>*/ </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a>if (top.location != self.location) { </span><span id="L-6"><a name="L-6"></a> top.location = self.location.href; </span><span id="L-7"><a name="L-7"></a>} </span></pre></div> </td></tr></table>
js
#114585

JavaScript

WebP Image with Fallback

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
https://snipt.net/embed/3129a92b49c67565ace361fb10dedc62/
https://snipt.net/raw/3129a92b49c67565ace361fb10dedc62/
3129a92b49c67565ace361fb10dedc62
js
JavaScript
1
2014-04-18T23:27:04
True
False
Apr 08, 2014 at 09:22 AM
/api/public/snipt/114585/
webp-image-with-fallback
<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 id="L-1"><a name="L-1"></a><span class="o">&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;image.webp&quot;</span> <span class="nx">onerror</span><span class="o">=</span><span class="s2">&quot;this.onerror=null; this.src=&#39;image.png&#39;&quot;</span><span class="o">&gt;</span> </span></pre></div> </td></tr></table>
image, img, js, webp