With the recent batch of changes to the site, I've introduced a number of my new JavaScript files to the domain. I feel that they're too good to be kept to myself, and as such, they're released under the GPL. The first one I'm going to talk about is the popup message JavaScript, which replaces the standard browser message popup with a custom XHTML one.
Now I'm not usually one to replace browser features, as I believe that the browser and the web page should be kept separate, much as the structure and the presentation should be kept separate. However, when it comes to browser message popups, there really is no alternative but to replace them. They're ugly, unskinnable, and can really ruin what would otherwise be a good page.
So to replace the browser popup windows, I've written a Javascript file. It has functions for creating, controlling, and controlledly-detonating custom XHTML message popups, and replaces the standard browser window.alert("message"); function when included in the page. When activated, it disables all the links and forms in the page below it, and re-enables them when dismissed.
The code is pretty simple, and most of it is just bulk to generate and manipulate elements in the DOM, so it doesn't need explaining. However, I feel the usage of the code does require some explanation, and presents a nice opportunity for another example page.
To begin with, you must include my standard JavaScript library file, which is also available under the GNU GPL. This is accomplished using the following XHTML in the <head> tag of your page:
<script type="text/javascript" src="http://tecnocode.co.uk/sources/client/general.js" />The next step is obviously to include the popup message JavaScript itself, which I would appreciate if you left in its original form, but since that's not a requirement of the license, you don't have to: 
<script type="text/javascript" src="http://tecnocode.co.uk/sources/client/popup_message.js" />This, too goes into the page's <head> element, but after the inclusion of the general library. On my website, I have moved site-specific popup message functions into a separate popup_message_custom.js file and included it, but this is by no means a requirement.
The final inclusion is of the CSS file. This file should obviously be customised to your own tastes and site design, but the default design is pretty neutral. This is included with the following markup (once again in the <head> section):
<link href="http://tecnocode.co.uk/sources/client/popup_message.css" rel="stylesheet" media="all" type="text/css" />Now we get onto the actual calling of the functions necessary to create a popup message. You can call the following function anywhere you like to create a popup message, but a sensible place to put it would be in the onclick event of a link, or something else:
popup_message("window_title",message);Here, you would obviously replace window title with the popup message's required title, and message with the message you want, which should be a JavaScript DOM snippet. Alternatively, you can pass a string, but this is messy. You should note that this function always returns false, to facilitate the cancelling of events.
However, in some circumstances, you might not know if the file has been included or not, and in any case, for backwards-compatibility, it is preferable to use the window.alert("message"); function instead of the script-specific function described above:
window.alert("message");Whilst calling the JavaScript in this manner is backwards-compatible, the title of the message is just "Message", and you cannot pass DOM snippets in — only plain text can be passed as the function parameter.
Now that the details of using it have been cleared up, let's finish off with a slightly more technical description of the JavaScript functions, and the CSS:
| Function declaration | Description |
|---|---|
public bool window.alert(string message) |
The original, unmodified browser popup message creation function, or a reference to popup_message("title",message); if popup_message.js has been included. Always returns false. |
public bool popup_message(string window_title, dom_tree|string message) |
The custom popup message creation function, which creates a whole new element tree, and displays it on the page. Always returns false. |
private void hide_popup_message(dom_event event) |
The function to destroy (remove) a visible popup message. It should not be called by any custom code unless you really know what you're doing. |
The CSS is quite simple, and all the classes and IDs generated by the JavaScript already have a rule in the CSS file (although you could have styles for individual popup message IDs, but this is going too far). I have provided a brief explanation of each class, and an image to depict what it is:
| Class / ID | Description | Applicable element(s) | Descriptive image |
|---|---|---|---|
.popup_message |
The main popup message "window" element. | <div> |
.popup_message |
.popup_message_title |
The title of the popped-up message. | <h2> |
.popup_message_title |
.popup_message_message |
The container for the message. | <div> |
.popup_message_message |
.popup_message_button |
The "OK" button used to dismiss the popup message. | <button> |
.popup_message_button |
A final note must be about the files I've provided. If you do use this script (and the CSS), please download it and host it with your website; do not leech my bandwidth! Additionally, please follow the terms of the license — I'm giving you something, and I only ask for a little in return.