Søg
Avatar billede bbj Nybegynder
21. juni 2000 - 19:58 Der er 13 kommentarer og
1 løsning

Hvor høj er tabellen?

Hej..

Jeg har en tabel, som bliver oprettet dynamisk. I et af felterne har jeg et billede, som skal skaleres efter hvor høj tabellen er.
I Internet Explorer kan man gøre det blot ved at sætte billedets height="100%" - men det fungerer ikke i Netscape.
Kan nogen give et eksempel på, hvordan dette kan gøres med et javascript (hvis det altså kan gøres)?

Det siger vist sig selv, at scriptet skal virke i Netscape ;)

pft, Bjarne
Avatar billede olebole Juniormester
21. juni 2000 - 20:50 #1
<ole>
Du kan gøre sådan her og få at vide, hvor høj hele tabellen er:

<html>
<head>
<script language="JavaScript">
<!--
var ns4 = document.layers;
var ie4 = document.all;
function sig(){
    bla = ns4? document.mitDiv.document.height : document.all.mitDiv.offsetHeight
    alert(bla);
}
// -->
</script>

<style TYPE="text/css">
<!--
#mitDiv{ position: absolute; background-color:red; layer-background-color:red; }
-->
</style>
</head>
<body bgcolor=white onload=sig();>

<div id="mitDiv">
<table width=200 border=8 cellspacing=5 cellpadding=0>
  <tr>
    <td width=50 height=30>halli</td>
    <td width=50>hallo</td>
  </tr>
  <tr>
    <td width=50 height=50>halli</td>
    <td width=50>hallo</td>
  </tr>
</table>
</div>

</body>
</html>

/Vh
</bole>
Avatar billede olebole Juniormester
21. juni 2000 - 20:52 #2
Det kræver selvfølgelig, at din tabel bliver positioneret 'absolute'.
Avatar billede bbj Nybegynder
21. juni 2000 - 22:22 #3
Dit eksempel virker fint - men jeg kan ikke umiddelbart hitte ud af at tilpasse det til mit problem.

Hvis tabellen ser således ud:

<div id="mitDiv">
<table width=200 border=0>
  <tr>
    <td width=50 height=30>halli</td>
  </tr>
  <tr>
    <td width=50 height=50><img src="image.gif" width=10 height=??></td>
  </tr>
</table>
</div>

skal image.gif have højden height=bla (fra dit eksempel) - Hvordan kan jeg gøre det?
Avatar billede olebole Juniormester
22. juni 2000 - 02:45 #4
Nu er eksemplet vel ikke velvalgt, da du lige har skrevet, at din <td> skal have en højde på 50. Men jeg forstår godt problemet ;-)
Du kan kun få størrelsen på hele din tabel (idet dit <div> 'pakker' sig omkring den) - og må så kende højden på de andre <tr>'s for at kunne regne dig frem til højden af billedet.
Avatar billede bbj Nybegynder
22. juni 2000 - 10:51 #5
Ja, du har ret i at eksemplet ikke er velvalgt - det svarer heller ikke helt til det problem jeg har - jeg opdagede, at jeg havde glemt at fjerne et sæt <tr></tr>.
Jeg har kun én række i tabellen, så billedet skal altså have samme højde som tabellen. Men jeg kan ikke få scriptet til at sende værdien videre til billedet.
Avatar billede olebole Juniormester
22. juni 2000 - 11:46 #6
<html>
<head>
<script language="JavaScript">
<!--
var ns4 = document.layers;
var ie4 = document.all;

var bla;
function sig(){
    bla = ns4? document.mitDiv.document.height : document.all.mitDiv.offsetHeight
}
// -->
</script>
<style TYPE="text/css">
<!--
#mitDiv{ position: absolute; background-color:red; layer-background-color:red; }
-->
</style>
</head>
<body bgcolor=white onload=sig();>
<div id="mitDiv">
<table width=200 border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo</td>
    <td><script language="JavaScript">document.write("img src=din.gif width=50 height="+bla);</script></td>
  </tr>
</table>
</div>
</body>
</html>

