Søg
Avatar billede supermand69 Nybegynder
08. februar 2004 - 14:18 Der er 40 kommentarer og
1 løsning

bredde på td

Hvordan kan jeg få fat i bredden på en td??

Det er fordi jeg har et billede i en td der ikke må være større end selve td'en...
Avatar billede skovenborg Nybegynder
08. februar 2004 - 14:25 #1
Hvis der ikke direkte står nogen bredde - altså hverken i cellen eller stylesheetet - så kan du få fat i den sådan her:
<table>
<tr>
<td onclick="alert(this.offsetWidth);">ffdf</td>
</tr>
</table>
Avatar billede skovenborg Nybegynder
08. februar 2004 - 14:29 #2
hov så ikke lige det sidste ;-)

Det du kan gøre er at give billedet og cellen en ID og derefter gøre sådan her:
<script type="text/javascript">
function getWidth() {
    if (document.getElementById('bld').offsetWidth > document.getElementById('celle').width) {
        document.getElementById('bld').width = document.getElementById('celle').width;
    }
}
</script>

<table id="tabel">
<tr>
<td width="100" id="celle"><img src="logo.png" id="bld"></td>
</tr>
</table>
Avatar billede skovenborg Nybegynder
08. februar 2004 - 14:35 #3
av, det burde egentlig hellere være:
if (document.getElementById('bld').width > document.getElementById('celle').width) {
        document.getElementById('bld').width = document.getElementById('celle').width;
}
Avatar billede supermand69 Nybegynder
08. februar 2004 - 23:17 #4
hvordan kan jeg så lave den hvis jeg skal bruge den flere steder??

tænker på hvordan jeg kalder den??

eks.
getWidth(bld, celle);
Avatar billede thesurfer Nybegynder
08. februar 2004 - 23:19 #5
Prøv:

<script type="text/javascript">
function getWidth(bld, celle) {
    if (document.getElementById(bld).offsetWidth > document.getElementById(celle).width) {
        document.getElementById(bld).width = document.getElementById(celle).width;
    }
}
</script>
Avatar billede supermand69 Nybegynder
08. februar 2004 - 23:23 #6
jamen jeg ved ikke helt hvordan jeg skal sætte det op??

<script type="text/javascript">
get_width('pic', 'pic_table');
</script>

<table id="pic_table" width="400">
<img id="pic">
Avatar billede thesurfer Nybegynder
08. februar 2004 - 23:29 #7
<script type="text/javascript">
function getWidth(bld, celle) {
    if (document.getElementById(bld).offsetWidth > document.getElementById(celle).width) {
        document.getElementById(bld).width = document.getElementById(celle).width;
    }
}
</script>

<table id="tabel">
<tr>
<td width="100" id="celle" onclick="get_width('celle','bld');"><img src="logo.png" id="bld"></td>
</tr>
</table>
Avatar billede skovenborg Nybegynder
08. februar 2004 - 23:31 #8
du skal jo nok gøre på et tidspunkt hvor du ved billederne og tabellen er loadet færdig, så jeg vil foreslå at du gør sådan her:
<body onload="get_width('pic', 'pic_table');">
<table>
<tr>
  <td id="pic_table" width="150">
  <img id="pic" src="bld.png">
  </td>
</table>
</body>

Funktionen er jo direkte til for at aflæse cellens størrelse.
Avatar billede skovenborg Nybegynder
08. februar 2004 - 23:31 #9
sorry - skulle nok ha' reloadet først ;-)
Avatar billede supermand69 Nybegynder
08. februar 2004 - 23:42 #10
jeg kan stadig ikke få det til at virke?!

<body onload="get_width('pic', 'pic_table');">

<table id="pic_table" width="400">
<img id="pic">
Avatar billede supermand69 Nybegynder
08. februar 2004 - 23:59 #11
hmmm... strange... nu virker det pludselig...
Avatar billede supermand69 Nybegynder
09. februar 2004 - 00:00 #12
skovenborg -->
det var vist dig der var først ude og som kom med noget jeg kunne bruge...

lav et svar :)
Avatar billede skovenborg Nybegynder
09. februar 2004 - 00:09 #13
jamen værsågod :-)
Avatar billede skovenborg Nybegynder
09. februar 2004 - 00:15 #14
og tak for point :-)
Avatar billede supermand69 Nybegynder
09. februar 2004 - 01:27 #15
jeg har lige et lille tillægs spørgsmål :)

hvis nu jeg har flere billeder på siden... hvad så?? eller der slet ingen billeder er??

eks.
<table id="pic_table">
<img id="pic[3]">
<img id="pic[64]">

