Tweaks to image examples

css/main.css

@@ -41,7 +41,6 @@ div#links a {
 
 h1 a {
   font-weight: 300;
-  margin: 0 10px 0 0;
   white-space: nowrap;
 }
 
@@ -175,7 +174,7 @@ p#data {
 }
 
 p.borderBelow {
-  border-bottom: 1px solid #aaa;
+  border-bottom: 1px solid #eee;
   padding: 0 0 20px 0;
 }
 

pictureart/index.html

@@ -25,19 +25,29 @@
     <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> picture element: art&nbsp;direction</h1>
 
     <picture>
-      <source media="(min-width: 750px)" srcset="horses_large.jpg" />
-      <source media="(min-width: 500px)" srcset="horses_medium.jpg" />
-      <img src="horses_small.jpg" alt="Horses in Hawaii">
+      <source media="(min-width: 750px)" srcset="large.jpg" />
+      <source media="(min-width: 500px)" srcset="medium.jpg" />
+      <img src="small.jpg" alt="Horses in Hawaii">
     </picture>
 
-    <p>Resize the viewport: a different crop of the image is displayed at different viewport widths.</p>
+    <p>Resize the viewport: a different crop of the image is displayed at different widths, using a picture element with media queries.</p>
+
+    <p class="borderBelow">
+      Image used: <span id="imgSrc"></span><br>
+      Image natural width: <span id="imgNaturalWidth"></span>px<br>
+      Image display width: <span id="imgWidth"></span>px<br>
+      Device pixel ratio: <span id="devicePixelRatio"></span><br>
+      Viewport width: <span id="viewportWidth"></span>px<br>
+      Available screen width: <span id="availableWidth">px</span><br>
+    </p>
 
     <p>The <a href="../picturetype" title="Using the picture element with different image types">file types example</a> uses the picture element to enable the browser to choose an image depending on what file formats are supported. The <a href="../sizeswvalues" title="Using the srcset and sizes">sizes example</a> shows how to enable image choice using the srcset and sizes attributes.</p>
 
     <a href="//github.com/samdutton/simpl/blob/master/pictureart/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
 
   </div>
 
+  <script src="js/main.js"></script>
   <script src="../js/lib/ga.js"></script>
 
 </body>

picturetype/index.html

@@ -30,6 +30,7 @@ <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> picture
     </picture>
 
     <p>A WebP image will be displayed if WebP is supported, otherwise a JPEG.</p>
+
     <p>Image used: <span id="imgSrc"></span></p>
 
     <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction example</a> shows how to use the picture element to enable the browser to choose an appropriate image based on viewport width. The <a href="../sizeswvalues" title="Using the srcset and sizes">sizes example</a> shows how to enable image choice using the srcset and sizes attributes.</p>

picturetype/js/main.js

@@ -1,2 +1,13 @@
-document.querySelector('#imgSrc').textContent =
-  document.querySelector('img').currentSrc.replace(/^.*[\\\/]/, '');
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+
+img.onload = function(){
+  imgSrc.textContent =
+    img.currentSrc.replace(/^.*[\\\/]/, '');
+};
+
+// in case image already loaded -- is there a better way?
+imgSrc.textContent = img.currentSrc.replace(/^.*[\\\/]/, '');
+

sizeswvalues/index.html

@@ -32,16 +32,29 @@ <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&
 
       <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="50vw" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
 
-      <p>The sizes attribute enables the browser to choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the image display width (set to be 50% of viewport width) and screen resolution.</p>
+      <p>Try changing the viewport size.</p>
 
-      <p><a href="../srcsetwvalues" title="img element with srcset using w values, but no sizes attribute">Without the sizes attribute</a> the browser can only take into account <strong>viewport</strong> width, not image <strong>display</strong> width.</p>
+      <p>The sizes attribute enables the browser to choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the screen resolution and image display width (set to be 50% of viewport width).</p>
+
+      <p>
+        Image used: <span id="imgSrc"></span><br>
+        Image natural width: <span id="imgNaturalWidth"></span>px<br>
+        Image display width: <span id="imgWidth"></span>px<br>
+        Device pixel ratio: <span id="devicePixelRatio"></span><br>
+        Minimum acceptable image width: <span id="minimumWidth"></span>px<br>
+        Viewport width: <span id="viewportWidth"></span>px<br>
+        Available screen width: <span id="availableWidth"></span>px<br>
+      </p>
+
+      <p class="borderBelow"><a href="../srcsetwvalues" title="img element with srcset using w values, but no sizes attribute">Without the sizes attribute</a> the browser can only take into account <strong>viewport</strong> width, not image <strong>display</strong> width.</p>
 
       <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
 
       <a href="//github.com/samdutton/simpl/blob/master/sizeswvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
 
     </div>
 
+    <script src="js/main.js"></script>
     <script src="../js/lib/ga.js"></script>
 
   </body>

srcsetwvalues/index.html

@@ -32,16 +32,29 @@ <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&
 
       <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
 
+      <p>Try changing the viewport size.</p>
+
       <p>A browser that supports the srcset attribute will choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the viewport width and the screen resolution.</p>
 
-      <p>Only the <strong>viewport</strong> width is taken into account by the browser when choosing which image file to request. The <a href="../sizeswvalues" title="img element with srcset and sizes attributes">sizes example</a> enables the browser to choose the appropriate file given the <strong>display</strong> width of the image.</p>
+      <p>
+        Image used: <span id="imgSrc"></span><br>
+        Image natural width: <span id="imgNaturalWidth"></span>px<br>
+        Image display width: <span id="imgWidth"></span>px<br>
+        Device pixel ratio: <span id="devicePixelRatio"></span><br>
+        Minimum acceptable image width: <span id="minimumWidth"></span>px<br>
+        Viewport width: <span id="viewportWidth"></span>px<br>
+        Available screen width: <span id="availableWidth"></span>px<br>
+      </p>
+
+      <p class="borderBelow">In this example, only the <strong>viewport</strong> width is taken into account by the browser when choosing which image file to request. The <a href="../sizeswvalues" title="img element with srcset and sizes attributes">sizes example</a> enables the browser to choose the appropriate file given the <strong>display</strong> width of the image.</p>
 
       <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
 
       <a href="//github.com/samdutton/simpl/blob/master/srcsetwvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
 
     </div>
 
+    <script src="js/main.js"></script>
     <script src="../js/lib/ga.js"></script>
 
   </body>