[JS] Hoogte van een object welke verborgen is - Softwareontwikkeling

zondag 16 juli 2006 19:35

Acties:

Topicstarter

Voor een script dat een animatie verzorgt moet ik de hoogte weten zodat daarmee verder gerekend kan worden. Nou zijn er 2 soorten animaties, verbergen en tonen. Bij verbergen is het object al in beeld en dus kan ik de hoogte ophalen met offsetHeight. Maar offsetHeight werkt niet als 'display' op none staat (zo verberg ik objecten). Dan krijg ik gewoon undefined terug namelijk.

Weet iemand hier een goede oplossing voor? Ik heb gezocht maar of ik weet de juiste keywords gewoon niet, of het is te warm

Mocht je het niet helemaal begrijpen hieronder een klein simpel voorbeeldje. Ik wil dus de hoogte opvragen van een object met dynamische hoogte dat in het begin verborgen is.

Hoop dat iemand me hiermee kan helpen.

HTML:

<html>
    <head>
        <style type="text/css">
            div#test
            {
                display: none;
                background-color: red;
                width: 250px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function( e )
            {
                if( !e ) var e = window.event;
                var obj = document.getElementById( 'test' );
                alert( obj.offsetHeight );
            }
        </script>
    </head>
    <body>
    
        <div id="test">
            hoi aapjes!<br />woot<br />
            Vraag me af hoe hoog dit object is.<br />
            Maar dat weten we niet!
        </div>
    
    </body>
</html>

:D/-<

zondag 16 juli 2006 20:17

Acties:

Rowanov

Kop eens wat anders...

Misschien verstandig om voor het verstoppen de hoogte in een variabele te stoppen? Als het element niet weergegeven wordt, is het niet heel gek dat het geen hoogte heeft

zondag 16 juli 2006 20:24

Acties:

semicolon

Topicstarter

Zat ik ook aan te denken toevallig, alleen lijkt het me niet echt een 'nette' oplossing, maar als dat de enige manier is zal ik dat waarschijnlijk moeten toepassen ja. Ik wacht nog wel even af of andere mensen iets erover te zeggen hebben.

Daarnaast worden sommige objecten die standaard verborgen zijn waar ik de hoogte van moet weten dynamisch in Javascript gemaakt en ben ik bang dat mensen het zullen zien als die eerst zichtbaar is en dan opeens niet en dan via animatie verschijnt.

[ Voor 37% gewijzigd door semicolon op 16-07-2006 20:40 ]

:D/-<

maandag 17 juli 2006 09:47

Acties:

glashio

C64 > AMIGA > PC

HTML:

<html>
    <head>
        <style type="text/css">
            div#test
            {
                visibility : hidden;
                background-color: red;
                width: 250px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function( e )
            {
                if( !e ) var e = window.event;
                var obj = document.getElementById('test');
                var height = obj.offsetHeight;
                obj.style.visibility = '';
                obj.style.display = 'none';
                alert(height);
            }
        </script>
    </head>
    <body>
    
        <div id="test">
            hoi aapjes!<br />woot<br />
            Vraag me af hoe hoog dit object is.<br />
            Maar dat weten we niet!
        </div>
    
    </body>
</html>

Je kan ook de stijl visibility gebruiken in beginsel om dat deze al verborgen gerenderd wordt.

> Google Certified Searcher
> Make users so committed to Google that it would be painful to leave
> C64 Gospel
> [SjoQ] = SjoQing

maandag 17 juli 2006 10:17

Acties:

semicolon

Topicstarter

Probleem is dat dit hetzelfde doet als display gewoon laten en met javascript op none zetten, alleen nu zie je de inhoud niet, maar hij neemt wel de ruimte in beslag.

.. tijdens typen en testen

Maar als ik het element position: absolute; geef terwijl hij visibility: hidden heeft schuift de rest wel op naar boven alsof het object er niet is en kan ik de hoogte toch opvragen, in ieder geval op de test pagina. Zal het dalijk even testen in de echte pagina.

Een ander idee dat iemand me gaf was om het object buiten de pagina te zetten maar dat lijkt me wel heel vies

:D/-<

maandag 17 juli 2006 10:24

Acties:

Rowanov

Kop eens wat anders...

Max v W schreef op maandag 17 juli 2006 @ 10:17:
Maar als ik het element position: absolute; geef terwijl hij visibility: hidden heeft schuift de rest wel op naar boven alsof het object er niet is en kan ik de hoogte toch opvragen, in ieder geval op de test pagina. Zal het dalijk even testen in de echte pagina.

Een ander idee dat iemand me gaf was om het object buiten de pagina te zetten maar dat lijkt me wel heel vies

Wat je doet met position: absolute (en fixed), is dat je het element uit de document flow trekt. Hij is dus onzichtbaar en de onzichtbare ruimte, neem hij in de linker bovenhoek van je pagina in