Preserved Topic: Layer Question (Page 1 of 1)

Is there a way to have a layer show from "hide/show" in the middle of the browser window and have it follow the window on resize???

I have few layers as "links" but the problem is when I show them they stay in the same spot when I resize my browser which causes scrollbar madness!!!!!!! The whole desing is nice and liquid and works great with Netscape (pppfffuuu) but those damn layers just mess it all up. They stay on the same spot!!!!!!!!1

How can I make them "follow"

Anyone? Hello?

See... and then you ask me why I post everything in Ozones forum...

Damn dude you gotta give me more than 3hrs to respond. I had to go to the grocery store, we had no food!

Anyway. . .

Do you mean to keep them centered vertically? If so then check out this topic. It will help you out with that.

Can you give me a link to a page to see?



Later,
C:\


~Binary is best~

hehehe sorry... I am impatient..

here is the link www.studiosone.com/layers

click on the link and you see what I am talking about... it looks good at 1280 by 1024 full screen but when you resize everything goes haywire...

Hmm, I do stuff like this all the time now, it sounds like you need a simplified version of what I'm using on my front page right now. From what I can see, you'd probably want the width of the window (or the top/left corner) to be adjusted automatically as the window resizes, or at least at the "onresize" event. Let's see if I could hack you up a quick script for this, hmm?

<script language="Javascript">
<--
// we'll start with a short version of the Zbrowse script,
// so we can get the width of the screen when needed.
function makeZbrowse() { this.id = "Zbrowse";}
makeZbrowse.prototype.width = function() {
return Zflag.IE?document.body.clientWidth:window.innerWidth;}
makeZbrowse.prototype.height = function() {
return Zflag.IE?document.body.clientHeight:window.innerHeight;}
Zbrowse = new makeZbrowse();

// then we need a function that fires "onresize"
onresize = moveWin;

// you'll probably have some values already?
whereWinTop = 200;
whereWinLeft = 200;
floatWindowWidth = 400;
floatWindowHeight = 200;

// the function itself...
function moveMe() {
// this will center a 400px wide floating <div> named "floatWin"
if (document.layers) {
document.floatWin.left = Math.round((Zbrowse.width()-floatWindowWidth)/2);
document.floatWin.top = Math.round((Zbrowse.height()-floatWindowHeight)/2);
}
if (document.getElementById ){
document.getElementById('floatWin').style.left = Math.round((Zbrowse.width()-floatWindowWidth)/2);
document.getElementById('floatWin').style.top = Math.round((Zbrowse.height()-floatWindowHeight)/2);
}
}
//-->
</script>

And that would center a 400x200 pixel window smack dab in the middle of the screen, and it would fix itself when the window resized. Opera doesn't do the onResize event, but you can check once after the page is loaded and set variables for the current height/width of the browser, and then compare it on a setInterval(), maybe every second or so. You can probably do bunches of other things with this, play around, have fun!

Your pal, -doc-

boy.. this is complicated...

I can't figure this darn thing out....

The layer size is 730 by 295.

Do I just copy this code in Doc? Sorry to sound stupid but I am lost with this.. I would really like to get this effect going. I like the idea of layers but this java thing is just way to advanced for me....

Yah, you should be able to just copy in this code, changing these two lines...

floatWindowWidth = 730;
floatWindowHeight = 295;

And these lines....

if (document.layers) {
document.floatWin.left = Math.round((Zbrowse.width()-floatWindowWidth)/2);
document.floatWin.top = Math.round((Zbrowse.height()-floatWindowHeight)/2);
}
if (document.getElementById ){
document.getElementById('floatWin').style.left = Math.round((Zbrowse.width()-floatWindowWidth)/2);
document.getElementById('floatWin').style.top = Math.round((Zbrowse.height()-floatWindowHeight)/2);
}

Which put the box dead center in the browser window. You may want to top to stay the same in which case you could just comment out the ..top lines, and the left definition "Math.round((Zbrowse.width()-floatWindowWidth)/2);" is the exact center. You may want it just off of the left edge? This would do that math...

Zbrowse.width()-floatWindowWidth - 16; // this would put it 16px off of the right side.

Plug it in, see what happens! You can't break anything too badly.

Your pal, -doc-

no go Doc

Maybe I should stay away from layers and do popups or chromless window or something like that....

look at the code, maybe I screwed it all up..
www.studiosone.com/layers

OK, you've got all these <div>'s, named things like "about" and "contact" etc... so you're going to need to center them all, or place them inside another <div> and center that one. Try just replacing "floatWin" with the names of one of your divs, and see if that one centers as it should. (Possibly also call the "moveMe()" script when you call the MM_showHideLayers() too.) I could give you a full script to do all of them at once, do you want me to do that, or do you want to try and tackle this yourself? (You're awfully close right now.)

Your pal, -doc-

Well.. let me play with it myself.. I would like to learn it and this would be a great experience for me...

I thought I would have to put them in nested layers.

Let me play with it and if I have any problems I will shoot you email cool???

:: m a x ::

You got it, no problem. I'd try just nesting all the divs in one main div first, and then centering that one. (all the others would then have the top and left set to '0').

Your pal, -doc-

Doc,

What do you change to make it adjust vertically only like you island image?

See this:

http://www.ozoneasylum.com/Forum2/HTML/001471.html