JavaScript width
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)
1
2
3
4
5
6
7
8
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>
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 ;)
Wees je btw wel bewust dat je met screen.width de maximale schermbreedte ophaalt en niet die vna het browserscherm :)!
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:
Verder werkt het perfect ;)
Huidige code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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>
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
Code (php)
1
document.getElementById('table_projects').style.width = "80%";
getElementById, Element, dus 1.
getElementsByName, dus meerdere.
Snel vb:
Code (php)
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
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>
<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