PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
/

JavaScript width

Door /home/joost op 16-12-2009 16:23
1.644 views
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:

<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 ;)
Justin S
16-12-2009 16:40
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
16-12-2009 16:44
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:
<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 ;)
Joris van Rijn
18-12-2009 15:36
Is het niet:


document.getElementById('table_projects').style.width = "80%";
/ /home/joost
18-12-2009 15:52
Zelfde effect, alleen de eerste word veranderd.
/ /home/joost
19-12-2009 22:17
Verder niemand een idee?
S Stefan
20-12-2009 01:09
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:

<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>
/ /home/joost
20-12-2009 12:49
Het is gelukt, enorm bedankt voor je hulp!

Reageren

Inloggen om te reageren