I have a number of links that I want to display in table format. I have written some javascript to have a good number of links in each row, depending on the width of the window. This works well when the page is loaded, but if the width is adjusted after the page loads, it won't adjust the layout for the new width. How can I have the table re-adjust itself if the page changes width?
Please excuse the length of code. I wanted to leave a number of entries in so you can see the effect. Each entry is the same code.
You will see in the code that I have tried to simply refresh the page if the width changes, but this doesn't seem to work. onResize="window.location.reload()"
<html>
<head>
<title>Home</title>
<style>
table {
margin: auto;
table-layout: fixed;
width: 100%;
margin-left: 0%;
text-align:center;
}
td {
vertical-align: top;
}
.thumbImg {
margin: auto;
width:100%;
width: 140px;
height: 140px;
background-position: center center;
background-repeat: no repeat;
background-size: cover;
}
.descript {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body onResize="window.location.reload()">
<div>
<script>
var i = 0 ;
var vwidth = window.innerWidth;
var resultsPerRow = Math.floor(vwidth / 170);
</script>
<br/>
<table>
<tr>
<td><a href="Homepage_content/101.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">101</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/102.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">102</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/103.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">103</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/104.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">104</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/201.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">201</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/202.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">202</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/203.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">203</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/204.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">204</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/301.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">301</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/302.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">302</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/303.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">303</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/304.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">304</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/401.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">401</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/402.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">402</span>
<br>
</a>
</td>
<script>
i++;
if (i % resultsPerRow == 0) {
document.write("</tr><td><br></td><tr>");
}
</script>
<td><a href="Homepage_content/403.html"><div class="thumbImg" style="background-image: url(https://images.vexels.com/media/users/3/140043/isolated/preview/0fe76858c0dd549590adafa901657c1b-delicious-metallic-button-by-vexels.png);">
</div>
<br>
<span class="descript">403</span>
<br>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>Thanks @theblackips for your contribution - this is a very helpful technique. I ended up going with a jquery approach to get the layout I wanted. I used jquery.load to insert the contents of an external file into the table tag. Each external file has the correct layout given the width of the window.
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="Homepage_content/jquery.min.js"></script>
<style>
table {
margin: auto;
table-layout: fixed;
width: 100%;
margin-left: 0%;
text-align:center;
}
td {
vertical-align: top;
}
.thumbImg {
margin: auto;
width:100%;
width: 140px;
height: 140px;
background-position: center center;
background-repeat: no repeat;
background-size: cover;
}
.descript {
font-size: 20px;
font-weight: bold;
}
</style>
<script>
function Reloader() {
var vwidth = window.innerWidth;
if (vwidth <= 340){
$('#links').load('Homepage_content/table1.html');
}
else if (vwidth <= 510){
$('#links').load('Homepage_content/table2.html');
}
else if (vwidth <= 680){
$('#links').load('Homepage_content/table3.html');
}
else if (vwidth <= 850){
$('#links').load('Homepage_content/table4.html');
}
else if (vwidth > 1020){
$('#links').load('Homepage_content/table5.html');
}
}
</script>
</head>
<body onLoad="Reloader()" onResize="Reloader()">
<img src="Homepage_content/bbg.jpg" id="fauxbg"/>
<div>
<br/>
<table id="links">
</table>
</div>
</body>
</html>