Dyn. hoogte van div; afhankelijk van hoogte tabel erboven

Pagina: 1
Acties:

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Ik heb de volgende code (ff globaal "geschetst"):

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <table>
    <tr>
      <td>
        Hierin komt een tree-menu wat iedere keer een andere hoogte heeft.
      </td>
    </tr>
    <tr>
      <div>
        Deze div staat hier om de inhoud ervan scrollable te maken.
      </div>
    </tr>
  </table>
</body>


Hoe kan ik de <div> nu een class geven dat ie iedere keer de hoogte aanneemt zodat hij binnen het scherm blijft, en ik niet voor iedere pagina een andere class hoef te definieren in mijn stylesheet?

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

dus je wilt dat de div altijd zo groot blijft als het scherm??? gebruik javascript:

code:
1
2
3
4
5
6
    function docHeight () {
        return (!window.innerWidth) ? document.body.clientHeight : window.innerHeight;
    }
    function docWidth () {
        return (!window.innerWidth) ? document.body.clientWidth : window.innerWidth;
    }


de ene geeft de hoogte in px van het scherm en de ander de breedte, lijkt me niet moeilijk om uit te vogelen welke wat doet ;) ... het is crossbrowser dus daar heb je ook geen last van, als je nu zelf nog bedenkt hoe je nu hiermee de breedte en hoogte van je div veranderd, dan ben je klaar ...

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Nee, mijn div moet niet even groot zijn als het scherm, maar even groot als de <TR> waar hij in staat. Er staat een tree-menu boven, en dit heeft dus iedere keer een andere hoogte.

Als ik nu in mijn stylesheet een vaste hoogte (bijv. 430px) opgeef, dan doet ie het de ene keer heel mooi, maar de volgende keer staat de helft van de <div> onderaan buiten het scherm... Snappie?

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

dan moet je gaan afvangen hoe groot je tree menu is elke keer dat je een mapje opent of dichtdoet ... dan bereken je de totale hoogte van het je brwoser scherm met de bovenstaande formule ... trekt daar de hoogte van het menu af (plus misschien nog een correctie) en voila ...

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Het is niet zo dat mijn tree menu met openslaande en dichtgaande mappen werkt, hij krijgt dus wel bij het openen van de pagina een vaste hoogte, maar aangezien ik ook met PHP werk willen er nog wel eens meer of minder dingen in dat menu staan. Dat menu is in principe gewoon een tabel met meerdere rijen...

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

dan is het toch heel simpel ... je kijkt hoeveel rijen erzijn, en je bepaalt daarmee de hoogte van je div, dan hoeft er niet eens javascript aan te pas komen, je kan dan alles server-side oplossen

ik neem aan dat het menu uit de database komt, dan tel je het aantal results van je query, doet die maal de hoogte van 1 rij ... en voila ... totale hoogte van je menu. nu kun je deze gebruiken om je div hoogte te bepalen ...

Desnoods pomp je de php hoogte in een javascript variabele en je bent klaar ...

code:
1
2
3
<script>
  var hoogteMenu = <?=$hoogteMenu?>;
</script>


tadaaa ... als je de source geeft of een link, dan kan ik je wat meer helpen

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
dat is ook een oplossing, maar vind ik niet de meest nette...

De rijhoogte kan nl. ook nog wel eens wijzigen... Ik wil het dus als het volgt gaan doen (ongeveer):

1. De hoogte van de menu-tabel wordt bepaald.
2. De hoogte van het frame is bekend.
3. De hoogte van de div wordt dan (hoogte_van_frame - hoogte_menu_tabel).

Toch?

Zover ben ik, maar nu moet ik dit nog op de een of andere manier in m'n style zien te verwerken... Op MSDN zag ik al wel dat je met DHTML binnen je style kan werken, maar dat gaat me nog niet goed af... Wie helpt me op weg?

De totale source hier neerzetten lijkt me nie echt wijs...

Hier staat de bron: http://www.ezsite.nl/temp.html (dit is gegenereerd en later opgeslagen)

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

Ik vraag me af waarom mijn methode niet net is ... als jij met microsoft aan de slag gaat en met codes wilt gaan werken die alleen IE5.5+ compatible zijn, vraag ik me af wie hier niet netjes in. In de uiteindelijk source kijkt toch geen hond erna hoe je het hebt gedaan, en dan zou ik toch echt kiezen voor een browser compatible versie boven een "nette" versie.

en over dat de rijhoogte nog weleens kan wijzigen, nou dan zet je deze toch in een variabele in php.

dus:
code:
1
2
3
4
5
6
7
8
<?
$rijHoogte = 18;
?>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="<?=$rijHoogte?>">blaat</td>
  </tr>
</table>


Om nog even terug te komen op je "nette" code ... wat vind je niet netjes dan? dat je een server-side taal gebruikt om bepaalde dingen in html dynbamisch te maken? Dat is toch juist de kracht van een server-side taal ...

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:06

crisp