/Vh
Avatar billede bbj Nybegynder
22. juni 2000 - 12:33 #7
Resultatet af din kode bliver følgende:

"img src=din.gif width=50 height=undefined"

'bla' kan tilsyneladende ikke læses udenfor sig-funktionen. Skal (kan) variablen gøres public på en eller anden måde, eller kan man få sig() til at returnere værdien?


function sig(){
    bla = ns4? document.mitDiv.document.height : document.all.mitDiv.offsetHeight;
    return bla;
}

Dette returnerer 0.

Hmm.. jeg begynder vist at blive lidt besværlig.. ;)
Avatar billede olebole Juniormester
22. juni 2000 - 12:47 #8
Ehhh...klart - Undskyld!  :o))

<html>
<head>
<script language="JavaScript">
<!--
var ns4 = document.layers;
var ie4 = document.all;
var bla;
function howBig(){
    bla = ns4? document.mitDiv.document.height : document.all.mitDiv.offsetHeight
}
// -->
</script>
<style TYPE="text/css">
<!--
#mitDiv{ position: absolute; background-color:red; layer-background-color:red; }
-->
</style>
</head>
<body bgcolor=white>
<div id="mitDiv">
<table width=200 border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo</td>
    <td><script language="JavaScript">howBig();document.write("img src=din.gif width=50 height="+bla);</script></td>
  </tr>
</table>
</div>
</body>
</html>

...så skulle det gerne køre.
/Vh
Avatar billede bbj Nybegynder
22. juni 2000 - 13:08 #9
Problemet er vist mere komplekst end som så. Hvis ikke funktionen howBig() bliver kaldt i <body onload> returnerer den 0.
<body onload> bliver udført når hele dokumentet er indlæst, mens scriptet her bliver kaldt mens tabellen er ved at blive oprettet - altså før dens størrelse ligger fast. (Tror jeg!)

Tilsyneladende er det ikke helt let, så der er 100 points mere, hvis det kommer til at fungere..

- Bjarne
Avatar billede olebole Juniormester
23. juni 2000 - 08:17 #10
Næ, det tror da pokker! Jeg prøver at få højden af et <div>, der ikke er skrevet færdigt :-P
En workaround er, først at udskrive en 'dummy' i et usynligt lag - aftaste dens højde, for derefter at udskrive billedet. Det kunne se sådan ud:

<html>
<head>
<script language="JavaScript">
<!--
var ns4 = document.layers;
var ie4 = document.all;
var bla;
function howBig(){
    bla = ns4? document.mitDiv.document.height : document.all.mitDiv.offsetHeight
}
// -->
</script>
<style TYPE="text/css">
<!--
#mitDiv{ position: absolute; visibility:hidden }
-->
</style>
</head>
<body bgcolor=white>

<div id="mitDiv">
<table width=200 border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

<table width=200 border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo</td>
    <td><script language="JavaScript">howBig();document.write("<img src=din.gif width=50 height="+bla+">");</script></td>
  </tr>
</table>

</body>
</html>

/Vh
Avatar billede bbj Nybegynder
23. juni 2000 - 17:33 #11
Det er en lidt 'klodset' løsning, især hvis der står meget tekst i tabellen - men det virker, så du får dine points.

Tak for hjælpen :o)

- Bjarne
Avatar billede olebole Juniormester
23. juni 2000 - 20:06 #12
Jeg ved det...men det er nu engang svært at bestemme højden på juletræet, hvis man ikke har besluttet sig for højden på tagrejsningen endnu :-))

Hvis du har sat dine tekst-størrelser med CSS i 'px' - IKKE i 'pt' (!) - kunne du vel tælle linier, hvilket ikke kan være svært, når det er database-udtræk, du udskriver.
Så kunne du gange antallet af linier med det antal pixels en linie og et liniemellemrum fylder og sætte billedets højde til denne højde.

Prøv at lave eksemplet ovenfor med den rigtige tekst-størrelse og 10 linier. Du skal så lave en alert i slutningen af 'howBig()', der siger:
    alert(bla);
