offset met position relative

Status
Niet open voor verdere reacties.
D

Dastrus

Gebruiker
Lid geworden
20 apr 2010
Berichten
21
Hallo,

Ik heb een probleempje met de onderstaande code. Ik wil namelijk van die tabjes maken op mijn site die eenmalig wat uitleggen. Je zult de tabjes weg kunnen klikken en dan m.b.v. een cookie zullen ze wegblijven. Soort uitleg voor nieuwe bezoekers dus.

Iig, het werkt allemaal zolang de content_div en de parent_div zich in dezelfde omringende div bevinden. Wanneer de divs zich in andere divs bevinden gaat het fout. (In ieder geval wanneer de divs "position: relative;" zijn)

HTML: 
<html>
<head>
<style>
.title { position: relative;
	background: #2e5925;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#477c3d', endColorstr='#2e5925'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#477c3d), to(#2e5925)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #477c3d,  #2e5925);
	background: -o-linear-gradient(top,  #477c3d,  #2e5925); display: block;
}
.leaves { background: url("/images/ui/leaves.png") no-repeat; width: 160px; height: 100%; top: 0; right: 0; }
</style>
<script type="text/javascript" language="javascript">
<!--

function ShowContent(parent_div, content_div, oX, oY, positionX, positionY) {
	if(content_div.length < 1) { return; }
	var offsetX = oX;
	var offsetY = oY;
	var cdiv = document.getElementById(content_div);
	var pdiv = document.getElementById(parent_div);
	cdiv.style.display = "block";
	AssignPosition(pdiv, cdiv, offsetX, offsetY, positionX, positionY);
}

function HideContent(content_div) {
	if(content_div.length < 1) { return; }
	document.getElementById(content_div).style.display = "none";
}

function AssignPosition(pdiv, cdiv, oX, oY, positionX, positionY)
{
	var test = pdiv.offsetParent;
	var pdLeft = pdiv.offsetLeft;
	var pdTop = pdiv.offsetTop;
	
	var pdHeight = pdiv.offsetHeight;
	var cdHeight = cdiv.offsetHeight;
	var originY = (pdHeight - cdHeight) / 2;
	if(positionY == "top") { originY = -cdHeight; }
	else if (positionY == "bottom") { originY = pdHeight; }
	
	var pdWidth = pdiv.offsetWidth;
	var cdWidth = cdiv.offsetWidth;
	var originX = (pdWidth - cdWidth) / 2;
	if(positionX == "left") { originX = -cdWidth; }
	else if (positionX == "right") { originX = pdWidth; }
	
	cdiv.style.left = (pdLeft+originX+oX) + "px";
	cdiv.style.top = (pdTop+originY+oY) + "px";
}

//-->
</script>
</head>
<body>

<p>d</p><p>d</p><p>d</p>

<div class="title"><h1>Hoofdpagina</h1>
    <div class="leaves">
        <div id="lol2"
        onmouseover="ShowContent('lol2','uniquename4',0,0,'center','top'); return true;"
        onmouseout="HideContent('uniquename4'); return true;"
        style="padding: 50px; background: #aaa;"
        >
        testje 2
        </div>
    </div>
</div>

<div
id="uniquename4"
style="display:none;
position:absolute;
border: 3px solid #000;
background-color: grey;
padding: 5px;">
Dit is even een test. Deel 2.
</div>

</body>
</html>

Ik hoop dat iemand me kan helpen.

Bedankt,

Dastrus
 
Eh, waarom precies werk je met Javascript en CSS door elkaar? Je kan, zoals op het moment gedaan wordt, in Javascript de x en y coordinaten van een element veranderen, maar veel netter (en minder verwarrend!) is om gewoon class namen te gebruiken. Iets in deze richting:

[js]function showContent(elemID)
{
document.getElementById(elemID).className = 'showme';
}

function hideContent(elemID)
{
document.getElementById(elemID).className = 'hideme';
}[/js]


Code: 
/* CSS */

.showme
{
   display: block;
   /* meer stijl hier */
}

.hideme
{
   display: none;   /* that's it! */
}

HTML: 
<div id='container'  onmouseover="showMe('lol2');" onmouseout="hideMe('lol2');">
   <div id='lol2'>
      ...
   </div>
</div>

Nu, als je wilt dat de inhoud niet in de container staat (eh, geen idee waarom je dit niet zou willen maargoed) kan je zelfs nog met appendChild() werken om 'm erin te gooien.
 
Laatst bewerkt:
Ik heb de css in javascript gestopt om even snel te testen. Zo verwarrend is het niet met dat kleine beetje code.

Het is echter niet zo dat ik de inhoud van het tabje op een andere plek wil plaatsen, maar het gehele tabje (content_div, miss verwarrend benoemd). Dit heeft als rede dat de div ander onder bovenliggende divs terecht komt (zelfs met z-index).

Ik weet niet of je de code ff hebt uitgetest, maar dat zal een hoop verklaren denk ik.
 
Heya,


heb de code eventjes uitgeprobeerd en snap nu je vraag helemaal niet meer. Laten we woorden als content_div enzo niet gebruiken, maar het volgende. Als ik de pagina open zie ik dit: posrel1.png, en als ik met m'n muis over het grijze blokje heenga, zie ik dit: posrel2.png.

Dus eh, wat is hier precies mis mee? Wat is de gewenste uitkomst?





:thumb:
 
Als je de div met id="uniquename4" binnen div class="leaves" zet (dus net als div id="lol2") dan krijg je het gewenste effect. Het probleem is dus dat id="uniquename4" zich niet in dezelfde div bevindt als lol2 (de "parent"(waar je mouseover bij doet) als het ware). Dit effect komt grotendeels doordat de divs waarin lol2 zich bevindt (leaves en title) position: relative hebben. Als ik de position verwijder dan komt het wel goed te staan. Maar daar wil ik dus een oplossing voor hebben.

Hopelijk begrijp je het nu. Beetje vage benaming allemaal, maar dat doe ik nou eenmaal met snelle tests en ik niks kan verzinnen. ^^

P.S. Kan geen foto uploaden/attachen om de 1 of andere reden. Hopelijk begrijp je het zonder. Het "tabje" div(uniquename4) moet dus direct boven de "parent" div(lol2) verschijnen. Of eronder, licht er maar net aan wat ik meegeef (top, bottom, center en eventuele offsetX/Y).

P.S.S.

HTML: 
<body>
 
<p>d</p><p>d</p><p>d</p>

<div id="lol2"
        onmouseover="ShowContent('lol2','uniquename4',0,0,'center','top'); return true;"
        onmouseout="HideContent('uniquename4'); return true;"
        style="padding: 50px; background: #aaa;"
        >
        testje 2
        </div>
 
<div
id="uniquename4"
style="display:none;
position:absolute;
border: 3px solid #000;
background-color: grey;
padding: 5px;">
Dit is even een test. Deel 2.
</div>
 
</body>
</html>

Dit moet het juiste effect geven dat ik zoek, alleen dan dus zoals ik boven heb aangegeven met die andere divs.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan