Jump to content
AlexC

Resizing a frame when window is resized

Recommended Posts

I am using <iframe> to create a scrollable area in the remaining space in a window. I have a small java script to calculate the size of the frame and that works fine. If I resize the window and then force a refresh everything works no problem. To avoid confusion for the user by having two scroll bars if the window is resized I then thought of using the onresizeend event to trigger a script to do the reload. So far no success. The function I have created is,

function resizeframe {document.location.reload("true");}

I don't know whether the function is wrong or I have not placed the trigger in the correct place. I have tried the trigger on the <div> for the <iframe> creation and then successively higher until placing in the <body> - all with no result. I have also tried adding a 'contenteditable' attribute to the <iframe> <div> with no result. Any pointers would be appreciated.

Share this post


Link to post
Share on other sites

Don't forget the parentheses when defining a function:

function resizeframe () { // etc

But I really don't recommend this strategy. A resize event might get fired before your user releases the mouse button, and that would cause really annoying behavior. Depending on the way your function works that initially sizes the frame, you might want to execute that when the resize event fires.

Share this post


Link to post
Share on other sites

Thanks for the reply - been out for a few days, hence the delay in trying it. However parentheses have not made a difference. I also imported the relevant lines of one of the W3Schools' code examples for resizing into my page, as below, but that doesn't produce any results either, so there must be something basic I'm missing. I'm currently in IE10 on Windows 8, but I've also tried it in Firefox and Chrome.

<!DOCTYPE html><html><head><script>function showMsg(){alert("You have changed the size of the browser window!");}</script></head><body onresize="showMsg()"><p>Try to resize the browser window.</p></body></html>

Share this post


Link to post
Share on other sites

It works for me in FF, but the alert creates really annoying behavior. It might be the source of your problem. Also, my inclination is to attach the event handler to the window, not the body. Try experimenting with this.

<!DOCTYPE html>  <html>    <head>	  <script>	    function showMsg()	    {		  document.getElementById("mytxt").innerHTML = window.innerHeight;	    }	    window.onresize = showMsg;	  </script>    </head>    <body>	  <p id="mytxt"></p>    </body></html>

Note that innerHeight is not available to IE before version 9. It sounds like you have code that handles that.

Share this post


Link to post
Share on other sites

Many thanks for your help. I'm now getting a response to the resize event, although a resizeend event doesn't seem to work but that isn't a serious limitation. However I'm not getting the overall result I wanted, but I think I know why - I need to significantly extend my scripting but having just started on scripting, PHP, CSS, etc. I need to get more familiar with all those I think before returning to this.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...