snipt

Ctrl+h for KB shortcuts

JavaScript

make tab key work as expected in textareas

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $("textarea").bind("keydown", function(e){
        if(e.keyCode == 9){
            $(this).text( $(this).text() + "\\t");
            return false;
        }
    });
});
https://snipt.net/embed/dadaa63672553575a27c17efdd016424/
/raw/dadaa63672553575a27c17efdd016424/
dadaa63672553575a27c17efdd016424
js
JavaScript
8
2019-07-17T21:57:20
True
False
False
/api/public/snipt/21622/
make-tab-key-work-as-expected-in-textareas
<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="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</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="s2">&quot;textarea&quot;</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;keydown&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">9</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="k">this</span><span class="p">).</span><span class="nx">text</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">text</span><span class="p">()</span> <span class="o">+</span> <span class="s2">&quot;\\t&quot;</span><span class="p">);</span> </span><span id="L-5"><a name="L-5"></a> <span class="k">return</span> <span class="kc">false</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><span id="L-8"><a name="L-8"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
input, tab

CSS

using keyframes in css

1
2
3
4
5
div {
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 0.35s;
    -webkit-animation-name: fadeInAndUp;
}
https://snipt.net/embed/371aa8af63a9966b991a936a6529f10a/
/raw/371aa8af63a9966b991a936a6529f10a/
371aa8af63a9966b991a936a6529f10a
css
CSS
5
2019-07-17T21:28:10
True
False
False
/api/public/snipt/16016/
using-keyframes-in-css
<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="nt">div</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">-</span><span class="n">delay</span><span class="o">:</span> <span class="m">0s</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">-</span><span class="n">duration</span><span class="o">:</span> <span class="m">0.35s</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">-</span><span class="n">name</span><span class="o">:</span> <span class="n">fadeInAndUp</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, keyframes, usage

CSS

css keyframes basic syntax

1
2
3
4
5
@-webkit-keyframes fadeInAndUp {
    0% { opacity: 0; bottom: -40px; -webkit-animation-timing-function: ease-out; }
    65% { opacity: 0; bottom: -39px; }
    100% { opacity: 1; bottom: 0; -webkit-animation-timing-function: ease-out; }
}
https://snipt.net/embed/660df59c9af67c2daa0962e5b6a6858a/
/raw/660df59c9af67c2daa0962e5b6a6858a/
660df59c9af67c2daa0962e5b6a6858a
css
CSS
5
2019-07-17T21:48:56
True
False
False
/api/public/snipt/16015/
css-keyframes-basic-syntax
<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="k">@-webkit-keyframes</span> <span class="nt">fadeInAndUp</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nt">0</span><span class="o">%</span> <span class="p">{</span> <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">bottom</span><span class="o">:</span> <span class="m">-40px</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">-</span><span class="n">timing</span><span class="o">-</span><span class="n">function</span><span class="o">:</span> <span class="n">ease</span><span class="o">-</span><span class="n">out</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-3"><a name="L-3"></a> <span class="nt">65</span><span class="o">%</span> <span class="p">{</span> <span class="nb">opacity</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">bottom</span><span class="o">:</span> <span class="m">-39px</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-4"><a name="L-4"></a> <span class="nt">100</span><span class="o">%</span> <span class="p">{</span> <span class="nb">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> <span class="nb">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">animation</span><span class="o">-</span><span class="n">timing</span><span class="o">-</span><span class="n">function</span><span class="o">:</span> <span class="n">ease</span><span class="o">-</span><span class="n">out</span><span class="p">;</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, keyframes