[javascript] absolute positie bepalen - Softwareontwikkeling

dinsdag 25 september 2007 17:07

Acties:

Verwijderd

Topicstarter

In het code voorbeeld hieronder heb ik twee textboxes verticaal gecentreerd staan op het scherm. Ale ik nu van deze twee textboxes de verticale positie ten opzichte van de pagina wil hebben dan kom ik er met alleen offsetTop en lopen d.m.v. offsetParent niet op de correcte waarde uit. Het huidige scriptje gaat mis bij gebruik van relatieve elementen. Via google heb ik nog geen script kunnen vinden die onderstaand situatie wel correct berekend.

Wat doe ik verkeerd en of heeft iemand wel een correct script die zij of hij wil delen?

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Voorbeeldje</title>
    <style type="text/css">
        * {padding: 0; margin: 0;}

        html,body {
            height: 100%;
            width: 100%;
        }

        #outer {
            height: 100%; 
            width: 100%;
            overflow: visible;
            #position: relative;
        }

        #middle {
            width: 100%; 
            text-align: center;
            #position: absolute; 
            #top: 50%;
        }

        #inner {
            #position: relative;
            #top: -50%;
        }
    </style>
    
    <script language="javascript" type="text/javascript">
    <!--
        function getTop(element) {
            var top = 0;
            var absoluteAncestor = false;
        
            while (element.offsetParent) {
                top += element.offsetTop
                element = element.offsetParent;
        
                if (element.nodeName.toLowerCase() != 'html') {
                    top += element.clientTop;
                    if (element.currentStyle['position'] == 'absolute') 
                        absoluteAncestor = true;
                }
            }
            
            if (!absoluteAncestor) 
                top += document.getElementsByTagName('BODY')[0].offsetTop;
            
            return top;
        }
        
        document.onmousemove = function(){document.getElementById("muis").value = event.clientY;}
    -->
    </script>

</head>
<body>
    <div id="outer">
        <div id="middle">
            <div id="inner">
                <input id="muis" />
                <input id="Text1" />
            </div>
        </div>
    </div>

    <script language="javascript" type="text/javascript">
        var el = document.getElementById("Text1");
        el.value = getTop(el);
    </script>

</body>
</html>

woensdag 26 september 2007 09:10

Acties:

gvanh

Webdeveloper

Psssh ... is inderdaad een heel listige.

Kun je niet zelf het offsetTop/offsetParent verhaal zo aanpassen dat:

- je in eerste instantie de top/left waarden pakt van je absoluut gepositioneerde container
- vervolgens je parentNodes doorloopt op zoek naar de "eerste" parent die position op 'relative' heeft staan.
- van dat punt verder omhoog werken met de standaard manier van offsetTop/offsetParent?

Ik moet heel eerlijk zeggen dat ik me afvraag of je daarmee de juiste waarde gaat achterhalen ... maar op zich wel een leuk experiment. Mooiste zou dan nog zijn, als je ook rekening houdt met de situatie waarin de relatief gepositioneerde parent zelf ook onderdeel is van een absoluut gepositioneerde (parent)container.

woensdag 26 september 2007 10:08

Acties:

Padschild

Heyy,

Voor eigen projecten gebruik ik deze functie (apart voor de X en de Y):

JavaScript:

/* 
Summary: Used to get the X coordinate of an element
*/
function findPosX(obj)
{
    var curleft = 0;
    
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft;
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;
        
    return curleft;
}

/* 
Summary: Used to get the Y coordinate of an element
*/
function findPosY(obj)
{
    var curtop = 0;
    
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    
    return curtop;
}

Het element eerst opslaan in een variabele met document.getElementById (of wat dan ook) en deze dan als parameter meegeven in 1 van de functies. Je krijgt dan de X of Y coordinaat in pixels terug. Bij mij werkte dit ook gewoon voor relatieve elementen.

[ Voor 6% gewijzigd door Padschild op 26-09-2007 14:27 ]