Click here to Skip to main content
13,001,454 members (58,035 online)
Rate this:
 
Please Sign up or sign in to vote.
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..

<<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 30-Jan-13 21:29pm
Vignesh.J1.1K
Updated 30-Jan-13 22:01pm
v2

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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[^]
  Permalink  

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.170624.1 | Last Updated 31 Jan 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100