find image location for css to use ??

[kevin_sauerwald]

ok I have some code that shakes my image.. but its using CSS that gives it a fixed starting point.. and then I have some js that then moves
it around..

/*<![CDATA[*/
body {
     background:#ffffff;
 }
#Logo1{
     position:absolute;
     left:300px;
     top:10px;
     background:#ffffff;
     //border:double 8px #000000;
 }

/*//]]>*/

function vibrate() {

var lleft,LPos,Done;
Done=false;
lleft=310;
// this will set the offset
xx=xx+1;
switch (xx) {
	case (10) :
		lleft=310;
		break;
	case (20) :
		lleft=320;
		break;
	case (30) :
		lleft=330;
		break;
	case (40) :
		lleft=340;
		break;	
	case (50):
		
		Done=true;
		var d2 = new Date;
		var n = d2.getTime();
		document.getElementById("time2").innerHTML = n;
		break;

	default:
		//lleft=300;
	}

LPos=lleft.toString()+"px";


if(document.getElementById("Logo1").style.left==LPos) {
     document.getElementById("Logo1").style.left="300px";
} else {
     document.getElementById("Logo1").style.left=LPos;
}

	if (!Done){
	
		setTimeout('vibrate()',50);
	}
}

its ugly.. but it works.. so this is all fine and dandy.. but it always starts it at left position 300.. I now want to be able to have it
be center screen for anyone.. and then use that as a variable into my js code to know where to return to during its shaking..

any ideas of how to get the center position of my image and then use it with the css position ? I want to have a variable
control this left:300px;
but can you do that in css ? I'm new to css...

[techgnome]

I *think* this will work... pass in document.getElementById("Logo1").style.left as a parameter to the function, or use it withing the function, and then add/decrement the value as needed. Or use it to set lleft... then increment/decrement it as needed to get the new value...

-tg

[kevin_sauerwald]

I think I got it to work using the leftoffSet property... so I have redone the code to work off the value the image is set left with..

now I just dont know how to set the position to absolute and give it a command to center it in CSS

[techgnome]

you either center it, or give it an absolute position... the two are mutually exclusive to each other. Centering is as simple as setting margin:auto; that centers the object top to bottom and left to right... if you want center top to bottom but a specific position left to right, then you use margin: auto 300px; that will set the left to 300px while it will be centered top to bottom... and you can go all the way around... margin: auto 300px auto 300px; <-- event thought the left and right margins are specified, it's still a relative (not absolute) location because the top and bottom are auto.

-tg

[kevin_sauerwald]

I think my issue now is that if I have the position to anything but absolute my commands to shake it dont work.. I tried to center the image
using html.. but it seems to center the left side of the image.. not the whole image..

I would have thought this a very simple thing to make work.. ughhh...