...så ved du, hvor høj 10 linier er - og såhhhh...  :o))

Prøv dig lidt frem. I programmering er det meget vigtigt at kunne den rette syntaks - men endnu vigtigere at kunne tænke de 'skæve' tanker!

/Vh
Avatar billede bbj Nybegynder
23. juni 2000 - 20:55 #13
Ideen med at tælle linier kunne i princippet godt fungere. Problemet er bare, at indholdet af tabellen ikke er særlig homogent. Tabellen bliver oprettet i et php script, som skabelon for en række sider, der indeholder forskellige skriftstørrelser, flere tabeller og billeder. (Billedet det hele drejer sig om, skal fungere som skillelinie mellem sidens indhold og en menu.)

Desværre er mine evner indenfor javascript og css ikke så store, at jeg kan føre alt for mange af de 'skæve' tanker ud i livet.. :)

- Bjarne
Avatar billede olebole Juniormester
26. juni 2000 - 06:27 #14
Prøv, om ikke dette kan hjælpe dig på vej:

<html>
<head>
<script language="JavaScript">
<!--
// Afstand fra tabel til billede
var myOffset = 10;
// billed bredde
var picWidth = 15;
function checkClient() {
    var brow = navigator.appName;
    if (brow=="Netscape") this.brow = "ns";
    else if (brow=="Microsoft Internet Explorer") this.brow = "ie";
    this.version = navigator.appVersion;
    this.vers = parseInt(this.version);
    this.ns = (this.brow=="ns" && this.vers>=4);
    this.ns4 = (this.brow=="ns" && this.vers==4);
    this.ie = (this.brow=="ie" && this.vers>=4);
    this.ie4 = (this.version.indexOf('MSIE 4')>0);
}
br = new checkClient()

function howBig(){
// Objekterne defineres og deres størrelser findes
    if (br.ns) {
        theObj = (br.ns4)? eval("document.layers['mitDiv']") : eval("document.getElementById('mitDiv').style");
        thePicObj = (br.ns4)? eval("document.layers['picDiv']") : eval("document.getElementById('picDiv').style");
        myWidth = theObj.clip.width;
        myHeight = theObj.clip.height;
    }
    else if (br.ie) {
        theObj = eval("document.all['mitDiv']");
        thePicObj = eval("document.all['picDiv']");
        myWidth = (br.ie4)? theObj.style.pixelWidth : theObj.offsetWidth;
        myHeight = (br.ie4)? theObj.style.pixelHeight : theObj.offsetHeight;
    }
// Billedet skrives ind i <div>'et og <div>'et flyttes
    astr = "<img src='baggrund.jpg' height='"+myHeight+"' width='"+picWidth+"'>";
    if (br.ns) {
        document.layers['picDiv'].document.open();
        document.layers['picDiv'].document.write(astr);
        document.layers['picDiv'].document.close();
        thePicObj.left = theObj.left+myWidth+myOffset;
    }else if (br.ie) {
        document.all['picDiv'].innerHTML = astr;
        thePicObj.style.pixelLeft = theObj.style.pixelLeft+myWidth+myOffset;
    }
   
}
// -->
</script>
<style TYPE="text/css">
<!--
#mitDiv{ position: absolute; left:0; visibility:visible }
#picDiv{ position: absolute; left:0; visibility:visible }
-->
</style>
</head>
<body bgcolor=white onload="howBig();">
<div id="mitDiv">
<table border=0 cellspacing=0 cellpadding=0>
  <tr>
    <td>halli<br>hallo<br>halli<br>hallo<br>halli-hallo<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo<br>halli<br>hallo</td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
<div id="picDiv"></div>
</body>
</html>

Mon ikke du kan finde ud af også at lægge menuen i et <div> og placere det?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 13:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
I går 11:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
14/0523:24 Google sheets beregning udfra dato Af rickiegrayholm i Office & Kontorpakker
14/0518:09 Outlook Classic, lukker ikke Af mort1 i E-mail programmer
13/0520:48 Bred buet skærm vs. 2 skærme Af Nanarsi i Skærme
White papers
Flere white papers »