Display Content Example
WinDiv also support display Content from the Webpage.
When you want to used the feature you musst simple create a div and put a <a name="archorname"></a> inside.
WinDiv will automatic hide the DIV when the page loades, this makes sure that user with No JavaScript can see the content as well.
So please dont put a display: none; to this div !
To display the content simple make a link like <a href="#ankername"> Show Content 1 </a> and the Content will be displayed.
When the content is bigger as the winDiv Window there will be automatic adds scrollbars.
You can also used ...ByRei_winDiv.close();"... for close the winDiv over an User Interaction like the Login Box from the Ajax Example.
Display Content 1 - Text Display Content 2 - Image Display Content 3 - HTML Display Content 4 - Misc Content Test W3C Validation:
HTML Code
<script type="text/javascript" src="byrei_windiv-0.8.js"></script>
...
<i> Files like Text, HTML and URLs : </i><br>
<a href="#content1" class="winDiv winDiv_height-150 winDiv_width-300"> Display Content 1 - Text </a><br>
<a href="#content2" class="winDiv"> Display Content 2 - Image </a><br>
<a href="#content3" class="winDiv"> Display Content 3 - HTML </a><br>
<a href="#content4" class="winDiv"> Display Content 4 - Misc Content </a><br>
...
Contents HTML Code
<div>
<a name="content1"></a>
<h2> Content 1 </h2>
<p>
This is Content 1 with a simple Text and no other thinks.<br>
<br>
</p>
<p onclick="ByRei_winDiv.close();" style="border: 1px solid red;"> Click me to close ME ;) </p>
</div>
<div>
<a name="content2"></a>
<h2> Content 2 </h2>
<p>
This is Content 2 with some Images.<br>
<br>
<img src="...elsch-001.jpg" width="99" height="130" alt="">
<img src="...elsch-002.jpg" width="99" height="130" alt="">
<img src="...elsch-003.jpg" width="130" height="99" alt=""><br>
<img src="...elsch-004.jpg" width="130" height="109" alt="">
<img src="...elsch-005.jpg" width="99" height="130" alt="">
<img src="...elsch-006.jpg" width="81" height="130" alt=""><br>
</p>
</div>
<div>
<a name="content3"></a>
<h2> Content 3 </h2>
<p>
This is Content 3 with some HTML.<br>
<br>
...
</p>
</div>
<div style="text-align: left; padding: 50px;">
<a name="content4"></a>
<form action="">
<h2> Content 4 </h2>
<p>
This is Content 4 with misc Content.<br>
<img src="...elsch-004.jpg" alt="">
<br>
Name: <input name="" type="text" value=""><br>
<br>
<input type="submit" onclick="ByRei_winDiv.close();"><input type="reset" onclick="ByRei_winDiv.close();">
</p>
</form>
</div>
