<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Snipplr</title>
<link>http://snipplr.com/language/javascript/tags/div</link>
<description>Recent snippets posted on Snipplr.com</description>
<language>en-us</language>
<pubDate>Wed, 19 Jun 2013 13:14:33 GMT</pubDate>
<item>
<title>(JavaScript) Center element inside of a div container - Neven</title>
<link>http://snipplr.com/view/61198/center-element-inside-of-a-div-container/</link>
<description><![CDATA[ <p>Position of the element to center needs to be relative to the container.</p> ]]></description>
<pubDate>Fri, 25 Nov 2011 21:44:26 GMT</pubDate>
<guid>http://snipplr.com/view/61198/center-element-inside-of-a-div-container/</guid>
</item>
<item>
<title>(JavaScript) Scroll div by mouse - Piotrek290</title>
<link>http://snipplr.com/view/41968/scroll-div-by-mouse/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Sun, 10 Oct 2010 05:54:57 GMT</pubDate>
<guid>http://snipplr.com/view/41968/scroll-div-by-mouse/</guid>
</item>
<item>
<title>(JavaScript) highlight all divs (bookmarklet) - hasantayyar</title>
<link>http://snipplr.com/view/24794/highlight-all-divs-bookmarklet/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Tue, 15 Dec 2009 03:01:35 GMT</pubDate>
<guid>http://snipplr.com/view/24794/highlight-all-divs-bookmarklet/</guid>
</item>
<item>
<title>(JavaScript) show hide div - fackz</title>
<link>http://snipplr.com/view/22094/show-hide-div/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Thu, 29 Oct 2009 08:48:32 GMT</pubDate>
<guid>http://snipplr.com/view/22094/show-hide-div/</guid>
</item>
<item>
<title>(JavaScript) Sliding Div Function - chippper</title>
<link>http://snipplr.com/view/17291/sliding-div-function/</link>
<description><![CDATA[ <p>This assumes HTML that looks like this:


		&amp;lt;div id=&amp;quot;containing_div&amp;quot;&amp;gt;
		    &amp;lt;div id=&amp;quot;div_1&amp;quot; style=&amp;quot;background-color:red&amp;quot; class=&amp;quot;visible_div&amp;quot;&amp;gt;
		        &amp;lt;p&amp;gt;Test Content 1&amp;lt;/p&amp;gt;
		    &amp;lt;/div&amp;gt; &amp;lt;!-- div_1 --&amp;gt;
		    &amp;lt;div id=&amp;quot;div_2&amp;quot; style=&amp;quot;background-color:blue&amp;quot;&amp;gt;
		        &amp;lt;p&amp;gt;Test Content 2&amp;lt;/p&amp;gt;
		    &amp;lt;/div&amp;gt; &amp;lt;!-- div_2 --&amp;gt;
		    &amp;lt;div id=&amp;quot;div_3&amp;quot; style=&amp;quot;background-color:yellow&amp;quot;&amp;gt;
		        &amp;lt;p&amp;gt;Test Content 3&amp;lt;/p&amp;gt;
		    &amp;lt;/div&amp;gt; &amp;lt;!-- div_3 --&amp;gt;
		&amp;lt;/div&amp;gt; &amp;lt;!-- containing div --&amp;gt;
		      &amp;lt;ul id=&amp;quot;test_buttons&amp;quot;&amp;gt;
		        &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;div_1_link&amp;quot; onclick=&amp;quot;slideDiv(&amp;#x27;div_1&amp;#x27;)&amp;quot; class=&amp;quot;here&amp;quot;&amp;gt;One&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
		        &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;div_2_link&amp;quot; onclick=&amp;quot;slideDiv(&amp;#x27;div_2&amp;#x27;)&amp;quot;&amp;gt;Two&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
		        &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;#&amp;quot; id=&amp;quot;div_3_link&amp;quot; onclick=&amp;quot;slideDiv(&amp;#x27;div_3&amp;#x27;)&amp;quot;&amp;gt;Three&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
		    &amp;lt;/ul&amp;gt; &amp;lt;!-- test_buttons --&amp;gt;




And CSS that looks like this:

		.hidden_div {
	        display: none;
	    }

	    .visible_div {
	        display: block;
	    }
	
		#containing_div {
	        width: 300px;
	        background-color: #ddd;
	        height: 300px;
	        overflow:hidden;
	    }
	    #containing_div div {
	        width: 300px;
	        height: 300px;
	    }

	    #test_buttons {
	        background-color: green;
	        float: left;
	        padding: 10px 0 10px 0;
	    }

	    #test_buttons li {
	        display:inline;
	        float: left;
	        list-style-type:none;
	        text-align: center;
	    }
	    #test_buttons li a {
	        display: block;
	        float: left;
	        width: 50px;
	        margin-left: 10px;
	        height: 15px;
	        background-color: white;
	        padding: 8px 4px;
	    }
	    #test_buttons li a.here {
	        background-color: orange;
	    }
	    #test_buttons li a.not_here{
	        background-color: white;
	    }

