snipt

Ctrl+h for KB shortcuts

JavaScript

Delete all inline stylying in a page with jQuery

$("*[style]").attr("style", "");
https://snipt.net/embed/cc6cdcc993c7e8b52990bc10a3c85874/
/raw/cc6cdcc993c7e8b52990bc10a3c85874/
cc6cdcc993c7e8b52990bc10a3c85874
js
JavaScript
1
2019-06-18T11:08:21
True
False
False
Jan 27, 2014 at 02:34 AM
/api/public/snipt/42679/
delete-all-inline-stylying-in-a-page-with-jquery
<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;*[style]&quot;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;style&quot;</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span> </span></pre></div> </td></tr></table>
css, inline, jquery, js, style

CSS

CSS Sprites with Inline Images

1
2
3
4
5
6
7
    <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
    .clip               { position: absolute; top: 0; left: 0; }

    .pos-1              { clip:rect(0 48px 48px 0); }
    .pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
    .pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
    .pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; left: -48px; }
https://snipt.net/embed/569fdfabbb5536ad6f9be57579d7cf42/
/raw/569fdfabbb5536ad6f9be57579d7cf42/
569fdfabbb5536ad6f9be57579d7cf42
css
CSS
7
2019-06-19T11:04:34
True
False
False
/api/public/snipt/39711/
css-sprites-with-inline-images
<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="o">&lt;</span><span class="nt">img</span> <span class="nt">src</span><span class="o">=</span><span class="s2">&quot;images/arrow-sprite.png&quot;</span> <span class="nt">alt</span><span class="o">=</span><span class="s2">&quot;arrow&quot;</span> <span class="nt">class</span><span class="o">=</span><span class="s2">&quot;clip pos-1&quot;</span> <span class="o">/&gt;</span> </span><span id="L-2"><a name="L-2"></a> <span class="nc">.clip</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">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="nb">left</span><span class="o">:</span> <span class="m">0</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="nc">.pos-1</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">48px</span> <span class="m">48px</span> <span class="m">0</span><span class="p">);</span> <span class="p">}</span> </span><span id="L-5"><a name="L-5"></a> <span class="nc">.pos-2</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">96px</span> <span class="m">48px</span> <span class="m">48px</span><span class="p">);</span> <span class="nb">left</span><span class="o">:</span> <span class="m">-48px</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-6"><a name="L-6"></a> <span class="nc">.pos-3</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">48px</span> <span class="m">48px</span> <span class="m">96px</span> <span class="m">0</span><span class="p">);</span> <span class="nb">top</span><span class="o">:</span> <span class="m">-48px</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-7"><a name="L-7"></a> <span class="nc">.pos-4</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">48px</span> <span class="m">96px</span> <span class="m">96px</span> <span class="m">48px</span><span class="p">);</span> <span class="nb">top</span><span class="o">:</span> <span class="m">-48px</span><span class="p">;</span> <span class="nb">left</span><span class="o">:</span> <span class="m">-48px</span><span class="p">;</span> <span class="p">}</span> </span></pre></div> </td></tr></table>
CSS, inline

CSS

Crossbrowser inline-block property

1
2
3
4
5
6
#menu li {
	display:inline-block;

	zoom: 1;
	*display:inline;
}
https://snipt.net/embed/63e13543ee9b91c5869ff2a4c03acc24/
/raw/63e13543ee9b91c5869ff2a4c03acc24/
63e13543ee9b91c5869ff2a4c03acc24
css
CSS
6
2019-06-17T04:33:53
True
False
False
/api/public/snipt/33507/
crossbrowser-inline-block-property
<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="nn">#menu</span> <span class="nt">li</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">display</span><span class="o">:</span><span class="nb">inline</span><span class="o">-</span><span class="nb">block</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">zoom</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a> <span class="o">*</span><span class="nb">display</span><span class="o">:</span><span class="nb">inline</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>
block, crossbrowser, css, display, fix, ie, inline

JavaScript

(CakePHP) Adding CSS or Javascript to $scripts_for_layout

1
2
3
4
5
6
// Css/JS tag in $scripts_for_layout
//
// In view file
<? $html->css("text.css", "", array(), false) 
  $javascript->link("jquery-1.3.min.js", false);
?>
https://snipt.net/embed/f35cdc95a829dc01a71f83700dfef100/
/raw/f35cdc95a829dc01a71f83700dfef100/
f35cdc95a829dc01a71f83700dfef100
js
JavaScript
6
2019-06-14T04:27:20
True
False
False
/api/public/snipt/4544/
cakephp-adding-css-to-scripts_for_layout_
<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="c1">// Css/JS tag in $scripts_for_layout</span> </span><span id="L-2"><a name="L-2"></a><span class="c1">//</span> </span><span id="L-3"><a name="L-3"></a><span class="c1">// In view file</span> </span><span id="L-4"><a name="L-4"></a><span class="o">&lt;?</span> <span class="nx">$html</span><span class="o">-&gt;</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;text.css&quot;</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">,</span> <span class="nx">array</span><span class="p">(),</span> <span class="kc">false</span><span class="p">)</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">$javascript</span><span class="o">-&gt;</span><span class="nx">link</span><span class="p">(</span><span class="s2">&quot;jquery-1.3.min.js&quot;</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a><span class="o">?&gt;</span> </span></pre></div> </td></tr></table>
$scripts_for_layout, cakephp, css, inline