snipt

Ctrl+h for KB shortcuts

JavaScript

jQuery.activeNav

1
2
3
4
5
6
7
// Appends the class 'active' to the current navigation link.
$("#nav a").each(function() {
    var hreflink = $(this).attr("href");
    if (hreflink.toLowerCase()==location.href.toLowerCase()) {
	$(this).parent("li").addClass("active");
	}
});
https://snipt.net/embed/3c8f04bc2e132ba1872b81b9bc106a52/
/raw/3c8f04bc2e132ba1872b81b9bc106a52/
3c8f04bc2e132ba1872b81b9bc106a52
js
JavaScript
7
2019-07-09T09:49:14
True
False
False
/api/public/snipt/15644/
jqueryactivenav
<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="c1">// Appends the class &#39;active&#39; to the current navigation link.</span> </span><span id="L-2"><a name="L-2"></a><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#nav a&quot;</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-3"><a name="L-3"></a> <span class="kd">var</span> <span class="nx">hreflink</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">attr</span><span class="p">(</span><span class="s2">&quot;href&quot;</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">if</span> <span class="p">(</span><span class="nx">hreflink</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()</span><span class="o">==</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">toLowerCase</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="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;active&quot;</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>
jquery, navigation

CSS

Cross Browser Text Shadow

1
2
3
4
 .shadow {   
    text-shadow: 1px 1px 1px #666;
    filter: Shadow(Color=#666666, Direction=135, Strength=5);
}
https://snipt.net/embed/4de6311d169be964333d3a787bdb3d6e/
/raw/4de6311d169be964333d3a787bdb3d6e/
4de6311d169be964333d3a787bdb3d6e
css
CSS
4
2019-07-09T09:49:13
True
False
False
/api/public/snipt/15642/
cross-browser-text-shadow
<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="nc">.shadow</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">text-shadow</span><span class="o">:</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">1px</span> <span class="m">#666</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="n">filter</span><span class="o">:</span> <span class="n">Shadow</span><span class="p">(</span><span class="n">Color</span><span class="o">=</span><span class="m">#666666</span><span class="o">,</span> <span class="n">Direction</span><span class="o">=</span><span class="m">135</span><span class="o">,</span> <span class="n">Strength</span><span class="o">=</span><span class="m">5</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css

CSS

CSS3 Box Shadow

1
2
3
4
5
.box { 
    box-shadow: 5px 5px 5px #444;
    -moz-box-shadow: 5px 5px 5px #444;
    -webkit-box-shadow: 5px 5px 5px #444; 
}
https://snipt.net/embed/103e1276cdfd1fa043ff9b9f3de10806/
/raw/103e1276cdfd1fa043ff9b9f3de10806/
103e1276cdfd1fa043ff9b9f3de10806
css
CSS
5
2019-07-09T09:49:13
True
False
False
/api/public/snipt/15641/
css3-box-shadow
<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="nc">.box</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">#444</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">#444</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">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">5px</span> <span class="m">#444</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

CSS

CSS3 Rounded Corners

1
2
3
4
5
.box { 
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
https://snipt.net/embed/152800bfb6719ef7b48a6d15135836f4/
/raw/152800bfb6719ef7b48a6d15135836f4/
152800bfb6719ef7b48a6d15135836f4
css
CSS
5
2019-07-13T11:40:40
True
False
False
/api/public/snipt/15640/
css3-rounded-corners-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></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nc">.box</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="err"></span><span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="nb">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">.5em</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="nb">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">.5em</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="nb">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">.5em</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