Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
So I'm looking to make a webpage the refreshes ever minute and displays four jpeg images from four different IP addresses. Ideally this would be a basic grid with two on top and two on bottom and sized to 50% height and width based on the page display size. The images should retain their orientation and aspect ratio too.
I know this is doable and some of your can slap the code down without even thinking about it... that is why I'm asking here. I would have to really struggle to figure out how to do this. Bonus points to you if you can do it in one file/page. In my case these are going to be cameras around my house so the IPs would be internal but something like http://10.10.10.21/snap.jpg, 10.10.10.22/snap.jpg... etc. Louis L'Amour, “To make democracy work, we must be a nation of participants, not simply observers. One who does not vote has no right to complain.” Visit our archived Minecraft world! | Maybe someday I'll proof read, until then deal with it. |
quote |
‽
|
Here's a start, but the sizing isn't right yet. https://codepen.io/chucker/pen/LYbXRxa
|
quote |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
Thank you! That was the kick start I needed. I have something that is working but the height needs to shrink so everything stays in the same web page view without scrolling:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="5">
<style>
div {
width: auto;
text-align: center;
padding: 2px;
}
container {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
height: auto;
}
img {
max-width: 50%;
max-height: 50%;
vertical-align: middle;
height: auto;
}
</style>
</head>
<div class="container">
<div class="img"><img src="http://10.10.10.21/snap.jpeg"><img src="http://10.10.10.22/snap.jpeg"></div>
<div class="img"><img src="http://10.10.10.23/snap.jpeg"><img src="http://10.10.10.24/snap.jpeg"></div>
</div> Louis L'Amour, “To make democracy work, we must be a nation of participants, not simply observers. One who does not vote has no right to complain.” Visit our archived Minecraft world! | Maybe someday I'll proof read, until then deal with it. Last edited by turtle : 2021-03-09 at 15:29. |
quote |
Posting Rules | Navigation |
|
Thread Tools | |
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Web design / html coding | Sketch | Programmer's Nook | 11 | 2012-11-24 10:30 |
Displaying Trackbacks | Kraetos | Programmer's Nook | 11 | 2006-11-30 13:58 |
Safari not displaying PDFs | SledgeHammer | Genius Bar | 6 | 2006-10-07 10:57 |
Quotes and html entities in MySql and HTML | nassau | Programmer's Nook | 4 | 2006-10-02 03:39 |
pictures not displaying! | Mommy8me | Genius Bar | 9 | 2006-06-08 22:08 |