The Shim
The working example of the External Shim. The shim on this page will allow the visitor to leave this website. The version now used on my template does not allow this but can be edited back so that it can.
To get this to work I need to add a modal dialog to the page and the support script
The modal and the script are shown below. What the purpose of this is to allow the visitor to leave for an external website or to stay with me. An explanation of why this is the case is added.
To use the shim the syntax is shown below.
The modal and script
This is the first attempt at writing this. I based the original code on the Facebook Shim emulation.
The External Link Syntax
This is a little more complex than the normal <a> tag:
It is probably best to debug the link on a seperate page (this page for example) as it is easy to screw the syntax up. The showShim2() function has two arguments (see below)
<a href="javascript:void(0);" onClick="showShim2('url','Website');" rel="nofollow">link</a>
'url' and 'Website' are replaced with the required URL and website name. It is not known whether the rel="nofollow" has much meaning here.
Implementation
As most of my pages have external links the adding of s shim to every page would be a monumental task. So I have changed the template so all new pages will have a shim and I will change the pages as I see they are accessed.
At first I thought that it would be a good idea to have the shim code in a linked file (Javascript), while I may try this there is no big problem with having a shim on every page as it is not large and it gives the option of customising the shim to the page. In any case the shim will probably develop over time.
Testing
If the shim has been applied to an External link the link at the bottom of the screen (desktop) will show that the link has a JavaScript attached to it.
The shim as developed will allow the visitor to visit the external link if I see fit. In most cases the url parameter is not filled out and the "anchor" id is moved to the <b> text in the modal. The id="anchor" is required by the JavaScript function as it will fail if it just commented out.
<div class="w3-container w3-border-top w3-padding-16 w3-light-grey w3-center">
<button onclick="document.getElementById('shim').style.display='none'" type="button" class="w3-button w3-red">Cancel - stay on tempusfugit</button>
<p><a href="external.html">External links</a> disabled to <b id="anchor"></b> on this page, please visit other pages
</p>
<!-- <br><br> Visit:- <a id="anchor" href="index.html" style="text-decoration:none; cursor:text;">Go to Website</a> -->
The commented out anchor tag shown above has the text-decoration set to none so that it doesn't look like a link. The external link below does. The element.innerHTML is replaced by the JavaScript function ShowShim2( 'url', 'Website' ).
function showShim2(destination, site) {
var a = document.getElementById("anchor");
var b = destination;
a.setAttribute("href", b);
document.getElementById("anchor").innerHTML = site;
document.getElementById('shim').style.display='block' ;
}
The function then opens the modal by setting the display style to 'block'. The button on the modal closes the modal by setting the display style to 'none'