This is a new reply to the several messages back in this thread.
The conclusion I made earlier regarding the display:none versus
display:block seems to be incorrect. Before I had thought that
display:block was required in either or both of (1) the <form> element as
implemented in JHS in the noun formtmpl_jhs_ and of (2) the css style for
#game.screen. But it now appears that the entire problem was Safari vs
Chrome: Chrome shows the text regardless of the status in (1) and (2).
It now looks like the problem is with one or both of the font-families used
in Safari. My evidence is that if I change both font-families to Helvetica,
the text shows.
Below is my test script with Helvetica used for the fonts.
coclass'testform'
coinsert'jhs'
jev_get=: create NB. browser get request
create=: 3 : 0
'testform'jhr''
)
CSS=: 0 : 0
body {
margin : 0;
}
#game {
position : absolute;
left : 100;
top : 0;
width : 320px;
height : 480px;
background-color : rgb(30,30,30);
font-family : Helvetica;
color : rgb(200,200,100);
}
#game .screen {
position : absolute;
width : 100%;
height : 100%;
display : block;
z-index : 10;
}
#game .screen.active {
display : block;
}
#splash-screen {
text-align : center;
padding-top : 100px;
}
#splash-screen .continue {
cursor : pointer;
font-size : 30px;
}
.logo {
font-family : Helvetica;
font-size : 60px;
line-height : 60px;
margin : 0;
text-align : center;
color : rgb(70,120,20);
text-shadow : 1px 1px 2px rgb(255,255,0),
-1px -1px 2px rgb(255,255,0),
5px 8px 8px rgb(0,0,0);
}
)
JS=: ''
HBS=: 0 : 0
' <div id="game">'
' <div class="screen" id="splash-screen">'
' <h1 class="logo">Jewel <br/>Warrior<h1>'
' <span>Click to continue</span>'
' </div>'
'</div>'
)
If anyone wants to explore further, the font file is as follows I could not
make Safari work with these fonts.
fontfaces.css
@font-face {
font-family: "Slackey";
font-weight: normal;
font-style: normal;
src: url("../fonts/slackey.woff") format("woff"),
url("../fonts/slackey.tf) format("truetype");
}
@font-face {
font-family: "Geo";
font-weight: normal;
font-style: normal;
src: url("../fonts/geo.woff") format("woff"),
url("../fonts/geo.tf) format("truetype");
}
Thanks to all for their help,
On Wed, Feb 5, 2014 at 10:52 AM, bill lam <[email protected]> wrote:
> Brian,
>
> I downloaded the source code and the ch02/index.html ran fine on
> Chrome. WebGL does not work for my display driver but that is
> another issue. I guess the problem is not in DOM but that
> scripts not executed because both JHS and that webpage want to
> set the handler for onload event.
>
> Note that if I comment out the scripts by changing "script" to
> "noscript" in line 9 and 10, then the index.html will not display
> text. The reason may be that in line 20 of main.css it set
> display to none. If you change that "none" to "block", then text
> will re-appear.
>
> Alternatively, if you also comment out line 7 and 8, change
> stylesheet to nostylesheet, text will also appear but without
> those fancy fnot.
>
> IMO, given that JHS is a framework for generating dynamic
> webpage, it can have problem with some javascript library out
> there. If you want to learn from that book, then you need to
> put JHS aside. When you have learnt enough HTML5 and javascript,
> you can write webpage using HTML5/javascript that communicate
> with a J server for computation.
>
> index.html
>
> 1 <!DOCTYPE HTML>
> 2 <html lang="en-US">
> 3 <head>
> 4 <meta charset="UTF-8">
> 5 <title>Jewel Warrior</title>
> 6
> 7 <link rel="stylesheet" href="styles/main.css" />
> 8 <link rel="stylesheet" href="styles/fontfaces.css" />
> 9 <noscript src="scripts/modernizr.js"></noscript>
> 10 <noscript src="scripts/loader.js"></noscript>
> 11 </head>
> 12 <body>
> 13 <div id="game">
> 14 <div class="screen" id="splash-screen">
> 15 <h1 class="logo">Jewel <br/>Warrior</h1>
> 16 <span class="continue">Click to continue</span>
> 17 </div>
> 18
> 19 <div class="screen" id="main-menu"></div>
> 20 <div class="screen" id="game-screen"></div>
> 21 <div class="screen" id="high-scores"></div>
> 22 </div>
> 23 </body>
> 24 </html>
>
> main.css
>
> 16 #game .screen {
> 17 position : absolute;
> 18 width : 100%;
> 19 height : 100%;
> 20 display : none;
> 21 z-index : 10;
> 22 }
> 23
>
>
> Вт, 04 фев 2014, Brian Schott писал(а):
> > Another difference that I did not mention is that the JHS html code has a
> > fancy <body>, while the native html has a simple <body>. The fancy one is
> > below.
> >
> > <body onload="jevload();" onunload="jevunload();" onfocus="jevfocus();">
> >
> >
> >
> > --
> >
>
--
(B=)
----------------------------------------------------------------------
For information about J forums see http://www.jsoftware.com/forums.htm