Change attributes at will, except for display: none or block.</p> ]]></description>
<pubDate>Tue, 21 Jul 2009 14:40:26 GMT</pubDate>
<guid>http://snipplr.com/view/17291/sliding-div-function/</guid>
</item>
<item>
<title>(JavaScript) Laat 3 seconden load bar zien. - epco</title>
<link>http://snipplr.com/view/16787/laat-3-seconden-load-bar-zien/</link>
<description><![CDATA[ <p>Laat 3 seconden de load div zien met daarin de loader gif animatie.
het element met id prijs wordt  3 seconden verborgen.</p> ]]></description>
<pubDate>Thu, 09 Jul 2009 03:06:09 GMT</pubDate>
<guid>http://snipplr.com/view/16787/laat-3-seconden-load-bar-zien/</guid>
</item>
<item>
<title>(JavaScript) Javascript loading div for ajax calls or intensive operations - eden159</title>
<link>http://snipplr.com/view/14028/javascript-loading-div-for-ajax-calls-or-intensive-operations/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Tue, 14 Apr 2009 08:15:53 GMT</pubDate>
<guid>http://snipplr.com/view/14028/javascript-loading-div-for-ajax-calls-or-intensive-operations/</guid>
</item>
<item>
<title>(JavaScript) Display HTML - jlvallelonga</title>
<link>http://snipplr.com/view/12297/display-html/</link>
<description><![CDATA[ <p>this function displays the given page with the given query string in the given div
usage: </p> ]]></description>
<pubDate>Tue, 17 Feb 2009 12:16:57 GMT</pubDate>
<guid>http://snipplr.com/view/12297/display-html/</guid>
</item>
<item>
<title>(JavaScript) Show Hide a Div with Javascript - nerdsane</title>
<link>http://snipplr.com/view/11792/show-hide-a-div-with-javascript/</link>
<description><![CDATA[ <p>this code snippet will let u show/ hide a div element easily.

share it</p> ]]></description>
<pubDate>Tue, 03 Feb 2009 13:18:01 GMT</pubDate>
<guid>http://snipplr.com/view/11792/show-hide-a-div-with-javascript/</guid>
</item>
<item>
<title>(JavaScript) javascript to center a div with prototype.js - ginoplusio</title>
<link>http://snipplr.com/view/10528/javascript-to-center-a-div-with-prototypejs/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Tue, 16 Dec 2008 08:05:57 GMT</pubDate>
<guid>http://snipplr.com/view/10528/javascript-to-center-a-div-with-prototypejs/</guid>
</item>
<item>
<title>(JavaScript) Custom Mootools Scroll - fredaudet</title>
<link>http://snipplr.com/view/7391/custom-mootools-scroll/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Fri, 18 Jul 2008 15:59:04 GMT</pubDate>
<guid>http://snipplr.com/view/7391/custom-mootools-scroll/</guid>
</item>
<item>
<title>(JavaScript) Div Slider - fredaudet</title>
<link>http://snipplr.com/view/7388/div-slider/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Fri, 18 Jul 2008 15:56:37 GMT</pubDate>
<guid>http://snipplr.com/view/7388/div-slider/</guid>
</item>
<item>
<title>(JavaScript) simple toggle html element - iTony</title>
<link>http://snipplr.com/view/4814/simple-toggle-html-element/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Mon, 28 Jan 2008 20:13:12 GMT</pubDate>
<guid>http://snipplr.com/view/4814/simple-toggle-html-element/</guid>
</item>
<item>
<title>(JavaScript) jquery: simule z-index to place divs over select objects (explorer bug) - victorchamorro</title>
<link>http://snipplr.com/view/4134/jquery-simule-zindex-to-place-divs-over-select-objects-explorer-bug/</link>
<description><![CDATA[ <p>using bgiframe to solve a bug in explorer: you cannot apply z-index to place divs over selects in a form!!!</p> ]]></description>
<pubDate>Wed, 14 Nov 2007 11:27:40 GMT</pubDate>
<guid>http://snipplr.com/view/4134/jquery-simule-zindex-to-place-divs-over-select-objects-explorer-bug/</guid>
</item>
<item>
<title>(JavaScript) Sbow Hide DIV - raakex</title>
<link>http://snipplr.com/view/1957/sbow-hide-div/</link>
<description><![CDATA[ <p>Show Hide DIV</p> ]]></description>
<pubDate>Thu, 11 Jan 2007 02:35:52 GMT</pubDate>
<guid>http://snipplr.com/view/1957/sbow-hide-div/</guid>
</item>
<item>
<title>(JavaScript) div class changer - leoh</title>
<link>http://snipplr.com/view/760/div-class-changer/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Wed, 09 Aug 2006 12:13:01 GMT</pubDate>
<guid>http://snipplr.com/view/760/div-class-changer/</guid>
</item>
</channel>
</rss>