Some Technical Details

The index page of this website uses WebGL for the cube animation, and requires four JavaScript files together with two shader files, see here for more details. An additional JavaScript file is used to generate and hide the email address from spammers, see hide-email.html for more the details.

Most of the links in this website are internal, and the main page and many others make use of the JavaScript libraries jQuery, AngularJS and jCanvas, as well as Scalable Vector Graphics (SVG), together with various combinations of these. This is work in progress, and the capability of using more libraries, such as Three.js and Bootstrap can be considered in the future. Currently include-URLs.js can load 5 external JavaScript resources and 1 CSS resource, of which only the first 3 are currently used.

jQuery and several other libraries use Content Delivery Network (CDN) links, instead of hosting the libraries on the server used by this website. Rather than putting the links on each page that use them, and having to update them when a new version of any of the libraries becomes available, they are placed in a file called include-URLs.js, which is then loaded from pages that require the libraries. This has a number of advantages as follows:

In order to make use of include-URLs.js, at least two lines of code have to be placed in the <head> section of the HTML file, namely:

<script src='js/include-URLs.js'></script>
<script>includeURLs("J-----", false);></script>


followed by any other JavaScript libraries required to be included in the HTML file, with a suitable path if they are not directly below the HTML in the file structure. These two lines must be placed before any other JavaScript code is included that uses them.

The first argument of includeURLs() is a string with a length of currently 6 characters specifying which libraries are to be includes in the following order: jQuery, AngularJS, jCanvas, Three.js, BootstrapJS and BootstrapCSS. Currently only the first three are used, but the others and more libraries can be included at a later date. A "-" means that that particular library will not be included, a "J" means that it will be included as a JavaScript library, a "C" means it will be included as a CSS library, and anything else means it will be included as a JavaScript library if the file name ends with ".js", and a CSS library if it ends with ".css", or an error if the file name is not recognized. Currently, the only CSS file is BootstrapCSS which at present is not used. Thus "J-----", as above, means that just jQuery will be included, "-J----" means that AngularJS will be included, and "JJ----" means that both are included, as is the case for the clocks and calendar page. If jCanvas is included, then the string is "J-J---", as jQuery is needed. If jQuery is omitted, an error will be displayed.

The second argument is a boolean value. When set to true, includeURLs() will use a JavaScript alert message to indicate each library that is loaded, and can be used for testing and debugging. In production mode this should be set to false so these messages will not be displayed, but any error messages will still be shown, such as if jCanvas is loaded without jQuery.

In addition to controlling form input, mouse events, etc., jQuery can be used to provide a number of other very useful features which are implemented here, one of which is the use of tool-tips. To use this feature, jQuery must first be activated, then these two lines of code after includeURLs("J-----", false) must be added:

<script src='js/tooltip.js'></script>
<link rel='stylesheet' type='text/css' href='css/tooltip.css'>


with the paths specified as appropriate. On each HTML tag we want to attach a tool-tip, we add class="tool-tip", and a new attribute tlp="The tool-tip message". Thus, say, to add a tool-tip to an image, do something like:

<img ... class="tool-tip" tlp="This is my image"/>

Tool-tips are actually provided by Bootstrap, but it was found that Bootstrap breaks some of the code already written, and in any case the philosophy here is to include only that which is needed, so including Bootstrap for just tool-tips is considered unnecessary.

Another use is being able to display code in an HTML file. Rather than tediously changing each "<" and ">" to "&lt;" and "&gt;", respectively, which was the case for some earlier code, a jQuery function can handle this very easily. This applies not just to HTML code, but also to the use of these operators in JavaScript and other scripts. The <plaintext> tag when placed before any code will for at least some browsers renders all subsequent text literally. Unfortunately, once the tag is opened, there is now way out of it, and the tag is deprecated. Also unfortunately, the use of <![CDATA[ ... embedded code ... ]]> also does not appear to work in the way wanted.

The solution with jQuery is to include it in the HTML file, as stated above, then include the following file:

<script src='js/jquery-showcode.js'></script>

whose code contains just three lines as:

