JavaScript width

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

/home/joost

/home/joost

16/12/2009 16:23:00
Quote Anchor link
Beste,

Ik wil graag dmv JavaScript de breedte van een tabel aanpassen.
Het wilt alleen niet echt lukken omdat het volgens mij niet kan met procenten?
Ik heb hetvolgende script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<script type="text/javascript">
if (screen.width < 1500) {
    document.getElementById('table_projects').width = 100%;
}
else {
    alert('Screen breder dan 1500px');
}
</script>

Het probleem is dat dit niet werkt, als ik het % teken weghaal werkt het wel, maar dan worden het 100 pixels.
De <table> tag: <table width="60%" id="table_projects">

Alvast bedankt ;)
 
PHP hulp

PHP hulp

05/02/2023 02:05:56
 
Justin S

Justin S

16/12/2009 16:40:00
Quote Anchor link
Ik denk even tussen de "" tags zetten?

Wees je btw wel bewust dat je met screen.width de maximale schermbreedte ophaalt en niet die vna het browserscherm :)!
 
/home/joost

/home/joost

16/12/2009 16:44:00
Quote Anchor link
Dat merkte ik ook net, gebruik nu dus ook document.width, bedankt voor het attenderen ;)

Edit::
Ik heb de tabellen in een while- lus staan (er zijn dus meerdere tabellen met het id table_projects), maar de javascript wijzigt alleen de eerste tabel?
Huidige code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
if (document.width < 1300) {
    document.getElementById('table_projects').width = "100%";
}
if (document.width >= 1300) {
    document.getElementById('table_projects').width = "100%";
}
if (document.width > 1400) {
    document.getElementById('table_projects').width = "90%";
}
if (document.width > 1500) {
    document.getElementById('table_projects').width = "80%";
}
if (document.width > 1600) {
    document.getElementById('table_projects').width = "70%";
}
alert('Page width: '+document.width);
</script>

Verder werkt het perfect ;)
Gewijzigd op 01/01/1970 01:00:00 door /home/joost
 
/home/joost

/home/joost

18/12/2009 15:10:00
Quote Anchor link
Bump.
 
Joris van Rijn

Joris van Rijn

18/12/2009 15:36:00
Quote Anchor link
Is het niet:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById('table_projects').style.width = "80%";
 
/home/joost

/home/joost

18/12/2009 15:52:00
Quote Anchor link
Zelfde effect, alleen de eerste word veranderd.
 
/home/joost

/home/joost

19/12/2009 22:17:00
Quote Anchor link
Verder niemand een idee?
 
Stefan

Stefan

20/12/2009 01:09:00
Quote Anchor link
ID is uniek. Je pagina is dan fout gecodeerd. Geeft ze de zelfde naam met de name="" attribuut. Vervolgens getElementsByName(name) gebruiken.
getElementById, Element, dus 1.
getElementsByName, dus meerdere.

Snel vb:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
</head>
<body>
<script>
function tabelWidth(){

tables = document.getElementsByName('tabel');
for (x in tables)
  {
  tables[x].width = '75%';
  }
}
</script>
<table width="50%" height="10%" border="1px" name="tabel">
<td>
AAAAAAAAAA
</td>
</table>

<table width="50%" height="10%" border="1px" name="tabel">
<td>
AAAAAAAAAA
</td>
</table>

<table width="50%" height="10%" border="1px" name="tabel">
<td>
AAAAAAAAAA
</td>
</table>

<table width="50%" height="10%" border="1px" name="tabel">
<td>
AAAAAAAAAA
</td>
</table>

<input type="button" onclick="tabelWidth()"; value="Change!" />
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Stefan
 
/home/joost

/home/joost

20/12/2009 12:49:00
Quote Anchor link
Het is gelukt, enorm bedankt voor je hulp!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.