Preserved Topic: Can I make this smoother? (Page 1 of 1)

OK first up I'm not a code monkey. Script came from http://www.dhtmlnirvana.com/alchemy/ and I modified it (if you can call it that) to make my layer center vertically on resize likes Doc's Page. Page is just getting started so all that is here is the general look and feel . On my 56k connection it flickers badly on resize of window. This may not be a big deal but I don't like it. Is there any way to do it better or is it just the img size and loading time that is causing it. Tell me how it works on a broadband connection and other browsers than IE 5.5.

Next step I want the mountains to pan left and right on horizontal mouse movments whle the logo floats over it.

Any Ideas. I'll turn on the scroll so you can see the entire mountain image I wan't to pan.
www.finlinson.com/design

Instead of reloading whole page (which is very inefficient and slow since browser has to load all images again) on browser resize event (onresize="history.go(0)"), you should just move your layers to new location when that event fires...

I thought there was probably something that could be done different I may just toss this script out and try with Doc's code here http://www.ozoneasylum.com/Forum2/HTML/001446.html

I need it only reposition center vertically not horizotally

Do you have any idea how best to start pan the mountain range across the screen on hortizontal mouse move ment. It doesn't have to move mov at teh speed of the mouse actually would be better if it move some what slower and smoothly. I may actually want the layer to center horizontally then. I just don't until I can sucessfully make my logo transparent over it.

Quarath,

Here's an example I did for Cprompt on how to vertically center stuff:
http://www.bugimus.com/gurus/cprompt/centerit.html

Here is a site I did that repositions everything *without* reloading the page each time which is what I think you're after:
http://www.stephenulangca.com/

P.S. That link to Doc's code should have had everything you needed to understand it. If you're looking to understand, then I'm sure we're more than happy to help.



[This message has been edited by Bugimus (edited 03-18-2002).]

Bugimus -

Everytime I see that http://www.stephenulangca.com/ site, I'm in awe.....that is some damn nice work.

Thanks very much, Pugz

Bugimus that was exactly what i needed. At some point in order to have the Mountain range scroll I may need it center horzontilly as well. What would I need to add to this to make that happen. It also looks like your good at moving layers on events. I would like to have the mountain range Pan left-right on horizontal mouse movements. I have been going through code like crazy latley and make sense of some of it but other parts just make my head hurt. Do you have a simple script fo moving layers. I am not very good at pickihg specific sections code out of a huge page like the one you listed above and seperating what section is doing what.
www.finlinson.com/design is smoth as silk now thanks.

I almost had Doc's code working. It would move with resize but it would not center it was stuck to the bottom of the page. I'm not sure what was wrong but it was easier for me to read and convert values from your code to match what I was doing. Partly because yours only had 1 direction vertical.



[This message has been edited by Quarath (edited 03-19-2002).]

[edit]I fixed the url from finlinson/com to finlinson.com[/edit]

[This message has been edited by Bugimus (edited 03-20-2002).]

I've got several example right here: http://www.bugimus.com/gurus/index.html

I just added one that centers both horizontally and vertically. I also have code there that moves divs based on mouse click events and mousemove events.

Thanks I just tried editing your's so that CenterDiv would align Vertically and a div named copyright nested in CenterDiv will center horizontally. I have the calls commented out becasue only one or the other seems to work.

Maybe you can see what I am missing. It's probably something stupid since I am not an expert on the syntax.

<html>
<head>
<title>Finlinson Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equip="Page-Enter" CONTENT="RevealTrans(Duration=5, Transition=12)">
<script language="JavaScript">
<!--
IE5=NN4=NN6=false
if(document.all)IE5=true
else if(document.layers)NN4=true
else if(document.getElementById)NN6=true

onload=initializeV // call initialize() when page loads
//--onload=initializeH //--ADDED TO MAKE HORIZONTAL CENTERING POSSIBLE DOES NOT WORK
onresize=rePosV // call rePosV() whenever page is resized
//--onresize=rePosH //--ADDED TO MAKE HORIZONTAL CENTERING POSSIBLE DOES NOT WORK

function initializeV() {
if(IE5&#0124; &#0124;NN6) myObj=document.getElementById("centerDiv").style
else if(NN4) myObj=document.centerDiv
rePosV()

}
//--ADDED TO MAKE HORIZONTAL CENTERING POSSIBLE DOES NOT WORK
function initializeH() {
if(IE5&#0124; &#0124;NN6) myObj2=document.getElementById("credits").style
else if(NN4) myObj2=document.credits
rePosH()

}

h=340 // height of the div to keep centered
function rePosV() {
// compute center Vertical coordinate
if(IE5) yc=Math.round((document.body.clientHeight/2)-(h/2))
else if(NN4&#0124; &#0124;NN6) yc=Math.round((window.innerHeight/2)-(h/2))
// reposition div
if(IE5&#0124; &#0124;NN6) myObj.top = yc + "px"
else if(this.NN4) myObj.moveTo(0,yc)
}

//--ADDED TO MAKE HORIZONTAL CENTERING POSSIBLE DOES NOT WORK
w=200 // width of div to keep centered
function rePosH() {
// compute center Horizontal coordinate
if(IE5) yc=Math.round((document.body.clientWidth/2)-(w/2))
else if(NN4&#0124; &#0124;NN6) yc=Math.round((window.innerWidth/2)-(w/2))
// reposition div
if(IE5&#0124; &#0124;NN6) myObj2.left = yc + "px"
else if(this.NN4) myObj2.moveTo(yc, 0)
}
-->
</script>
<style type="text/css">
body { background-color: #053BA0; margin: 0px }
a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #00CCFF; text-decoration: none}
#centerDiv { position:absolute; left:0px; top:0px; width: 1408; height: 340px; z-index: 7;visibility: visible }
#mtn { position:absolute; left:0px; top:0px; width: 1408; height: 340px; z-index: 6; visibility: visible; background-image: url(images/mtn.jpg); layer-background-image: url(images/mtn.jpg); background-repeat: repeat-x; border: 0px none #000000 }
#menu { position:absolute; left:550px; top:0px; width:400px; height:10px; z-index: 7; visibility: visible; }
#credits { position:absolute; left:375px; top:320px; width:400px; height:10px; z-index: 7; visibility: visible; }
#text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #00CCFF; text-decoration: none}

</style>
</head>
<body scroll="no">
<a name="dummy"></a>
<div id="CenterDiv" style="">
<div id="menu" >
<span id="text">
<a href="#dummy">Play</a>

You can assign only one function to events (onload, onresize, etc.) That's why when you uncomment the second onload / onsize line override previous line. You have to combine them like this:

onload = function () { initializeV(); initializeH(); }
onresize = function () { rePosV(); rePosH(); }

Thanks Max i actually thought that might be the case and tried to combine them but did not know the syntax to combine calls and did not do it right.