hvordan kommer min function så til at se ud??
Avatar billede skovenborg Nybegynder
09. februar 2004 - 01:45 #16
tænker du på noget i den her stil:
<script type="text/javascript">
function resizePics(tbl) {
    var imgArr = document.getElementById(tbl).getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        if (imgArr[i].width > imgArr[i].parentNode.width) {
              imgArr[i].width = imgArr[i].parentNode.width;
        }
    }
}
</script>

<body onload="resizePics('pic_table');">
<table id="pic_table">
<tr>
<td width="100">
<img id="pic[3]" src="bld1.png">
</td>
<td width="50">
<img id="pic[64]" src="bld2.png">
</td>
</tr>
</table>

ID'en er i dette tilfælde ligegyldig - medmindre du gerne vil bruge den oprindelige funktion.
Avatar billede skovenborg Nybegynder
09. februar 2004 - 01:47 #17
funktionen kræver dog at billedet er direkte inde i en celle med en bestemt bredde - ikke noget med at sætte den ind i et link-element eller andet. Så skal den laves lidt om (i grunden skal du bare tilføje et par .parentNode efter det oprindelige .parentNode i funktionen).
Avatar billede supermand69 Nybegynder
09. februar 2004 - 10:02 #18
hmm.... når siden er færdig med at loade bliver bredden på billedet 0 (?)
Avatar billede supermand69 Nybegynder
09. februar 2004 - 10:20 #19
- og igen... kan man så ikke gøre sådan at den tjekker om der findes en table med id="pic_table" ? :)

altså i selve functionen... så man bare kan lave den onload i alle body's
Avatar billede supermand69 Nybegynder
09. februar 2004 - 12:00 #20
jeg er kommet frem til følgende, men når den har loaded billedet bliver width sat til 0

function pic_width(tbl)
{
    if(elm = document.getElementById(tbl))
    {
        var img_arr = elm.getElementsByTagName('img');
        for(i = 0; i < img_arr.length; i++)
        {
            if(img_arr[i].width > img_arr[i].parentNode.width) img_arr[i].width = img_arr[i].parentNode.width;
        }
    }
}
Avatar billede skovenborg Nybegynder
09. februar 2004 - 12:43 #21
altså tanken var at du _skal_ sætte en bredde på cellen (med width=et eller andet). Hvis cellen ikke har en bestemt bredde vil billedet som standard bruge mere plads end den måske skulle have lov til - og scriptet kan jo ikke selv finde ud af hvor bred den skal være.

men jeg kan godt se problemmet, så her er en lidt nyere udgave:
<script type="text/javascript">
function resizePics(tbl) {
    if (document.getElementById(tbl)) {
    var imgArr = document.getElementById(tbl).getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        if (imgArr[i].width > imgArr[i].parentNode.width && imgArr[i].parentNode.width > 0) {
              imgArr[i].width = imgArr[i].parentNode.width;
        }
    }
    }
}
</script>

Hvis du gerne også vil bruge CSS til at bestemme bredden må du lige sige til...
Avatar billede skovenborg Nybegynder
09. februar 2004 - 12:45 #22
nåja, man kunne også skrive:
if (elm = document.getElementById(tbl)) osv.
Det var faktisk en bedre idé :-)
Avatar billede skovenborg Nybegynder
09. februar 2004 - 12:53 #23
nej, hva' skidt jeg gør det alligevel:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        bredde = (imgArr[i].parentNode.style.width) ? parseInt(imgArr[i].parentNode.style.width) : imgArr[i].parentNode.width;
        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>
