zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 16:05:44 -07:00
Code Issues Packages Projects Releases Wiki Activity

Assorted HTML/CSS fiddlings to make things work better in IE. I've

Browse Source 
added a trivial doctype (IE complained without it), but that caused a
gap to appear between the puzzle and the status bar, so I tinkered a
bit more and ended up removing the <table> completely (no great loss)
as well as adding display:block to the canvas and explicitly setting
the width of not only the status bar div but also its parent div.
Meanwhile, I'm putting the "px" on the end of a lot of properties I
set from JS, because IE complains about that too if I don't.

[originally from svn r9809]
This commit is contained in:
Simon Tatham
2013-04-05 15:49:25 +00:00
parent 7479c2882d
commit 5dc559c8be
2 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
emcclib.js
View File

@ -525,18 +525,20 @@ mergeInto(LibraryManager.library, {
* back end turns out to want one. * back end turns out to want one.
*/ */
js_canvas_make_statusbar: function() { js_canvas_make_statusbar: function() {
var statustd = document.getElementById("statusbarholder"); var statusholder = document.getElementById("statusbarholder");
statusbar = document.createElement("div"); statusbar = document.createElement("div");
statusbar.style.overflow = "hidden"; 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.height = "1.2em";
statusbar.style.textAlign = "left";
statusbar.style.background = "#d8d8d8"; statusbar.style.background = "#d8d8d8";
statusbar.style.borderLeft = '2px solid #c8c8c8'; statusbar.style.borderLeft = '2px solid #c8c8c8';
statusbar.style.borderTop = '2px solid #c8c8c8'; statusbar.style.borderTop = '2px solid #c8c8c8';
statusbar.style.borderRight = '2px solid #e8e8e8'; statusbar.style.borderRight = '2px solid #e8e8e8';
statusbar.style.borderBottom = '2px solid #e8e8e8'; statusbar.style.borderBottom = '2px solid #e8e8e8';
statusbar.appendChild(document.createTextNode(" ")); statusbar.appendChild(document.createTextNode(" "));
statustd.appendChild(statusbar); statusholder.appendChild(statusbar);
}, },
/* /*
@ -560,8 +562,10 @@ mergeInto(LibraryManager.library, {
js_canvas_set_size: function(w, h) { js_canvas_set_size: function(w, h) {
onscreen_canvas.width = w; onscreen_canvas.width = w;
offscreen_canvas.width = w; offscreen_canvas.width = w;
if (statusbar !== null) if (statusbar !== null) {
statusbar.style.width = w - 4; statusbar.style.width = (w - 4) + "px";
document.getElementById("statusbarholder").style.width = w + "px";
}
onscreen_canvas.height = h; onscreen_canvas.height = h;
offscreen_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. // Now create a form which sits on top of that in turn.
dlg_form = document.createElement("form"); 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.opacity = 1;
dlg_form.style.background = '#ffffff'; dlg_form.style.background = '#ffffff';
dlg_form.style.color = '#000000'; dlg_form.style.color = '#000000';
dlg_form.style.position = 'absolute'; dlg_form.style.position = 'absolute';
dlg_form.style.border = "2px solid black"; dlg_form.style.border = "2px solid black";
dlg_form.style.padding = 20; dlg_form.style.padding = "20px";
dlg_form.style.top = window.innerHeight / 10; dlg_form.style.top = (window.innerHeight / 10) + "px";
dlg_form.style.left = window.innerWidth / 6; dlg_form.style.left = (window.innerWidth / 6) + "px";
dlg_form.style["z-index"] = 100; dlg_form.style["z-index"] = 100;
var title = document.createElement("p"); var title = document.createElement("p");

23
html/jspage.pl
View File

@ -57,6 +57,7 @@ EOF
} }
print $outpage <<EOF; print $outpage <<EOF;
<!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" /> <meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
@ -82,23 +83,16 @@ ${unfinishedpara}
<input type="button" id="random" value="Enter random seed"> <input type="button" id="random" value="Enter random seed">
<select id="gametype"></select> <select id="gametype"></select>
</p> </p>
<p align=center> <div align=center>
<table cellpadding="0" cellspacing="0"> <canvas style="display: block" id="puzzlecanvas" width="1px" height="1px" tabindex="1">
<tr> </canvas>
<td> <div id="statusbarholder" style="display: block">
<canvas id="puzzlecanvas" width="1" height="1" tabindex="1"> </div>
</td> <p>
<tr>
<td id="statusbarholder">
</td>
</tr>
</table>
</p>
<p align=center>
Link to this puzzle: Link to this puzzle:
<a id="permalink-desc">by game ID</a> <a id="permalink-desc">by game ID</a>
<a id="permalink-seed">by random seed</a> <a id="permalink-seed">by random seed</a>
</p> </p>
</div> </div>
<div id="apology"> <div id="apology">
Sorry, this Javascript puzzle doesn't seem to work on your web 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 doesn't provide a feature they depend on. These puzzles have been
successfully run in Firefox 19 and Chrome 25. successfully run in Firefox 19 and Chrome 25.
</div> </div>
</div>
<hr> <hr>
${instructions} ${instructions}