snipt

Ctrl+h for KB shortcuts

JavaScript

jQuery - detect CSS3 transition end

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
https://snipt.net/embed/f16de02cf9517154e4b8bf7a7edaa238/
/raw/f16de02cf9517154e4b8bf7a7edaa238/
f16de02cf9517154e4b8bf7a7edaa238
js
JavaScript
1
2019-06-24T15:31:55
True
False
False
Nov 24, 2013 at 10:40 AM
/api/public/snipt/96298/
jquery-detect-css3-transition-end
<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="s2">&quot;#someSelector&quot;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="p">...</span> <span class="p">});</span> </span></pre></div> </td></tr></table>
css3, jquery

Text only

simulate slow bandwith on linux systems

1
2
3
4
5
6
7
//Simulate slow internet connections eg for mobile devices
//Testet on Ubuntu

#sudo apt-get install trickle
#trickle -s -d 50 -w 100 firefox

The -s tells the command to run standalone, the -d 50 tells it to limit bandwidth to 50 KB/s, the -w 100 set the peak detection window size to 100 KB. firefox tells the command to start firefox with all of this rate limiting applied to any sites it attempts to load.
https://snipt.net/embed/83ed0d5843441ae7d48f4ffef70dba43/
/raw/83ed0d5843441ae7d48f4ffef70dba43/
83ed0d5843441ae7d48f4ffef70dba43
text
Text only
7
2019-06-15T13:10:24
True
False
False
Nov 20, 2013 at 10:29 AM
/api/public/snipt/95535/
simulate-slow-bandwith-on-linux-systems
<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>//Simulate slow internet connections eg for mobile devices </span><span id="L-2"><a name="L-2"></a>//Testet on Ubuntu </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a>#sudo apt-get install trickle </span><span id="L-5"><a name="L-5"></a>#trickle -s -d 50 -w 100 firefox </span><span id="L-6"><a name="L-6"></a> </span><span id="L-7"><a name="L-7"></a>The -s tells the command to run standalone, the -d 50 tells it to limit bandwidth to 50 KB/s, the -w 100 set the peak detection window size to 100 KB. firefox tells the command to start firefox with all of this rate limiting applied to any sites it attempts to load. </span></pre></div> </td></tr></table>
ubuntu

CSS

CSS - horizontal and vertical align text

1
2
3
4
5
6
7
8
/*
Only for one line
See more examples: http://pmob.co.uk/
*/

text-align: center;
vertical-align: middle;
line-height: 90px; /*same height as div*/
https://snipt.net/embed/a582267e02e40c8a0df7063fb4d5b4d8/
/raw/a582267e02e40c8a0df7063fb4d5b4d8/
a582267e02e40c8a0df7063fb4d5b4d8
css
CSS
8
2019-06-25T20:03:58
True
False
False
/api/public/snipt/93725/
css-horizontal-and-vertical-align-text
<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="c">/*</span> </span><span id="L-2"><a name="L-2"></a><span class="c">Only for one line</span> </span><span id="L-3"><a name="L-3"></a><span class="c">See more examples: http://pmob.co.uk/</span> </span><span id="L-4"><a name="L-4"></a><span class="c">*/</span> </span><span id="L-5"><a name="L-5"></a> </span><span id="L-6"><a name="L-6"></a><span class="nt">text-align</span><span class="o">:</span> <span class="nt">center</span><span class="o">;</span> </span><span id="L-7"><a name="L-7"></a><span class="nt">vertical-align</span><span class="o">:</span> <span class="nt">middle</span><span class="o">;</span> </span><span id="L-8"><a name="L-8"></a><span class="nt">line-height</span><span class="o">:</span> <span class="nt">90px</span><span class="o">;</span> <span class="c">/*same height as div*/</span> </span></pre></div> </td></tr></table>
css

CSS

css - do not break words