Devver

Pixelated

Je kan de style van je div gewoon dynamisch aanpassen met javascript, en dat is wel compatibel met meer browsers dan alleen IE5.5+.
Geef je div gewoon een id, bereken de gewenste hoogte (daar was je geloof ik al uit), en maak een functie die je onload aanroept:
JavaScript:
1
2
3
4
5
function init() {

  document.getElementById('idvanjediv').style.height = <gewenste hoogte>;

}

Intentionally left blank


Verwijderd

maar dan zit je dus mooi met je getElementByID in NN4 en IE4..., dus dan doe je dit:

code:
1
2
3
4
5
6
            if (document.getElementById) 
                document.getElementById("idtje").style.height = hoogte;
            else if (document.all)
                document.all["idtje"].height = hoogte;
            else if (document.layers)
                                                               document.layers[idtje].height = hoogte;


als het goed is werkt dit voor elke browser ... maar goed Crisp, volgens mij heb ik hem dit ook al verteld en was dit verder niet de bedoeling. Hij wil blijkbaar geen server-side taal gebruiken om in javascript waardes aan variabelen mee te geven. Zelf vind ik dit niet echt slim, ten eerste is dit het mooie van talen als PHP en ASP, en tweede geen hond die het merkt.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 14:06

crisp

Devver

Pixelated

Verwijderd schreef op 11 oktober 2002 @ 10:43:
maar dan zit je dus mooi met je getElementByID in NN4 en IE4..., dus dan doe je dit:

[...]

als het goed is werkt dit voor elke browser ... maar goed Crisp, volgens mij heb ik hem dit ook al verteld en was dit verder niet de bedoeling. Hij wil blijkbaar geen server-side taal gebruiken om in javascript waardes aan variabelen mee te geven. Zelf vind ik dit niet echt slim, ten eerste is dit het mooie van talen als PHP en ASP, en tweede geen hond die het merkt.
.top :?

NN4 gebruikers moet je doorsturen naar netscape.com en IE4 gebruikers naar microsoft.com anders komen we nooit van die fossielen af ;)
Ik ben het met je eens dat als je het serverside al in de code kan parsen, desnoods met een inline style, dat je dat moet doen.
Topicstarter heeft dunkt me wel genoeg informatie zo; de rest is makkelijk op te zoeken...

Intentionally left blank


Verwijderd

maar als je dan weer inline styles gaat gebruiken zal NN ook weer over zijn nek gaan ;) ... haha ... jaja, het is overal rekening mee houden :D ... hmmm, vandaar mijn foto en onderschrift ;)

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Op zich is de incompatibiliteit met Netscape geen probleem, de systeemeisen van ons pakket vereissen gewoon IE vanaf 5... ;-)

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Ik heb nu deze functie, die onload wordt uitgevoerd:

code:
1
2
3
  function init() {
    document.getElementById('content_bestand').style.height = window.innerHeight;
  };


Maar hij doet dus echt helemaal niks! Hoe kan dat nou?

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

Kan je niet gewoon met hoogtes van de <tr> s werken? wanneer je doet <tr height = "1"> en je zet je menu in die rij, en daarna gebruik je <tr height = "100%"> bij een table van height = "100%" blijft hij dan mooi op het scherm..

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Dan blijft die <div> er nog steeds niet binnen... Die <div> rekt gewoon lekker die tabel op...

Is er niet een style-element wat voorkomt dat mijn tabel opgerekt wordt?

Edit:

Ik heb nu in de table het volgende toegevoegd:

tableLayout : fixed

Nu blijft de tabel de juiste grootte, nu nog scrollen...

[ Voor 0% gewijzigd door Skef op 11-10-2002 14:52 . Reden: toevoeginkje... ]

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


  • r0bert
  • Registratie: September 2001
  • Laatst online: 11-08 16:19
Een <div> binnen een <tr> ? Dat lijkt me niet te kloppen.. xou er maar een <td>tje tussen doen :P

edit:
http://msdn.microsoft.com.../reference/objects/tr.asp
Remarks

The TD and TH elements are valid within a row

  • Skef
  • Registratie: April 2001
  • Laatst online: 11:08

Skef

Ik scheer.me

Topicstarter
Ik heb er ook heus wel een TD tussen hoor (oeps, verkeerd bovenaan, ik zie het... dom dom dom)

"Computer games don’t affect kids: I mean if Pac-Man affected us as kids, we’d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music."


Verwijderd

ik zou denken aan zoiets:

1) div kleine hoogte meegeven zodat ie de tabel niet oprekt.

2) tabel hoogte bepalen, bijvoorbeeld door transp. gif onder en boven te stoppen en daar de positie van te bepalen.

3) in je pagina.onload een functie zet die de div vergroot naar de gewenste afmetingen (en evt. dan pas zichtbaar maakt)

Nu kun je in je tabel stoppen waar je zin in hebt, in whatever lettertype je leuk vind enz. succes. :)
Pagina: 1