diff options
| -rw-r--r-- | emcclib.js | 22 | ||||
| -rwxr-xr-x | html/jspage.pl | 29 |
2 files changed, 25 insertions, 26 deletions
@@ -525,18 +525,20 @@ mergeInto(LibraryManager.library, { * back end turns out to want one. */ js_canvas_make_statusbar: function() { - var statustd = document.getElementById("statusbarholder"); + var statusholder = document.getElementById("statusbarholder"); statusbar = document.createElement("div"); statusbar.style.overflow = "hidden"; - statusbar.style.width = onscreen_canvas.width - 4; + statusbar.style.width = (onscreen_canvas.width - 4) + "px"; + statusholder.style.width = onscreen_canvas.width + "px"; statusbar.style.height = "1.2em"; + statusbar.style.textAlign = "left"; statusbar.style.background = "#d8d8d8"; statusbar.style.borderLeft = '2px solid #c8c8c8'; statusbar.style.borderTop = '2px solid #c8c8c8'; statusbar.style.borderRight = '2px solid #e8e8e8'; statusbar.style.borderBottom = '2px solid #e8e8e8'; statusbar.appendChild(document.createTextNode(" ")); - statustd.appendChild(statusbar); + statusholder.appendChild(statusbar); }, /* @@ -560,8 +562,10 @@ mergeInto(LibraryManager.library, { js_canvas_set_size: function(w, h) { onscreen_canvas.width = w; offscreen_canvas.width = w; - if (statusbar !== null) - statusbar.style.width = w - 4; + if (statusbar !== null) { + statusbar.style.width = (w - 4) + "px"; + document.getElementById("statusbarholder").style.width = w + "px"; + } onscreen_canvas.height = h; offscreen_canvas.height = h; @@ -587,15 +591,15 @@ mergeInto(LibraryManager.library, { // Now create a form which sits on top of that in turn. dlg_form = document.createElement("form"); - dlg_form.style.width = window.innerWidth * 2 / 3; + dlg_form.style.width = (window.innerWidth * 2 / 3) + "px"; dlg_form.style.opacity = 1; dlg_form.style.background = '#ffffff'; dlg_form.style.color = '#000000'; dlg_form.style.position = 'absolute'; dlg_form.style.border = "2px solid black"; - dlg_form.style.padding = 20; - dlg_form.style.top = window.innerHeight / 10; - dlg_form.style.left = window.innerWidth / 6; + dlg_form.style.padding = "20px"; + dlg_form.style.top = (window.innerHeight / 10) + "px"; + dlg_form.style.left = (window.innerWidth / 6) + "px"; dlg_form.style["z-index"] = 100; var title = document.createElement("p"); diff --git a/html/jspage.pl b/html/jspage.pl index 376d39a..ae775ec 100755 --- a/html/jspage.pl +++ b/html/jspage.pl @@ -57,6 +57,7 @@ EOF } print $outpage <<EOF; +<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ASCII" /> @@ -82,23 +83,16 @@ ${unfinishedpara} <input type="button" id="random" value="Enter random seed"> <select id="gametype"></select> </p> -<p align=center> - <table cellpadding="0" cellspacing="0"> - <tr> - <td> - <canvas id="puzzlecanvas" width="1" height="1" tabindex="1"> - </td> - <tr> - <td id="statusbarholder"> - </td> - </tr> - </table> -</p> -<p align=center> - Link to this puzzle: - <a id="permalink-desc">by game ID</a> - <a id="permalink-seed">by random seed</a> -</p> +<div align=center> + <canvas style="display: block" id="puzzlecanvas" width="1px" height="1px" tabindex="1"> + </canvas> + <div id="statusbarholder" style="display: block"> + </div> + <p> + Link to this puzzle: + <a id="permalink-desc">by game ID</a> + <a id="permalink-seed">by random seed</a> + </p> </div> <div id="apology"> Sorry, this Javascript puzzle doesn't seem to work on your web @@ -106,6 +100,7 @@ browser. Perhaps you have Javascript disabled, or perhaps your browser doesn't provide a feature they depend on. These puzzles have been successfully run in Firefox 19 and Chrome 25. </div> +</div> <hr> ${instructions} |