...

View Full Version : DIV onResize FF



BubikolRamios
02-03-2007, 11:40 AM
there is the peace of code


<div id="header" style = "Height:100px" onResize = "alert('a')">
header
<INPUT TYPE="BUTTON" VALUE="click"
ONCLICK="this.parentNode.style.height = '300px';" >
</div>


it resizes on click, but onResize doesn't get fired on FF, works on IE ok.
wierd coz body.onResize works ok on both ?

link to test page:

http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp


Thanks for tips.

chump2877
02-03-2007, 11:53 AM
I think you should read this: http://www.w3schools.com/jsref/jsref_onresize.asp.

"The onresize event occurs when a window or frame is resized."

Ask yourself: Are you resizing the window or a frame?

BubikolRamios
02-03-2007, 01:52 PM
quote from link given:



Supported by the following HTML tags:

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

window


how can I interprete this ?

Should <DIV onResize = " ...... work or not ?

Works on IE , so ?

chump2877
02-03-2007, 02:24 PM
:eek: Forgive me if I am stating the obvious, but you are resizing a DIV, not the entire window or a frame...So the onresize event will not fire...

you can use the onresize event in virtaully any HTML tag, but it will only fire when the window or a frame is resized.

BubikolRamios
02-03-2007, 03:25 PM
ok, thanks for explanation of the obvious that was not so obvios (-: to me
especialy when I was looking at IE which works regardles of this rull, as you can see on test page.

Anyway, lets say that I have DIV, button on it, and on click button reproduces itself into its clone --> div gets resized.
Is there a way to catch that resize ? leaving out the obvious--> doing something right after adding another button.

Regards.

chump2877
02-03-2007, 03:57 PM
you're using an IE-only application of onresize: http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onresize.asp

That's JScript, not JavaScript (IE's proprietary version of JS)....But that is why your application of onresize works in IE...

Is this what you are after (I had trouble understanding your last post)? This generates an alert message after the div is resized, in both browsers:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<script type="text/javascript">

function doit()
{
if (document.getElementById('header').style.height != '300px')
{
document.getElementById('header').style.height = '300px';
alert('aaaaaaaa')
}
}

</script>

</head>

<body>

<div id="header" style="height:100px;background-color:blue;">
<p>header <input type="button" value="click" onclick="doit();" /></p>
</div>

</body>

</html>

BubikolRamios
02-03-2007, 08:03 PM
Created a sample to explain myself. Click on button(many times). Extensible div gets filled with buttons. At one point gets resized as defined by normal flow. I would somehow like to catch that event.
This is just a sample , in real case there are inner div-that gets expanded, .....

http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp

again: works with JScript, but would like to have something cross browser.

Regards

chump2877
02-03-2007, 09:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style type="text/css">
<!--

input, p
{
margin:0;
}

input
{
width:40px;
}

-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

</head>

<body>

<div id="header" style="width:200px;background-color:blue;">
<p><span>header <input type="button" id="button" value="click" onclick="doit();" /></span></p>
</div>

<script type="text/javascript">
<!--

var num = 0;

function doit()
{
var divObj = document.getElementById('header');
var inputObj = document.getElementById('button');
var newInput = inputObj.cloneNode(true);

if (divObj.getElementsByTagName("span")[num].offsetWidth <= 200 - 40)
{
divObj.getElementsByTagName("span")[num].appendChild(newInput);
}
else
{
num++;
alert('aaaaaaaa');
var newLine = document.createElement("p");
var newSpan = document.createElement("span");
newSpan.appendChild(newInput);
newLine.appendChild(newSpan);
divObj.appendChild(newLine);
}
}

-->
</script>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum