Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onResize causing 3 events 1

Status
Not open for further replies.
CliveC

CliveC

Programmer
Nov 21, 2001
1,222
US
I am working on a liquid design project and was hoping to use the onResize event to trigger the resizing of text and images.

However, it seems that the onResize triggers 3 events instead of 1. Any Ideas?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>onResize problem<title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head><body onResize="alert('resized')">
</body></html>

Clive
 
Sort by date Sort by votes

A very interesting problem, this one!. I found several references to it on other forums, but the answers had long been deleted.

How many times onresize is called is affected by:

- The DOCTYPE, and
- Whether you have "Show window contents while dragging" enabled in Windows or not.

The following solution, while not elegant, sorts this out in IE6, FF1, NN7, and Opera7 - regardless of DOCTYPE or drag settings:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var b = h = null;
		var oldData = '';
		var resizeCount = 0;

		onload = function() {
			h = document.getElementsByTagName('html')[0];
			b = document.getElementsByTagName('body')[0];
		}

		onresize = function() {
			var tempData = h.offsetHeight + ' ' + h.scrollHeight + ' ' + h.clientHeight + ' ' + b.offsetHeight + ' ' + b.scrollHeight + ' ' + b.clientHeight;
			if (oldData != tempData) {
				oldData = tempData;
				window.status = 'Resize called ' + (++resizeCount) + ' times';
			}
		};
	//-->
	</script>
</head>
<body></body>
</html>

If you comment out the "if" statement, you'll see in IE that the function gets called many times per 1-pixel resize. If you put it back in, you'll see it only gets called once. Of course, FF and NN do not call it until the resize has finished - presumably due to internal coding differences / different interpretation of how onresize should work.

Hope this helps,
Dan

 
Upvote 0 Downvote
Hi Dan,

Thank you for your thoughtfull solution. It works great when clicking the maximize or minimize button only.

Unfortunately, the resize event is also triggered by dragging the bottom right corner of the window. Also the event gets triggered by the algorithmn that I use to resize the text and the images, so I go into an endless loop.

It would be nice if there were an onMaximize event.

I am thinking of abandoning this event and launching a pop-up from the main window that opens to the maximum size and then if it is greater than 800*600, display the larger of the two text and images sizes.

Any better ideas welcomed.

Clive
 
Upvote 0 Downvote

Unfortunately, the resize event is also triggered by dragging the bottom right corner of the window
Click to expand...

Why unfortunate? I would have thought this perfectly acceptable.

the event gets triggered by the algorithmn that I use to resize the text and the images, so I go into an endless loop.
Click to expand...

Why would the onresize event get called unless you were resizing the window? I'm not sure I understand why this is the case. If you fancy trying to avoid it, post the code and we'll have a butchers.

Incidentally, the reason I chose to use both the html and body elements with all 3 properties, is that different browsers change different properties of each, depending on DOCTYPE and browser (Opera more specifically!)... Oh for consistency ;o)

Dan

 
Upvote 0 Downvote
What I mean by unfortunate is that it causes multiple resize events as it is dragged (at least in IE6 with proper doctype).

The resize event is triggered if I increase the size of an image (without changing the window size).

This shows some promise by freezing the resize to 1 event:

Code: 
<body onResize="window.location.href =  window.location.href">

Clive
 
Upvote 0 Downvote
What I a trying to do is to resize as in this example but without the buttons. I still want the user to be able to choose to resize from the view/textsize menu option.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Smaller / L a r g e r</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="[URL unfurl="true"]http://tubularity.com/resize/"[/URL] />
<style>
body  {background:green; text-align:center}
a     {margin: 2px 5px 2px 5px; padding: 2px;
       color: black; background: #cccccc;
       font: normal 12px Arial;
       text-align: center; text-decoration: none;
       border-top:    2px solid #cccccc;
       border-bottom: 2px solid black;
       border-left:   2px solid #cccccc;
       border-right:  2px solid black;}
a:hover     {background: #eeeeee;}
div#text    {border: 1px solid black; background:white; padding:2%}
img#monitor {width:12em}
</style>

<script type="text/javascript">
function ResizeDiv(val) {
rdiv = document.getElementById('text')
rdiv.style.fontSize=(parseFloat(rdiv.style.fontSize)+val)+"em"}
</script>

</head><body>
<a href="#" onclick="ResizeDiv(-0.2); return false">&nbsp;Smaller </a>
&nbsp;<a href="#" onclick="ResizeDiv(0.2); return false"> Larger </a>
<br /><br />
<div id="text" style="font-size:1.00em; width:15em">
 <div align="center">
 <img id="monitor" src="monitor.jpg" alt="" /><br /><br /></div>
Yes! You can resize text and images.
</div></body></html>

Clive
 
Upvote 0 Downvote

Interesting - the onresize event is being called when you resize the font of a DIV on the page.

If you make that DIV absolutely positioned, however, this no longer happens.

I suspect that when content within the document flow is changed in height / width, the onresize event is called, for whatever reason - even if the window size does not change.

Hope this helps,
Dan

 
Upvote 0 Downvote
I think I have got it. I had to live with the multiple events but maybe I will think of another way to freexe it at 1.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Smaller / L a r g e r</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="[URL unfurl="true"]http://tubularity.com/resize/"[/URL] />
<style>
body        {background:green}
div#text    {border: 1px solid black; background:white; 
             width:15em; padding:2%}
img#monitor {width:12em}
</style>

<script type="text/javascript">
function adjustSize() {
    var h=0; 
    var w=0; 
    w = document.getElementsByTagName('html')[0].clientWidth;
    h = document.getElementsByTagName('html')[0].clientHeight;
    if(w==0){         
        w = window.innerWidth; 
        h = window.innerHeight; 
    }
    if(w==0){           
        w = window.outerWidth; 
        h = window.outerHeight; 
    }
    if(w==0){
        w = document.body.clientWidth; 
        h = document.body.clientHeight; 
    }
//alert(w+" "+h)

rdiv = document.getElementById('text')
if (w < 800){
//   alert('less than 800');
   rdiv.style.fontSize="1.0em";
}else if
   (w < 900){
//   alert('less than 900');
   rdiv.style.fontSize="1.2em";
}else if
   (w < 1000){
//   alert('less than 1000');
   rdiv.style.fontSize="1.4em";
}else{
//   alert('greater than 1000');
   rdiv.style.fontSize="1.6em";  
}
}
</script>
</head><body onresize="adjustSize()">
<div align="center">
<br /><br />
<div id="text">
<img id="monitor" src="monitor.jpg" alt="" /><br /><br />
Yes! You can resize text and images.
</div></div></body></html>




Clive
 
Upvote 0 Downvote
I am happy with this solution. I have tested it IE6 and Firefox. I would really appreciate it if someone would test it in safari and other browsers.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Smaller / L a r g e r</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="[URL unfurl="true"]http://tubularity.com/resize/"[/URL] />
<style>
body        {background:green}
div#text    {border: 2px solid black; background:white; 
             width:18em; padding:2%}
img#monitor {width:16em}
</style>
<script type="text/javascript">
function adjustSize() {
 var w=0;  
 w = document.getElementsByTagName('html')[0].clientWidth;
 if(w==0){w = window.innerWidth}
 if(w==0){w = window.outerWidth}
 if(w==0){w = document.body.clientWidth}
 rdiv = document.getElementById('text')
 if (w < 800){
   rdiv.style.fontSize="1.0em";
 }else if
   (w < 900){
   rdiv.style.fontSize="1.2em";
 }else if
   (w < 1000){
   rdiv.style.fontSize="1.4em";
 }else{
   rdiv.style.fontSize="1.6em";  
 }
}
</script>
</head><body onresize="adjustSize()">
<div align="center"><br /><br />
<div id="text">
<img id="monitor" src="monitor.jpg" alt="" /><br /><br />
Yes! You can resize text and images.
</div></div></body></html>

Clive
 
Upvote 0 Downvote

It works fine in IE 6, FF 1, NN 7, Opera 7, and Safari 1.2 (Mac OS X).

In IE 5.2 (Mac OS X) it gets bigger but doesn't seem to get smaller again. I would not be worried about this too much, as most Mac OS X users steer well clear of IE.

In Safari, while it worked, the difference in text size was only noticable at the largest window size... although that may have been the font settings on the Mac - I'm not too sure about this.

Dan



Hope this helps!

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
392
Daniel K
Daniel K
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
437
feherke
feherke
tshad
  • Locked
  • Question
Blur events going to two textboxes
Replies
2
Views
246
tshad
tshad
1DMF
  • Locked
  • Question
getting return values from load events or waiting till finished
Replies
10
Views
908
jpadie
jpadie
maharg
  • Locked
  • Question
clientX events not working in FF 1
Replies
2
Views
156
maharg
maharg

Part and Inventory Search

Sponsor

Back
Top