Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
how to register or add-listener for event of div.onresize for major browsers (IE, firefox and google)? Onresize event in div tag is not working in IE,Chrome etc..

HTML
<<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>
Posted
Updated 30-Jan-13 22:01pm
v2

1 solution

Element resizing events are not well supported by browsers, so you would be better off using the window resize event.

Take a look at the QuirksMode compatibility chart: http://www.quirksmode.org/dom/events/resize.html[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900