$(document).ready(function() {
  $('.source-code').html($('.source-code').html().replace(//g, '>'));
});


found from:
http://stackoverflow.com/questions/17966089/how-to-replace-and-with-lt-and-gt-with-jquery-or-js,
where of course the middle line can be incorporated in another file using jQuery. The section of the HTML code we want to handle as literal code with "<" and ">" displayed, is to delimiter it using:

<pre class="source-code"><!-- Start code -->
...
// Place source code between these pre tags
...
<!-- End code -- ></pre>


then all code between these tags will be rendered literally, with code outside these tags handled normally. More than one block of such code can be used in an HTML file. To check that the code is being properly handled, the comment <!-- Start code --> can be placed after the opening <pre> tag, and the comment <!-- End code --> can be placed before the closing </pre> tag. If these comments do not appear as literal text in the browser delimiting the code to be handled, then jquery-showcode.js is not working. If these comments are not placed in the HTML file, it is quite possible that the code may appear to be displayed correctly, but on encountering "<" or ">" the browser may get confused and miss displaying some code if jquery-showcode.js is not working. If one is certain that there are no "<" or ">" characters in the code, this method can be skipped.

BUG REPORT 1: A bug has been found in jquery-showcode.js. It turns out that if "<" is immediately followed by a letter or a number of other characters without a space following it, the function gets confused because it assumes that this is part of an HTML tag, and looks for the closing ">" character, and does not display properly some of the following code. This can be fixed by inserting a space between "<" and the following character. However, in a number of cases a space cannot be inserted, such as the use of "<=" or "<<". The former causes no problems, but the latter does, and this can be fixed by inserting a space after the second "<". A digit following "<" without a space, and regular HTML tags which have letters immediately following "<" work correctly. It is thus advised to use this method with caution, and always insert a space after a "<" character, when that is possible, or use the HTML entity "&lt;" as a fall-back.

BUG REPORT 2: Another bug has been found. In processing an HTML file, the function does not work with the opening <html>, <head>, <body> and <script> tags, and their corresponding closing tags. In these cases "<" and ">" have to be replaced by "&lt;" and "&gt;" respectively. The other HTML tags appear to be processed correctly, as well fake tags which are not valid HTML code.

Although Firefox is used as the working browser on a Windows platform, Internet Explorer, Google Chrome, Safari and Opera are used to check for compatibility. A number of situations are found where there are incompatibilities, requiring either a warning to be displayed on the pages in question, or some logic to show an alternative display when the required display is not rendered. The use of Internet Explorer can be tested using conditional compilation, then subsequently the function getBrowser() in browser-type.js was developed to check which of the 5 main browsers is being used, and is invoked directly from the pages needing it. The function getBrowserAndVersion() is also in that file and is also invoked directly from a web page to display both the browser name and version number, if known, in that page.

The special negative roll-over effect on the large CS-CUBED logo image in main.html is performed by using jCanvas in the file jcanvas-neg-effect.js, which invokes the function jCanBrowComp() in browser-type.js, that in turn invokes getBrowser(), and getVersion() in the same file to determine the browser's version. As stated above, getVersion() is also called directly. However, in order for jCanvas to work, the code:

<script src='js/include-URLs.js'></script>
<script>includeURLs("J-J---", false);></script>


must be included in the HTML head part. So far this is found to work properly only for Firefox and Safari, with a set of options in jCanBrowComp() being used to specify the range of version numbers over which these browsers are considered to be valid, with the other browsers being considered invalid. In the case of an invalid browser, or an invalid browser version, the fall-back CSS image roll-over effect is used, otherwise nothing is displayed.

As a point to note, for a valid browser version with jQuery and jCanvas both working correctly, the canvas tag in main.html is used to display the CS-CUBED logo with the special roll-over effect, and on clicking the image, jQuery is used to navigate to this page. This degrades gracefully when jCanvas is disabled with includeURLs("J-----", false), and instead the fall-back CSS roll-over effect is used on the CS-CUBED logo displayed from image tags with a normal HTML link to this page, and the tool-tips will still work. If jQuery is also disabled by using includeURLs("------", false) or includeURLs("--J---", false), this further degrades gracefully by continuing to display the page with the standard CSS roll-over effects, but the tool-tips no longer work. Warning messages are displayed at the top of the page when jQuery or jCanvas are not working. Similar messages are also used on some other pages, such as for the clocks.

Finally, this website uses HTML5, and the HTML files have been validated using https://html5.validator.nu/. This works with embedded SVG code, but it does not recognize AngularJS attributes, nor special attributes added to handle tool-tips.



Click here to return to the main selection page.