Snipt.net is closing on December 31st, 2016

For more information, please visit this blog post.

snipt

Ctrl+h for KB shortcuts

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/
https://snipt.net/raw/0dc3ee6be83acf2f279c8f0ff1d1ba57/
0dc3ee6be83acf2f279c8f0ff1d1ba57
js
JavaScript
7
2016-12-06T17:14:01
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/
https://snipt.net/raw/504fba4c837baa026ca851ed22d9c609/
504fba4c837baa026ca851ed22d9c609
js
JavaScript
6
2016-12-07T03:40:34
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

Python

Hide axis ticks and labels in Matplotlib

1
2
3
4
5
ax.set_xticklabels([])
ax.set_yticklabels([])

ax.set_xticks([])
ax.set_yticks([])
https://snipt.net/embed/9df107414900dc35b90623acea14fd30/
https://snipt.net/raw/9df107414900dc35b90623acea14fd30/
9df107414900dc35b90623acea14fd30
python
Python
5
2016-12-04T08:39:42
True
False
False
Nov 24, 2012 at 03:43 AM
/api/public/snipt/50696/
hide-axis-ticks-and-labels-in-matplotlib
<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="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span> </span><span id="L-2"><a name="L-2"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</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="n">ax</span><span class="o">.</span><span class="n">set_xticks</span><span class="p">([])</span> </span><span id="L-5"><a name="L-5"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticks</span><span class="p">([])</span> </span></pre></div> </td></tr></table>
"hide axis ticks and labels", Matplotlib, Python, hide, labels, ticks

CSS

The strategy of visually hiding text while still allowing screen readers to read it is not new, and is incredibly important.

1
2
3
4
5
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
https://snipt.net/embed/9fe97b4dfead185c0025053261bec38e/
https://snipt.net/raw/9fe97b4dfead185c0025053261bec38e/
9fe97b4dfead185c0025053261bec38e
css
CSS
5
2016-12-07T02:41:05
True
False
False
/api/public/snipt/30873/
the-strategy-of-visually-hiding-text-while-still-allowing-screen-readers-to-read-it-is-not-new-and-is-incredibly-important
<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="c">/* Hide only visually, but have it available for screenreaders: h5bp.com/v */</span> </span><span id="L-2"><a name="L-2"></a><span class="nc">.visuallyhidden</span> <span class="p">{</span> <span class="nb">border</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">clip</span><span class="o">:</span> <span class="n">rect</span><span class="p">(</span><span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">);</span> <span class="nb">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span> <span class="nb">margin</span><span class="o">:</span> <span class="m">-1px</span><span class="p">;</span> <span class="nb">overflow</span><span class="o">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="nb">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">position</span><span class="o">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nb">width</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</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="c">/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */</span> </span><span id="L-5"><a name="L-5"></a><span class="nc">.visuallyhidden.focusable</span><span class="nd">:active</span><span class="o">,</span> <span class="nc">.visuallyhidden.focusable</span><span class="nd">:focus</span> <span class="p">{</span> <span class="nb">clip</span><span class="o">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nb">height</span><span class="o">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nb">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">overflow</span><span class="o">:</span> <span class="nb">visible</span><span class="p">;</span> <span class="nb">position</span><span class="o">:</span> <span class="nb">static</span><span class="p">;</span> <span class="nb">width</span><span class="o">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
css, hide

CSS

Hide text with text indent

1
2
3
4
5
6
h1 {  
   text-indent:-9999px;/*Hide Text, keep for SEO*/  
   margin:0 auto;  
   width:948px;  
   background:transparent url("images/header.jpg") no-repeat scroll;  
}  
https://snipt.net/embed/5a64e4bea58588cbd2e170100faaf060/
https://snipt.net/raw/5a64e4bea58588cbd2e170100faaf060/
5a64e4bea58588cbd2e170100faaf060
css
CSS
6
2016-11-27T02:52:36
True
False
False
/api/public/snipt/2228/
hide-text-with-text-indent-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="nt">h1</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">text-indent</span><span class="o">:-</span><span class="m">9999px</span><span class="p">;</span><span class="c">/*Hide Text, keep for SEO*/</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">margin</span><span class="o">:</span><span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">width</span><span class="o">:</span><span class="m">948px</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="nb">background</span><span class="o">:</span><span class="nb">transparent</span> <span class="sx">url(&quot;images/header.jpg&quot;)</span> <span class="nb">no-repeat</span> <span class="nb">scroll</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>
css, h1, hide, seo
Copyrighted, illegal, or inappropriate content? Email [email protected].