Web Weather > Weather Web Cam Links

Webcam Page Code

<< < (8/9) > >>

Cutty Sark Sailor:
give that image a width at the end, after class

--- Code: ---<table style="text-align: center; width: 100%;" cellspacing="0" cellpadding="1" border="0">  <tbody>
    <tr>
      <td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
         <small>Click Image below for Larger Image</small><br>
         <img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
      </td>
--- End code ---

Phil23:
Sort of got it "Looking right with a 2nd table & a 25% margin-left.
Seems like a bit of a fudge (Space-Bar formatting like), but it shows Ok at this point.

Gotta be a more correct way.

http://weather.inverellit.com/webcams4.htm



--- Code: ---<p>Webcams will update once a minute.</p>
<table style="text-align: center; width: 50%; margin-left: 25%" border="0" cellpadding="1" cellspacing="25%">
  <tbody>
    <tr>
  <td style="width:50%;text-align:center">Esp32 Test Camera<br/>
         <small>Click Image below for Larger Image</small><br/>
         <img src="http://weather.inverellit.com/images/Esp32-Cam.jpg" id="webcam3" class="webcam">
      </td>
    </tr>
  </tbody>
</table>
<table style="text-align: center; width: 100%;" border="0" cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td style="width:50%;text-align:center">West Facing Camera<br/>
         <small>Click Image below for Larger Image</small><br/>
         <img src="http://weather.inverellit.com/images/Wcam1.jpg" id="webcam1" class="webcam">
      </td>
      <td style="width:50%;text-align:center">East Facing Camera<br/>
         <small>Click Image below for Larger Image</small><br/>
         <img src="http://weather.inverellit.com/images/Wcam2.jpg" id="webcam2" class="webcam">
      </td>
    </tr>
  </tbody>
</table>


--- End code ---

Phil23:
Do I really need 3 tables for the 3 rows; with margin-left in the 1st & 3rd?

OR can the margin-left be included in just the 1st & 3rd <tr> sections?

Cutty Sark Sailor:
You want it like this,  Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm

All you need do is add the size as I posted above:
--- Quote from: Cutty Sark Sailor on June 09, 2021, 05:31:23 PM ---give that image a width at the end, after class
--- Code: ---<table style="text-align: center; width: 100%;" cellspacing="0" cellpadding="1" border="0">  <tbody>
    <tr>
      <td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
         <small>Click Image below for Larger Image</small><br>
         <img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
      </td>
--- End code ---

--- End quote ---
and to make it responsive: change
--- Code: ---        <div id="widecontent">
--- End code ---
to
--- Code: ---        <div id="widecontent" style="max-width:100%">
--- End code ---
So that wide content div is
--- Code: ---          <div id="widecontent" style="max-width:100%">
<p>Webcams will update once a minute.</p>
<table style="text-align: center;" cellspacing="0" cellpadding="1" border="0">
  <tbody>
    <tr>
      <td colspan="2" style="width:100%;text-align:center">Esp32 Test Camera<br>
         <small>Click Image below for Larger Image</small><br>
         <img src="Phil's%20Backyard%20Weather%20Webcam_files/Esp32-Cam.jpg" id="webcam3" class="webcam" style="width:50%">
      </td>
    </tr>
    <tr>
      <td style="width:50%;text-align:center">West Facing Camera<br>
         <small>Click Image below for Larger Image</small><br>
         <img src="Phil's%20Backyard%20Weather%20Webcam_files/Wcam1.jpg" id="webcam1" class="webcam">
      </td>
      <td style="width:50%;text-align:center">East Facing Camera<br>
         <small>Click Image below for Larger Image</small><br>
         <img src="Phil's%20Backyard%20Weather%20Webcam_files/Wcam2.jpg" id="webcam2" class="webcam">
      </td>
    </tr>
  </tbody>
</table>
   
        </div>
--- End code ---

Phil23:

--- Quote from: Cutty Sark Sailor on June 09, 2021, 06:29:58 PM ---You want it like this,  Right?
https://frankfortweather.us/phil/Phil%27s%20Backyard%20Weather%20Webcam.htm

--- End quote ---

Yes that's about it, but with the Pop-ups.

Currently have progressed to Webcams5

http://weather.inverellit.com/webcams2.htm
http://weather.inverellit.com/webcams3.htm
http://weather.inverellit.com/webcams4.htm
http://weather.inverellit.com/webcams5.htm

But along the way have broken the pop-up's in 4 & 5.
East & west still work in 4, but neither in 5.

Developer mode tells me "Uncaught SyntaxError: Unexpected end of input"
, and points to the </script> line, but I can't see whats different between 5 & 2 to break it.

Also have taken note of changing to  <div id="widecontent" style="max-width:100%">

Thanks

Phil.


--- Code: ---      });
 
      function popupImage1(src){
       $("#fullWindow").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindow").dialog('open');
      }
  function popupImage2(src){
       $("#fullWindow2").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindow2").dialog('open');
      }
  function popupImage3(src){
       $("#fullWindow3").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindow3").dialog('open');
      }
  function popupImage4(src){
       $("#fullWindow4").html("<div style='height:98%;margin:0 auto;text-align:center;'><img src='"+src+"' style='height:100%'></div>");
       $("#fullWindow4").dialog('open');
      }
   </script>

--- End code ---

Edit: Found it; a paste in error, now to the other things above...

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version