[JS] Hoogte cel/div - Softwareontwikkeling

maandag 14 april 2003 17:32

Acties:

Vrolijkheid alom!

Topicstarter

Ik heb hier een aantal topics over gelezen, maar helaas mochten de daarin gegeven oplossingen niet baten. Het gaat mij er om dat ik de hoogte van een cel op kan halen met javascript (om deze waarde + iets toe te kennen aan een layer met javascript menu'tje er in).

Het volgende heb ik in html staan:

code:

<table width='90%' border='1' cellspacing='0' cellpadding='0'>
        <tr>
            <td colspan='2' >
                <div id='titel' width='100' height='100'>
                    [img]'desktop.jpg'[/img]
                </div>
            </td>
        </tr>
        <tr>
            <td width='40%'>
                x
                <script type="text/javascript" src="../js/coolmenu.js"></script>
                <script type="text/javascript">eHeight('titel')</script>
            </td>
            <td>
                TEXT
            </td>
        </tr>
    </table>

Ik noem de div 'titel' (de cel kan ook, maar heeft hetzelfde effect) en deze roep ik aan in javascript met de functie eHeight('titel'). Hiervoor staat het volgende in de javascript file:

JavaScript:

function eHeight(element)
{
    myElement = document.getElementById(element).style.height;
    alert("Height: "+myElement);
};

Ik wil de, als test, een popup krijgen met daarin de hoogte. Ik krijg echter alleen 'Height: ' en verder niets.

Ook als ik ipv .style.height --> .offsetHeight (zoals in een andere post stond) gebruik, werkt dit niet. Ik ben tamelijk nieuw met javascript, dus ik pieker me hier al helemaal suf over

Hoe kan ik dit op deze, of andere manier, oplossen?

[ Voor 19% gewijzigd door Kaastosti op 14-04-2003 17:32 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

maandag 14 april 2003 17:41

Acties:

crisp

Devver

Pixelated

Probeer de height eens met CSS toe te kennen; een div kent namelijk geen property height:

HTML:

1	<div id="titel" style="width: 100px; height: 100px">

Verder lijkt het me erg onzinnig om de hoogte af te gaan vragen als je al weet dat die 100 is...

Intentionally left blank

maandag 14 april 2003 17:59

Acties:

Verwijderd

idd, maar als je toch wil, hier is een mogelijkheid:

http://www.drunk.nl/tweakers/hoogte.htm (d.m.v. cssrules)

dinsdag 15 april 2003 09:50

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Bedankt voor de replies, die ga ik eens proberen.

Verder lijkt het me erg onzinnig om de hoogte af te gaan vragen als je al weet dat die 100 is...

Dat weet ik dus niet, dat is het hele probleem, daarom wil ik deze opvragen

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 09:53

Acties:

crisp

Devver

Pixelated

Kaastosti schreef op 15 April 2003 @ 09:50:
Bedankt voor de replies, die ga ik eens proberen.

[...]
Dat weet ik dus niet, dat is het hele probleem, daarom wil ik deze opvragen

offsetHeight zou gewoon moeten werken; mogelijk kan je het echter pas gebruiken als de pagina (of in elk geval de tabel) volledig geladen is.

Intentionally left blank

dinsdag 15 april 2003 09:57

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Mjah de vraag is dus of een div (of liever cel, aangezien divs eng zijn) een height property heeft, of dat deze eerst toegekend moet worden alvoren 'm uit te kunnen lezen (zou jammer zijn). Dan krijg je namelijk inderdaad dat je de hoogte van een cel opvraagt die je een paar regels er voor zelf instelt

Situatie (misschien handig om te weten):
Table met titel-, zijkant- en contentgedeelte. Aan de zijkant komt een javascript menu met uitklapmogelijkheden. Dit menu is een aparte layer met fixxed afstanden (nu 10 pixels van links en 10 pixels van boven). Die 10 pixels van boven moeten afhankelijk worden van de hoogte van het titelgedeelte. Hierin komen een aantal plaatjes en een titeltekst. Deze titeltekst kan op lagere resoluties ook 2 regels beslaan, waardoor het titelgedeelte hoger wordt. Vandaar dat ik de hoogte van die cel dynamisch op wil halen.

[ Voor 49% gewijzigd door Kaastosti op 15-04-2003 10:03 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 10:09

Acties:

Verwijderd

Offsetheight gebruiken. Werkt hier perfect. Als je de div dynamisch aanmaakt met createElement, wel eerst aan je body (of een subelement ervan) toevoegen want anders is de offsetheight niet gedefinieerd, zelfs als de div inhoud heeft.

dinsdag 15 april 2003 10:18

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Kun je daar misschien een voorbeeld van geven? Zoals gezegd ben ik (nog) niet thuis in javascript

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 10:26

Acties:

crisp

Devver

Pixelated

Je kan je menu ook absoluut binnen een relatief gepositioneerde div zetten; voorbeeldje:

HTML:

<html>
<head>
<title>test</title>
<style type="text/css">
table,td {
  border: 1px solid #000000;
  border-collapse: collapse;
}
table {
  height: 100%;
}
td.top {
  height: 20%;
  width: 400px;
  vertical-align: top;
}
td.bot {
  vertical-align: top;
}
div.menucontainer {
  position: relative;
}
div.menu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 100px;
  background-color: #ff0000;
  border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
  <tr>
    <td class="top">top</td>
  </tr>
  <tr>
    <td class="bot">
      <div class="menucontainer">
        <div class="menu">divje</div>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Intentionally left blank

dinsdag 15 april 2003 10:35

Acties:

Verwijderd

OK, voorbeeldje:
var left_column = document.createElement("DIV")
// stop iets in de div
mybody.appendChild(left_column)
alert(left_column.offsetHeight)

Maar je hoeft het niet dynamisch aan te maken natuurlijk. Misschien is het dat je de functie eHeight iets moet veranderen:
var myElement = document.getElementById('titel')
alert("Height: "+myElement.offsetHeight)

[ Voor 6% gewijzigd door Verwijderd op 15-04-2003 10:39 ]

dinsdag 15 april 2003 10:38

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Woei! Dit gaat helemaal goedkomen krijg ik ineens het idee

Mijn dank is groot!

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 10:40

Acties:

MAZZA

Barbie is er weer!

crisp schreef op 15 april 2003 @ 10:26:
Je kan je menu ook absoluut binnen een relatief gepositioneerde div zetten; voorbeeldje:
HTML:
1
<chop />

Probleem wat je dan voor lief moet nemen is dat bij resizen die absoluut gepositioneerde div buiten de relatief gepositioneerde div kan vallen.

dinsdag 15 april 2003 10:48

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Hij doet het al

Dankzij de voorbeelden hier heb ik 't werkende gekregen!
Zo ziet het er nu uit (nog simpel, maar het menu werkt

)

Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/menu.jpg

Nou nog de formule voor de breedte van het menu ook gebruiken in het definieren van de breedte van die kolom en hij is helemaal goei

..en ook dat is inmiddels gelukt

[ Voor 6% gewijzigd door Kaastosti op 15-04-2003 11:16 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 11:30

Acties:

MAZZA

Barbie is er weer!

En voor de searchers is het altijd een feest om de oplossing te vinden in een topic

_*hint*

dinsdag 15 april 2003 11:49

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Hoe bedoel je *hint* ?

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 15 april 2003 12:24

Acties:

Verwijderd

Dat je even de gebruikte oplossing post.

dinsdag 15 april 2003 13:03

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Oooooh op die manier

In de html:

JavaScript:

<tr>
   <script type='text/javascript'>document.write("<td width='"+(getColumnWidth()+5)+"'>")</script>
      <div class='menucontainer'>
         <script type="text/javascript">new menu("menu", itemArray)</script>
      </div>
   </td>
</tr>

In de CSS: (de tweede div wordt binnen het menu-script al gemaakt)

JavaScript:

1
2
3

div.menucontainer {
  position: relative;
}

In het script: (nodig om kolombreedte gelijk te houden met itembreedte)

JavaScript:

function getColumnWidth()
{
    return item_width;
}

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.