<<pre lang="xml">!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> var NumOfRow=1; var mainDiv; var newButton; function AddNewItems() { var container = document.getElementById ("msgPanel"); //var message = "The height with padding: " + container.clientHeight + "px.\n"; var message = "The height with padding and border: " + container.offsetHeight + "px.\n"; alert(message); NumOfRow++; mainDiv =document.getElementById('msgPanel'); newButton=document.createElement('input'); newButton.type='button'; newButton.value='NewButton'; newButton.id='btn'+NumOfRow; mainDiv.appendChild(newButton); } function getParentDivHeight() { alert("entered inside"); var container = document.getElementById ("msgPanel"); var message = "The height with padding and border onClick event: " + container.offsetHeight + "px.\n"; var strheight = container.offsetHeight; alert("The DIV height in Pixel is : " + strheight +"px"); } function RemoveNewItems() { if(NumOfRow > 1) { var container = document.getElementById ("msgPanel"); var message = "The height with padding and border onClick event: " + container.offsetHeight + "px.\n"; alert(message); mainDiv.removeChild(newButton); alert("button Removed so the DIV height will be decreased"); } else { alert("Please add a Dynamic Button"); } } //--> </script> <style> body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; } .info, .success, .warning, .error, .validation { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; } .info { color: #00529B; background-color: #BDE5F8; height: 460px; width: 200px; background-image: url('info.png'); } .success { color: #4F8A10; background-color: #DFF2BF; background-image:url('success.png'); } .warning { color: #9F6000; background-color: #FEEFB3; background-image: url('warning.png'); } .error { color: #D8000C; background-color: #FFBABA; background-image: url('error.png'); } </style> </HEAD> <BODY> <div class="info" id="msgPanel" önresize="getParentDivHeight()" >Info message <div class="success">Successful operation message</div> <div class="warning">Warning message</div> <div class="error">Error message</div> <div id="Container1" > </div> </div> <input type="submit" id="btnSubmit" value="AddButton" onclick="AddNewItems()" /> </br> </br> <input type="button" id="btnSubmit1" value="RemoveButton" onclick="RemoveNewItems()" /> </br> </br> <input type="button" id="btnSubmit2" value="ShowDIVHeight" onclick="getParentDivHeight()" /> </BODY> </HTML>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)