Nu kan du også bruge stylesheets (bare hver opmærksom på at scriptet forventer at du har angivet det i pixels.
Avatar billede supermand69 Nybegynder
09. februar 2004 - 13:03 #24
jamen jeg har sat bredde på min table...

<table id="pic_table" width="100%">
<table id="pic_table" width="400">

jeg bruger begge dele men lige lidt hjælper det...
Avatar billede supermand69 Nybegynder
09. februar 2004 - 13:05 #25
hvad mener du med at bruge CSS??

bliver bredden så bare sat i en style??
Avatar billede skovenborg Nybegynder
09. februar 2004 - 13:30 #26
det cellen jeg mente du skulle sætte bredden på - ikke tabellen. Sådan har jeg forstået dit spørgsmål i hvert fald. Din HTML skulle meget gerne se sådan ud i stedet:
<table id="pic_table" width="400">
<tr>
<td width="400">
<img src="bld1.png"> <!-- Dette billede må højest blive 400 pixels bred, da cellen også er det -->
</td>
</tr>
</table>

Ja, jeg tænkte du måske kunne finde på at sætte bredden med en style - altså style="width:400px;".
Avatar billede supermand69 Nybegynder
09. februar 2004 - 13:33 #27
ok... kan man ikke lave funktionen om så man kan sætte bredden på selve <table> tag'et??

bruger ikke CSS til at sætte bredden med
Avatar billede skovenborg Nybegynder
09. februar 2004 - 13:41 #28
dvs. så du kan gøre noget i den her stil:
<table id="pic_table" width="400">
<tr>
<td>
<img id="pic[3]" src="bld.png">
</td>
</tr>
</table>

Jo, så skal du bare tilføje et par parentNode: (har også lige slettet muligheden for at bruge CSS)
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {
        bredde = imgArr[i].parentNode.parentNode.parentNode.parentNode.width;
        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>
Avatar billede skovenborg Nybegynder
09. februar 2004 - 13:42 #29
ad, det var da dumt gjort. Du kan jo ligeså godt gøre sådan her:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    bredde = document.getElementById(tbl).width;
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {

        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>

En lille tanketorsk fra min side ;-)
Avatar billede supermand69 Nybegynder
09. februar 2004 - 13:49 #30
tak... nu virker det... :)

tillader mig lige at ændre lidt på det igen :p

function pic_width(tbl)
{
    if(elm = document.getElementById(tbl))
    {
        tbl_width = elm.width;
        var img_arr = elm.getElementsByTagName('img');
        for(i = 0; i < img_arr.length; i++)
        {
            if(img_arr[i].width > tbl_width) img_arr[i].width = tbl_width;
        }
    }
}
Avatar billede skovenborg Nybegynder
09. februar 2004 - 13:53 #31
LOL - du har ret endnu engang. Godt du selv kan se sådan noget :-)
Avatar billede supermand69 Nybegynder
09. februar 2004 - 13:59 #32
hehe... men øv...

hvis man sætter width="100%" kan den ikke finde ud af det??

kan man afhjælpe problemet??
Avatar billede skovenborg Nybegynder
09. februar 2004 - 17:37 #33
hvad havde du tænkt dig at der skulle ske hvis den stod på 100%??? Skal billedet udvides eller bare være som den plejer?
Avatar billede supermand69 Nybegynder
09. februar 2004 - 17:48 #34
så skulle billedet stadig have den samme bredde som min table...

men det kan måske ikke lade sig gøre?!
Avatar billede supermand69 Nybegynder
09. februar 2004 - 18:03 #35
man kan måske ikke finde bredden på en table der er width="100%" ??
Avatar billede skovenborg Nybegynder
09. februar 2004 - 18:03 #36
det vil sige billedet skal fylde hele cellen - troede kun den skulle ændre størrelse hvis billedet blev for stort...
Avatar billede skovenborg Nybegynder
09. februar 2004 - 18:10 #37
hvis vi går ud fra at billedet kun skal resizes når det fylder mere end tabellens egentlige bredde, så kan man til nøds godt gøre sådan her:
<script type="text/javascript">
function resizePics(tbl) {
    if (elm = document.getElementById(tbl)) {
    temp_bredde = elm.width;
    bredde = (temp_bredde.toString().indexOf('%') != -1) ? Math.round(elm.parentNode.offsetWidth/100*parseInt(temp_bredde)) : temp_bredde;
    var imgArr = elm.getElementsByTagName("IMG");
    for (i=0;i<imgArr.length;i++) {

        if (imgArr[i].width > bredde && bredde > 0) {
              imgArr[i].width = bredde;
        }
    }
    }
}
</script>

Det virker nok bedst hvis du tabellen ligger direkte inde i BODY-tagget - men kan til nøds også bruges på andet.
Avatar billede supermand69 Nybegynder
09. februar 2004 - 18:16 #38
det skal også kun ændre størrelse hvis det er større en selve cellen/tablen...

det er fordi nogen steder er min pic_table ikke angivet i px men i %
Avatar billede skovenborg Nybegynder
09. februar 2004 - 19:42 #39
okay - du kan prøve det jeg foreslog før og se hvordan det virker. Det er umiddelbart den bedste løsning jeg kan komme på...
Avatar billede roenving Novice
10. februar 2004 - 12:23 #40
>>skovenborg

-- har du ikke tænkt på at bruge onload på billederne ?-)
Avatar billede skovenborg Nybegynder
10. februar 2004 - 12:37 #41
nææ, tænkte man ligeså godt kunne ordne det hele i en mundfuld. Men det kunne da godt lade sig gøre på den måde ;-)
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 15:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
16/0812:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
15/0811:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
White papers
Flere white papers »