Move placeholder styles into .demo-placeholder.

This allows a page to have multiple placeholders, since we're no longer
tied to unique IDs.

examples/ajax/index.html

@@ -128,7 +128,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Example of loading data dynamically with AJAX. Percentage change in GDP (source: <a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&init=1&plugin=1&language=en&pcode=tsieb020">Eurostat</a>). Click the buttons below:</p>

examples/annotating/index.html

@@ -72,7 +72,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Flot has support for simple background decorations such as lines and rectangles. They can be useful for marking up certain areas. You can easily add any HTML you need with standard DOM manipulation, e.g. for labels. For drawing custom shapes there is also direct access to the canvas.</p>

examples/axes-interacting/index.html

@@ -78,7 +78,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>With multiple axes, you sometimes need to interact with them. A simple way to do this is to draw the plot, deduce the axis placements and insert a couple of divs on top to catch events.</p>

examples/axes-multiple/index.html

@@ -58,7 +58,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Multiple axis support showing the raw oil price in US $/barrel of crude oil vs. the exchange rate from US $ to €.</p>

examples/axes-time-zones/index.html

@@ -91,17 +91,17 @@
 
 		<h3>UTC</h3>
 		<div class="demo-container" style="height: 300px;">
-			<div id="placeholderUTC"></div>
+			<div id="placeholderUTC" class="demo-placeholder"></div>
 		</div>
 
 		<h3>Browser</h3>
 		<div class="demo-container" style="height: 300px;">
-			<div id="placeholderLocal"></div>
+			<div id="placeholderLocal" class="demo-placeholder"></div>
 		</div>
 
 		<h3>Chicago</h3>
 		<div class="demo-container" style="height: 300px;">
-			<div id="placeholderChicago"></div>
+			<div id="placeholderChicago" class="demo-placeholder"></div>
 		</div>
 
 	</div>

examples/axes-time/index.html

@@ -107,7 +107,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Monthly mean atmospheric CO<sub>2</sub> in PPM at Mauna Loa, Hawaii (source: <a href="http://www.esrl.noaa.gov/gmd/ccgg/trends/">NOAA/ESRL</a>).</p>

examples/basic-options/index.html

@@ -74,7 +74,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>There are plenty of options you can set to control the precise looks of your plot. You can control the ticks on the axes, the legend, the graph type, etc.</p>

examples/basic-usage/index.html

@@ -40,7 +40,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>You don't have to do much to get an attractive plot.  Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.</p>

examples/categories/index.html

@@ -44,7 +44,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>With the categories plugin you can plot categories/textual data easily.</p>

examples/examples.css

@@ -85,7 +85,7 @@ input[type=checkbox] {
 	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
 }
 
-#placeholder, #overview {
+.demo-placeholder {
 	width: 100%;
 	height: 100%;
 	font-size: 14px;

examples/image/index.html

@@ -50,7 +50,7 @@
 	<div id="content">
 
 		<div class="demo-container" style="width:600px;height:600px;">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>The Cat's Eye Nebula (<a href="http://hubblesite.org/gallery/album/nebula/pr2004027a/">picture from Hubble</a>).</p>

examples/interacting/index.html

@@ -105,7 +105,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p>

examples/navigate/index.html

@@ -134,7 +134,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p class="message"></p>

examples/percentiles/index.html

@@ -62,7 +62,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Height in centimeters of individuals from the US (2003-2006) as function of age in years (source: <a href="http://www.cdc.gov/nchs/data/nhsr/nhsr010.pdf">CDC</a>). The 15%-85%, 25%-75% and 50% percentiles are indicated.</p>

examples/realtime/index.html

@@ -105,7 +105,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>

examples/resize/index.html

@@ -57,7 +57,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p class="message"></p>

examples/selection/index.html

@@ -111,7 +111,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>

examples/series-errorbars/index.html

@@ -135,7 +135,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>With the errorbars plugin you can plot error bars to show standard deviation and other useful statistical properties.</p>

examples/series-pie/index.html

@@ -689,7 +689,7 @@
 
 		<h3 id="title"></h3>
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 			<div id="menu">
 				<button id="example-1">Default Options</button>
 				<button id="example-2">Without Legend</button>

examples/series-toggle/index.html

@@ -103,7 +103,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder" style="float:left; width:725px;"></div>
+			<div id="placeholder" class="demo-placeholder" style="float:left; width:725px;"></div>
 			<p id="choices" style="float:right; width:135px;"></p>
 		</div>
 

examples/series-types/index.html

@@ -75,7 +75,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.</p>

examples/stacking/index.html

@@ -81,7 +81,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>With the stack plugin, you can have Flot stack the series. This is useful if you wish to display both a total and the constituents it is made of. The only requirement is that you provide the input sorted on x.</p>

examples/symbols/index.html

@@ -61,7 +61,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>Points can be marked in several ways, with circles being the built-in default. For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.</p>

examples/threshold/index.html

@@ -55,7 +55,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>With the threshold plugin, you can apply a specific color to the part of a data series below a threshold. This is can be useful for highlighting negative values, e.g. when displaying net results or what's in stock.</p>

examples/tracking/index.html

@@ -116,7 +116,7 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<p>You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.</p>

examples/visitors/index.html

@@ -125,11 +125,11 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder"></div>
+			<div id="placeholder" class="demo-placeholder"></div>
 		</div>
 
 		<div class="demo-container" style="height:150px;">
-			<div id="overview"></div>
+			<div id="overview" class="demo-placeholder"></div>
 		</div>
 
 		<p>This plot shows visitors per day to the Flot homepage, with weekends colored.</p>

examples/zooming/index.html

@@ -128,8 +128,8 @@
 	<div id="content">
 
 		<div class="demo-container">
-			<div id="placeholder" style="float:left; width:700px;"></div>
-			<div id="overview" style="float:right;width:160px; height:125px;"></div>
+			<div id="placeholder" class="demo-placeholder" style="float:left; width:700px;"></div>
+			<div id="overview" class="demo-placeholder" style="float:right;width:160px; height:125px;"></div>
 		</div>
 
 		<p>Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.</p>