word-break: initial; /* webkit - do not break words*/
word-break: keep-all; /* FF - do not break words*/
https://snipt.net/embed/c06df8cfd8b5b10d0dab54ef1b622a4b/
/raw/c06df8cfd8b5b10d0dab54ef1b622a4b/
c06df8cfd8b5b10d0dab54ef1b622a4b
css
CSS
2
2019-06-07T07:17:45
True
False
False
Oct 17, 2013 at 12:04 PM
/api/public/snipt/88335/
css-do-not-break-words
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</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">word-break</span><span class="o">:</span> <span class="nt">initial</span><span class="o">;</span> <span class="c">/* webkit - do not break words*/</span> </span><span id="L-2"><a name="L-2"></a><span class="nt">word-break</span><span class="o">:</span> <span class="nt">keep-all</span><span class="o">;</span> <span class="c">/* FF - do not break words*/</span> </span></pre></div> </td></tr></table>
css, word-break

Sass

opacity with IE8 fallback - LESS mixin

1
2
3
4
5
6
7
/* http://getpreboot.com/#mixins-opacity */

.opacity(@opacity) {
  opacity: @opacity;
  @opacity-ie: @opacity * 100;
  filter: ~"alpha([email protected]{opacity-ie})"; // IE8
}
https://snipt.net/embed/f0d51c22ce9cb0cbaabe2b7470205629/
/raw/f0d51c22ce9cb0cbaabe2b7470205629/
f0d51c22ce9cb0cbaabe2b7470205629
sass
Sass
7
2019-06-22T06:07:17
True
False
False
/api/public/snipt/88265/
opacity-with-ie-fallback-less-mixon
<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="cm">/* http://getpreboot.com/#mixins-opacity */</span> </span><span id="L-2"><a name="L-2"></a> </span><span id="L-3"><a name="L-3"></a><span class="nc">.opacity</span><span class="o">(@</span><span class="nt">opacity</span><span class="o">)</span> <span class="err">{</span> </span><span id="L-4"><a name="L-4"></a> <span class="na">opacity</span><span class="o">:</span> <span class="o">@</span><span class="no">opacity</span><span class="err">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="k">@opacity-ie</span><span class="nd">:</span> <span class="o">@</span><span class="nt">opacity</span> <span class="o">*</span> <span class="nt">100</span><span class="o">;</span> </span><span id="L-6"><a name="L-6"></a> <span class="na">filter</span><span class="o">:</span> <span class="o">~</span><span class="s2">&quot;alpha([email protected]{opacity-ie})&quot;</span><span class="err">;</span> <span class="c1">// IE8</span> </span><span id="L-7"><a name="L-7"></a><span class="err">}</span> </span></pre></div> </td></tr></table>
less

Sass

box (drop) shadows - LESS mixin

1
2
3
4
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}
https://snipt.net/embed/46e84414eafaa68af56e0dac031a2d81/
/raw/46e84414eafaa68af56e0dac031a2d81/
46e84414eafaa68af56e0dac031a2d81
sass
Sass
4
2019-06-22T20:26:16
True
False
False
/api/public/snipt/88256/
box-drop-shadows-less-mixin
<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></span><span id="L-1"><a name="L-1"></a><span class="na">.box-shadow(@shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">3</span><span class="kt">px</span> <span class="nf">rgba</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,</span><span class="mi">0</span><span class="o">,.</span><span class="mi">25</span><span class="p">))</span> <span class="err">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="na">-webkit-box-shadow</span><span class="o">:</span> <span class="o">@</span><span class="n">shadow</span><span class="err">;</span> <span class="c1">// iOS &lt;4.3 &amp; Android &lt;4.1</span> </span><span id="L-3"><a name="L-3"></a> <span class="na">box-shadow</span><span class="o">:</span> <span class="o">@</span><span class="n">shadow</span><span class="err">;</span> </span><span id="L-4"><a name="L-4"></a><span class="err">}</span> </span></pre></div> </td></tr></table>
less