Changeset 29773 for other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

Timestamp:

2015-03-11T10:12:30+13:00 (9 years ago)

Author:

davidb

Message:

Changes so i) the choose-palette is a single interactive SVG csurface; 2) the JS runs more smoothly when 'started' at one of the later pages; and 3) changes to remove many of the warnings browsers produce when loading the page

File:

• other-projects/nz-flag-design/trunk/main-form/choose-canvas.html (modified) (3 diffs)

other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

@@ -32 +32 @@
             <p>If you hover the mouse over a flag size, you will be able to see some countries that currently use that ratio!</p>
             <div class="centredDiv">
-                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimentions(2, 3)" title="2:3"></div>
-                <div class="ratioDiv" id="ratio12" onclick="updateCanvasDimentions(1, 2)" title="1:2"></div>
-                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimentions(3, 5)" title="3:5"></div>
+                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div>
+                <div class="ratioDiv" style="border-width:2px;" id="ratio12" onclick="updateCanvasDimensions(1, 2)" title="1:2"></div>
+                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimensions(3, 5)" title="3:5"></div>
                 <div style="clear: both"></div>
             </div>
@@ -40 +40 @@
 
             <div class="centredDiv">
-                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimentions(10, 19)" title="10:19"></div>
-                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimentions(5, 8)" title="5:8"></div>
-                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimentions(8, 11)" title="8:11"></div>
+                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimensions(10, 19)" title="10:19"></div>
+                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimensions(5, 8)" title="5:8"></div>
+                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimensions(8, 11)" title="8:11"></div>
                 <div style="clear: both"></div>
             </div>            
@@ -52 +52 @@
             var currentRatio = "ratio12";       
             
-            function updateCanvasDimentions(height, width) {
+            function updateCanvasDimensions(height, width) {
                 // Show feedback by highlighting the chosen square
                 document.getElementById(currentRatio).style.borderColor = 'black';
+                document.getElementById(currentRatio).style.borderWidth = '1px';
                 currentRatio = "ratio" + height + width;
                 document.getElementById(currentRatio).style.borderColor = 'white';
+                document.getElementById(currentRatio).style.borderWidth = '2px';
                 
-                var design_frame = document.getElementById('design-2d-iframe');
-                var svgCanvas = design_frame.contentWindow.svgCanvas;
-                
-                // Changing the value of sizeConstant will change the size of the svg canvas without affecting the width/height ratios
-                var sizeConstant = 400;
+                // Changing the value of sizeConstant will change the
+                //  size of the svg canvas without affecting the 
+            //  width/height ratios
+
+            var sizeConstant = 400;
                 
                 var h = sizeConstant;
                 var w = (sizeConstant / height) * width;                
-                
-                flagCanvasSettings.width = w;
-                flagCanvasSettings.height = h;
-                
-                // Set the new canvas size
-                svgCanvas.setResolution(w, h);
+
+            if (typeof flagCanvasSettings !== 'undefined') {
+                  flagCanvasSettings.width = w;
+                  flagCanvasSettings.height = h;
+            }                               
             }
         </script>