Gecentreerd menu verticale scroll laten volgen

[TomDelft]

Hallo allemaal,

Ik ben bezig met een pagina die behoorlijk diep is, en daarom wil ik graag een simpel menuutje mee laten lopen bij het scrollen. Nu heb ik wel het e.e.a gevonden maar er is altijd sprake van een absoluut gepositioneerde div met x, y coordinaten.

Mijn vraag: Is het ook mogelijk om een floated div te centreren onderaan de pagina en deze dan mee te laten lopen?

Ik hoop dat iemand een oplossing weet!

Groeten Tom

De code is als volgt (onderaan staan de coordinaten: x=10 y=30):

<div id="divTopLeft"     style="position:absolute">
<!-- Start - put your content here --->
<b>Your Content Here</b>
<!-- End   - put your content here --->
</div>

<script type="text/javascript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	var px = document.layers ? "" : "px";
	window[id + "_obj"] = el;
	if(d.layers)el.style=el;
	el.cx = el.sx = sx;el.cy = el.sy = sy;
	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};

	el.floatIt=function()
	{
		var pX, pY;
		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 
		document.documentElement && document.documentElement.clientWidth ? 
		document.documentElement.clientWidth : document.body.clientWidth;
		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 
		document.documentElement.scrollTop : document.body.scrollTop;
		if(this.sy<0) 
		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 
		document.documentElement.clientHeight : document.body.clientHeight;
		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
		this.sP(this.cx, this.cy);
		setTimeout(this.id + "_obj.floatIt()", 40);
	}
	return el;
}
JSFX_FloatDiv("divTopLeft", 10,30).floatIt();
</script>

 

[aaajeetee]

Waarom wil je een floated div onderaan je pagina, je kan toch ook gewoon die coordinaten veranderen?

De reden dat er voor een "absolute" div is gekozen, is omdat deze geen 'ruimte' in je website in beslag neemt. Als je deze níet absolute zou maken, zou dat betekenen dat je deze niet kan verplaatsen / positioneren.

Ik stel dus voor: het huidige script gebruiken, enkel de X en Y coordinaten op 'midden onderaan het scherm' zetten

 

[TomDelft]

Bedankt voor je reactie. Wat moet ik bij coordinaten invoeren als ik die div altijd in het midden onderaan wil hebben?

Tom

 

[aaajeetee]

Bedankt voor je reactie. Wat moet ik bij coordinaten invoeren als ik die div altijd in het midden onderaan wil hebben?

Tom

Zal je even op google moeten zoeken naar een javascriptje dat hetmidden van je scherm berekent.
Daarnaast zou ik ook even een scriptje zoeken wat de hoogte van je scherm bepaalt / berekent.

Deze coordinaten kan je dan invoeren

Opmerking: het hangt van de implementatie van jouw scriptje (zie je 1e post) af, of het menu'tje dan ook daadwerkelijk in het midden komt, of dat het op de ingevoerde posities begint.
Wanneer de ingevoerde coordinaten de beginpunten van het menu zijn, zal je de code nog even aan moeten passen (beginpunt = ingevoerde coordinaat - (breedte van menu / 2))

 

[TomDelft]

Zoiets als dit? Hoe implementeer ik dit in de bestaande code? heb er de ballen verstand van dat merk je wel...

<script>
// Get the dimensions of the browser window
var winwidth = document.body.clientWidth;
var winheight = document.body.clientHeight;

// Get the dimensions of the layer
var layerwidth = LAYERNAME.clientWidth;
var layerheight = LAYERNAME.clientHeight;

// Centre the layer
LAYERNAME.style.left = ((winwidth - layerwidth)/2) + "px";
LAYERNAME.style.top = ((winheight - layerheight)/2) + "px";
</script>

 

[aaajeetee]

Heb je wellicht iets aan dit script?

Enige wat nu nog moet gebeuren is die div in het midden van je scherm krijgen.

 

[TomDelft]

Bedankt voor je reactie

Heb het uiteindelijk opgelost door de meebewegende div 100% te maken en tekst align center te geven. En daar heb ik dan weer een div ingenest die ik 750px breed heb gemaakt met een top-border. Gewoon met css dus... net zo makkelijk

hier staat ie...

http://www.quwest.com/test/Huuraanbod/utrechtgooi.html

Bedankt voor je hulp!

Groeten!

 

[TomDelft]

Alleen werkt dit in firefox niet zie ik... ***
staat ie gewoon aan de zijkant

 

[TomDelft]

Ook opgelost met: margin: 0 auto;