[JS] Positie float verkrijgen - Softwareontwikkeling

woensdag 10 januari 2007 21:55

Acties:

Verwijderd

Topicstarter

Ik probeer al een tijdje de juiste positie te achterhalen van een floated element. Ik weet dat er onder IE6 en IE7 al in het verleden hier problemen mee waren, maar had stiekem de hoop dat iemand dit toch ooit werkend heeft gezien.

Ik heb zelf al van alles geprobeerd, het gebruikelijke via offsettop,offsetleft, maar ook via runtimeStyle en currentStyle. Helaas returnen deze allemaal of 'auto' of een totaal verkeerde waarde, bijvoorbeeld -100 terwijl het element in het scherm helemaal naast de scrollbar staat.

Iemand nog wat werkends tegengekomen?

woensdag 10 januari 2007 22:44

Acties:

BasieP

HTML:

<html>
    <head>
        <script>
            window.onload = function windowLoaded() {
                var hoi = document.getElementById('hoi');
                alert(hoi.style.left ? hoi.style.left : hoi.offsetLeft);
            }
        </script>
    </head>
    <body>
        blaat hoi etc. <div id="hoi" style="float: left;">hoi</div>blaat
    </body>
</html>

dus door:

JavaScript:

1	hoi.style.left ? hoi.style.left : hoi.offsetLeft

This message was sent on 100% recyclable electrons.

woensdag 10 januari 2007 23:07

Acties:

Verwijderd

Topicstarter

Dat gaat dus niet altijd goed. Zeker niet als je de elementen gaan nesten in andere elementen. Op de een of andere manier kan IE niet goed bepalen wat de positie is van het element.

Ik ga wel eens aan de gang met een voorbeeld. Ik helaas namelijk het probleem nu in iets zitten wat ik niet kan tonen.

[ Voor 25% gewijzigd door Verwijderd op 10-01-2007 23:22 ]

donderdag 11 januari 2007 08:11

Acties:

tec

TEC

Volgens mij heeft PPK hier een mooi script voor wat als het ware de offsetLeft en top opvraagt en daarna deze opteld bij de offsetLeft en top van het parent element enz enz enz tot er geen parent elementen meer zijn.

http://www.quirksmode.org/js/findpos.html

donderdag 11 januari 2007 08:28

Acties:

BtM909

Watch out Guys...

tec schreef op donderdag 11 januari 2007 @ 08:11:
Volgens mij heeft PPK hier een mooi script voor wat als het ware de offsetLeft en top opvraagt en daarna deze opteld bij de offsetLeft en top van het parent element enz enz enz tot er geen parent elementen meer zijn.

http://www.quirksmode.org/js/findpos.html

Wat dus niet goed zou werken met floats.... Ik zie ook geen float voorbeelden bij ppk

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 11 januari 2007 08:44

Acties:

crisp

Devver

Pixelated

Een voorbeeld waarbij je niet de juiste offset krijgt zou handig zijn; dit lijkt gewoon goed te werken in IE:

HTML:

<style type="text/css">

#foo {
    float: right;
}

</style>
<script type="text/javascript">

function bla()
{
    alert(document.getElementById('foo').offsetLeft);
}

</script>
<div id="foo">foo</div>
<input type="button" onclick="bla()" value="offset?">

Het lijkt me dat in gevallen waarbij het niet goed gaat het vaak een kwestie is van layout forceren van een parent element of een extra offsetParent creëeren.

Intentionally left blank

donderdag 11 januari 2007 09:56

Acties:

tec

TEC

BtM909 schreef op donderdag 11 januari 2007 @ 08:28:
[...]

Wat dus niet goed zou werken met floats.... Ik zie ook geen float voorbeelden bij ppk

Maar WAAAROM zou het dan niet goed werken met floats??? Ik heb het genoeg met floats gebruikt zonder problemen tot op heden.

donderdag 11 januari 2007 09:58

Acties:

crisp

Devver

Pixelated

tec schreef op donderdag 11 januari 2007 @ 09:56:
[...]

Maar WAAAROM zou het dan niet goed werken met floats??? Ik heb het genoeg met floats gebruikt zonder problemen tot op heden.

Omdat algemeen bekend is dat IE's float-model (in feite heel IE's positioning model) zwaar buggy is.
Ik kan me dus goed voorstellen dat er situaties zijn waarbij de offset vanuit scripting niet correct wordt teruggegeven, de vraag is alleen: in welke situaties?

Intentionally left blank

donderdag 11 januari 2007 11:21

Acties:

Verwijderd

Topicstarter

Ja dat is dus het kloterige, ik heb nu heel slim een voorbeeld van het probleem. Het zijn in dit geval 3 floats met een wrap eromheen. Een navigatie, een content gedeelte, en een balkje aan de rechterkant.

Ik ga wel eens even kijken of ik met een voorbeeld kan komen, dan kan ik laten zien wat er fout gaat. Het heeft inderdaad ergens te maken met die brakke engine onder IE, en hasLayout forceren werkte zelfs niet.

Ik ga wel even wat in elkaar bakken om het probleem te tonen.

vrijdag 12 januari 2007 09:18

Acties:

gvanh

Webdeveloper

Zelf ben ik inderdaad ook al regelmatig tegen problemen aangelopen met Internet Explorer en positie-bepaling. Leek ook te maken te hebben met margins die waren ingesteld op onderdelen waarin het element is opgenomen (genest) waarvan positie bepaald moet worden. Of in ieder geval elementen die eerder in de (X)HTML staan.

Uiteindelijk komt het er bij mij vaak op neer dat de afwijking wel consistent is (bijvoorbeeld altijd 5px te veel of 5px te weinig, o.i.d.). Regelmatig in mijn JS code dus variabelen namen "ie_correction"

vrijdag 12 januari 2007 13:20

Acties:

crisp

Devver

Pixelated

offsets zijn gewoon een mess, zie bijvoorbeeld ook deze post: http://hartshorne.ca/2006/01/20/javascript_positioning/

bijna elke browser heeft wel quirks wat dat betreft; er is sowieso geen specificatie die voorschrijft hoe offsetLeft/Top en offsetParent bepaald moeten worden - dat zijn namelijk geen onderdelen van de DOM specificatie.

Intentionally left blank

zaterdag 13 januari 2007 12:54

Acties:

Verwijderd

Topicstarter

Het probleem wat ze daar beschrijven - wat wordt wel, en niet meegenomen in berekeningen - is ook iets wat je ook in bijvoorbeeld offsetWidth terugziet, daar valt relatief eenvoudig omheen te werken door padding en borders uit te zoeken op een element.

Nu heb ik wel het geluk dat in mijn case ik niet te maken krijg met dit probleem. Ik probeer namelijk een positie te vinden van een placeholder in een design wat wordt beheerd door een cm systeem. Deze placeholders worden door het systeem gebruikt om componenten in te groeperen en hebben van zichzelf geen stijl, en zijn puur bedoeld om een locatie te definiëren. Dit is dan weer een positief puntje in het verhaal.

Momenteel worden die placeholders met borders visueel aan een gebruiker getoond, maar dat veroorzaakt echt zoveel problemen, layouts die er anders uitzien, floats die opeens niet meer passen, enzovoorts. dat ik ipv borders een laag over het design wil plaatsen met hotspots.

Min of meer is een gebrek aan crossbrowser ondersteuning voor border outline de oorzaak.

[ Voor 21% gewijzigd door Verwijderd op 13-01-2007 12:55 ]