Dynamisk position:absolute startpunkt.

Mattias NordinMedlem sedan dec. 20051 056 inlägg

Frågan11 mars 2007 10:55#1

Jag har en centrerad tabell på en sida som är ca 800 pixlar bred. I den ligger en website. När man expanderar webläsarfönstret så blir det således mer "luft" på sidorna om websiten.

Min utmaning nu är att skapa ett inloggningslager som börjar med koordinaten för det vänstra övre hörnet på tabellen. Använder jag style="position:relative; top:10px; left:10px;" så är det inte några problem med positioneringen men alla radbrytningar och dyligt gör att sidan förskjuts nedåt.

Använder jag style="position:relative; top:100px; left:280px;" så fungerar det i princip som jag vill förutom att mitt lager är relativt till hörnet i webläsaren och inte hörnet i min centrerade tabell. Ändrar man stoleken på webläsarfönstret så blir det inte rätt.

Finns det något smidigt sätt att göra en "relative absolute"? Dvs en absolute som har en dynamisk startpunkt. Antar att det skulle gå genom att göra ett skript som räknar ut bredden på webläsarfönstret och sedan utgår från koordinaten i mitten av fönstret och drar av 400 pixlar... men jag har inte mycket koll på hur man gör det.

Några tips?

:stud

Mattias NordinMedlem sedan dec. 20051 056 inlägg

11 mars 2007 12:27#2

Det går framåt...


<div id="test2" name="test2" style="position:absolute; top:0px; left:0px;">
<!-- #include virtual="/eventControl/_design/startButton/startButton.asp"-->
</div>

<script type="text/javascript">
// FUNCTION TO TOGGLE LAYER.
function $(s){
    if ('string'==typeof s)
        return document.getElementById(s);
    else
        return s;
}
function toggle(el, state){
	var els=$(el).style;

	if ('undefined' != typeof state)
		els.display=state?'block':'none';
	else
		els.display=(els.display=='block')?'none':'block';
}

// HIDE THE LAYER.
toggle(document.getElementById("test2"), false);

// FUNCTION TO MOVE THE LAYER TO THE CORRECT STARTING POSITION.
function moveDivToPos(x,y) {

// 1 - SET DYNAMIC START COORDINATE...
	if (document.layers){
	   browseWidth=window.outerWidth;
	   browseHeight=window.outerHeight;
	}
	if (document.all){
	   browseWidth=document.body.clientWidth;
	   browseHeight=document.body.clientHeight;
	}
	document.write("<li> browseWidth = " +browseWidth)
	varXstartPos = browseWidth / 2 - 490	//Center of screen - half the widht of the table.
	varYstartPos = 100
	document.write("<li> browseWidth / 2 = " +varXstartPos)
	document.write("<p>" +varXstartPos)

// 2 - 	MOVE THE LAYER...
	x = x + varXstartPos
	x = x + "px";
	y = y + varYstartPos
	y = y + "px";
	test2.style.left = x;
	test2.style.top = y;
}
</script>

<script type="text/javascript">
moveDivToPos(0,0)
</script>

<a href="#" onClick='toggle("test2");'>toggle</a>

Problem A: Jag behöver få window onRezise att köra moveDivToPos() funktionen. Detta får jag inte till.

Problem B: Jag behöver få mitt lager att lägga sig överst. Nu har jag några knappar som ligger över min inloggningsruta. Detta borde jag kunna googla mig till hur man gör.

:stud