/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Recenter when body size changes

I want to recenter a layer when the size of the body changes. How do I detect when the body size changes?

to post a comment
JavaScript

13 Comments(s)

Copy linkTweet thisAlerts:
@0uTk4sTJan 03.2007 — Can't you use the function that changes the size to detect the original, then take action if the original has changed? Or you could even include something in that function that aligns the layer after it's been called.
Copy linkTweet thisAlerts:
@heirophantauthorJan 03.2007 — Unless I start a loop that checks every second if the body size changes, I can't think of a better way. Its a bit inefficient.
Copy linkTweet thisAlerts:
@ricpJan 03.2007 — use the onresize event from the window object.

<i>
</i>window.onresize = showMyDimensions;

function showMyDimensions() {
var dContainer = document.documentElement||document.body;
document.title = dContainer.clientWidth + "/" + dContainer.clientHeight
}

That will set the document title (in the titlebar) to show the size of the window when the window is resized.

There is a subtle difference between the way FF and IE handle this event. IE will continually fire to it while the window is being resized, FF on the other hand will only fire the event once the resize has stopped.

Either way, that's what you need.
Copy linkTweet thisAlerts:
@heirophantauthorJan 03.2007 — Can I use the onresize event handler in the body tag? I'd try, but I'm not at home.
Copy linkTweet thisAlerts:
@ricpJan 03.2007 — You can set it on the body tag via the onload event, but you can't go..

<body onresize=" .. ">

..because onresize is an event associated with the window and not the body.
Copy linkTweet thisAlerts:
@thechasboiJan 03.2007 — heirophant

The best way to handle an event tied to the window is to set it up like suggested, [CODE]<script language="JavaScript" type="text/javascript">
window.onresize=function () {/*do something */}
window.onunload=function () {/*do something*/}
window.onload=function () {/*do something*/}
</script>[/CODE]

I usually insert this after or at the bottom of the page insuring that the function you want to initiate at certain times is already parsed. I hope this helps further.
Copy linkTweet thisAlerts:
@felgallJan 03.2007 — If you define your content to be centred properly in the first place using CSS then resizing the window will recentre the content all by itself with no Javascript required.
Copy linkTweet thisAlerts:
@heirophantauthorJan 04.2007 — If you define your content to be centred properly in the first place using CSS then resizing the window will recentre the content all by itself with no Javascript required.[/QUOTE]
Not in my experience...you want to tell me how to do it properly where no javascript is required? Remember, this is a layer that has a higher z-index than the layer below it.

As a side note, the onresize event handler does work in the body tag.
Copy linkTweet thisAlerts:
@felgallJan 04.2007 — Since you are using z-index I assume that you have elements on the page that are being moved around using Javascript to start with since there is no need for z-index with static content. That being the case if you are moving things around with javascript then you need to realign them on resize using Javascript as well.
Copy linkTweet thisAlerts:
@heirophantauthorJan 04.2007 — Yes, that is exactly what I did. I even made an array to keep track of all the id's of layers that were open so that I could recenter any open layers. If the layer is hidden, it is removed from the array. Its pretty nice code. I will post it when I get home. So, this thread is now resolved. Thanks all for your help.
Copy linkTweet thisAlerts:
@duke_okcJan 26.2007 — You can set it on the body tag via the onload event, but you can't go..

<body onresize=" .. ">

..because onresize is an event associated with the window and not the body.[/QUOTE]

I am trying to use 'onresize' and came across this code snippet on a web site

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>No Resize Window</title>
<script language="JavaScript">
window.resizeTo(800,600);
window.moveTo(0, 0);

function NoResize(){
window.resizeTo(800,600);
}
</script>
</head>
<body onresize='NoResize();'>

</body>
</html>[/CODE]

It seems to be working..can anyone explain whats going on please?
Copy linkTweet thisAlerts:
@thechasboiJan 26.2007 — It seems that you are resizing the window manually 600x800 and moving it to the upper right corner of the screen. What I have done in the past is take the outer most div or table and set a style like this which will automatically center the element attached to in the center of the window vertically not horizontally. "style="margin:0px auto;"". I hope this is what you are looking for. My previous post assumed you were using javascript to do the centering. Hope this helps now or even in the future.
Copy linkTweet thisAlerts:
@duke_okcJan 26.2007 — Thanks for the reply. Sorry about the confusion. I should have explained it in my first post. I want to restrict the size of the window minimizing below 800X600px(user can maximize the size of the window as much as they want).

I do not want to disable the maximize button (that's how my client wants this to be). Instead, if the user tries to resize the window it would always set the window’s size back to 800X600. I was trying to use onresize event but it does not seem to work.
×

Success!

Help @heirophant spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...