ByRei - dynDiv


Simple dynamic Divs by Markus Bordihn

Simple only resizeable Div with an image and without an image

This example show the resize Feature, you have 4 red boxes wheren you can resize the Div with text or the Div with an Image.

This is a Test Div with ByRei DynDiv, resize it ;)

HTML Code

<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
[Custom or additional CSS Code]

<div id="testdiv_1">
 <p style="padding: 10px;">This is a Test Div with ByRei DynDiv, resize it ;)</p>
 <div class="dynDiv_resizeDiv_tl"></div>
 <div class="dynDiv_resizeDiv_tr"></div>
 <div class="dynDiv_resizeDiv_bl"></div>
 <div class="dynDiv_resizeDiv_br"></div>
</div>
<div id="testdiv_2">
 <img src="../example.jpg" width="100%" height="100%" alt="">
 <div class="dynDiv_resizeDiv_tl"></div>
 <div class="dynDiv_resizeDiv_tr"></div>
 <div class="dynDiv_resizeDiv_bl"></div>
 <div class="dynDiv_resizeDiv_br"></div>
</div>
     

Additional CSS Code

#testdiv_1 {
 width: 150px;
 height: 150px;
 background: #ccc;
 border: 1px solid #aaa;
 top: 300px;
 left: 350px;
 position: absolute;
 overflow: hidden;
}

#testdiv_2 {
 width: 295px;
 height: 394px;
 right: 10px;
 top: 160px;
 border: 1px solid #aaa;
 position: absolute;
 overflow: hidden;
}
     

Valid HTML 4.01 Strict