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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic placement in an onResize event 1

Status
Not open for further replies.
Xeo

Xeo

Programmer
Jul 24, 2004
5
0
0
BE
Hello,
I'm currently creating a new layout for my website and decided to use a DHTML menu. Because my layout is centered on a page, I had to make the StartLeft variable relative to the user's own resolution & browser. This is what I did:

StartLeft = document.body.clientWidth/2 -280

All fine, I open my site and its good. The problem is now, when the browser is resized, the placement stays there.
Is there any way to use an onResize event to correct the placement? Maybe unload the script and reload it?

All help is welcome :)

The site I'm talking about:
The script I'm talking about:
 
Sort by date Sort by votes
well, i dont know about any onresize event, but u can track the change of the browser's size using a timer.

setInterval("SeeIfChanged()",1000)
origHeight=document.body.clientHeight
function SeeIfChanged()
{
if(origHeight!=document.body.clientHeight)
{
alert("Changed")
origHeight=document.body.clientHeight
}
}

the above function checks for change in height...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Thanks for your reply, I hadnt thought about that yet.
Would anyone have an idea how I could replace the menu though?
 
Upvote 0 Downvote
Nevermind, I found the sollution now. Thanks a lot mate!
 
Upvote 0 Downvote
Hmmm, I seem to have bumped into another problem now.
It works fine in Internet Explorer but for some strange reason Mozilla seems to remember the var and it keeps on refreshing...

Is there a way to make a var temporary? I already thought of a this.myVar sortof thing but it doesnt work at all then...
(sorry if my questions are rather noobish, I'm just beginning with JS ^^;)

This is the current "checker-script":
Code: 
setInterval("ReCheck()",10000)
var origWidth = document.body.clientWidth;
function ReCheck()
{
if( document.body.clientWidth != origWidth){
document.location = document.location.href;
origWidth = document.body.clientWidth;
}
}
 
Upvote 0 Downvote
>>document.body.clientWidth
i think that is IE specific. i dont know what is for mozilla...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
You can use the onResize event to re-centre your page, by adding it into the opening body tag for the page, and set it to call a function that re-centres the page.

eg.

Code: 
<body onResize="centrePage()">

This I think is easier than setting a timer to check.

According to a book I have "document.body.clientWidth" is compatible with WinIE4+, MacIE4+, NN7, Moz1+ and Safari1+

Hope this helps.
John

PS. like the site
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
133
Rayj0000
Rayj0000
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
265
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
79
Daniel K
Daniel K
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
69
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top