zakarya/puzzles
1
0
Fork 0
mirror of git://git.tartarus.org/simon/puzzles.git synced 2025-04-21 08:01:30 -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.
*/
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");

23
html/jspage.pl
View File

@ -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>
<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>
</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}