{"id":18965,"date":"2016-01-07T02:01:43","date_gmt":"2016-01-06T16:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18965"},"modified":"2016-01-06T17:10:52","modified_gmt":"2016-01-06T07:10:52","slug":"htmljavascript-clairvoyance-tester-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-clairvoyance-tester-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Clairvoyance Tester Primer Tutorial"},"content":{"rendered":"
\"The<\/a>

HTML\/Javascript Clairvoyance Tester Primer Tutorial<\/p><\/div>\n

Today’s HTML and Javascript web application is a Clairvoyance Tester, but then I don’t have to tell you you’re clairvoyant, because you just knew I was going to say it anyway … as you knew that this blog posting was coming out today<\/font>.<\/p>\n

We wrote it to illustrate the good use a …<\/p>\n


\n<body style=\"background-color: yellow;background: url('clairvoyance.jpg') repeat;background-position:10px 200px; \">
\n<\/code><\/p>\n

… background image can be put to, in conjunction with our document.write(prompt())<\/i> scenario that makes a web application feel a little like those interactive command line desktop applications in the days of yore<\/a>, because when you have a web application launching straight into things, it can be a bit offputting to be asked something before being shown something, in these times outside the days of yore<\/a>.<\/p>\n

And yes, we tried once again for a better CSS solution using a fully opaque background image (and we haven’t given up<\/i><\/a>) and got some semi-okay ideas going, but decided in the end to do the more straightforward approach of using the wonderful, marvellous, Gimp image editor to give the background image about 50% opacity<\/a><\/img>, since it is so easy to do in Gimp (as we show with Gimp Transparency Primer Tutorial<\/a>).<\/p>\n

There was another CSS idea we tried for the first time with this too. While trying all the incarnations, as mentioned above, what was good to do, whether you are succeeding with “opacity difference” (between background and foreground) or not, is to place a very thick border of a different colour (we chose white) as a “buffer zone” between the background and foreground as per (our HTML for the major foreground HTML element of interest) …<\/p>\n


\n<table id=\"mytable\" style=\"background-color:white;opacity:1.0; border: 125px solid white;\">
\n<\/code><\/p>\n

… which could have been enough to make it all work, even without …<\/p>\n