Skip to main content

Welcome to Geoff Hayward's Weblog

Commenting on Java, JavaFX, Java EE, Joomla, and IoT.

At the time of writing this article I have not seen websites with completely successful attempts at loading icons which appear when html anchor tags are clicked. I therefore decided to find my own solution.

By completely successful I mean the website continues to function as if the icons where not there at all. For example pressing 'Ctrl' and left clicking the link of an anchor tag a new tab should appear within the user's browser. The original tab from which the click was initiated should remain the same.

At no time should the loading icons prevent the default behaviour of the browser. Not when it is a link away from the page either internally or externally relative to the website. The reason being: You do not want to upset search engine spiders, accessibility etc.. Remember we are trying to enhance the website's usability without taking anything away.

The CSS Problem with Anchor Tags Loading Icons

The main problem I had to overcome first was: Browsers, with the exception of Firefox, just do not request images from the server once a page has received an anchor click that goes to a new page. So how do we solve a problem like this? The solution is to already have the requested loading icon image before the anchor tag is clicked.

So now the question becomes: Where to hide the loading icon ready for the click of the anchor tag? I admit I got very inventive whilst experimenting with this problem. However, the solution I found and settled on was simple. That is to simply hide the loading icon on the anchor itself. In other words the icon is always there with a negative 100% on the x-axes. Then all that needs to be done is shift the position of the loading icon image into view once you need it. So now the CSS class called 'loading' is put into the stylesheet ready for action.

.menu a {
    background: url("../images/loading.gif") no-repeat scroll -100% 50% transparent;
}
.menu a.loading {
    background-position: 100% 50%;
}

Solved! Or is it? That at least solves the CSS part of the loading icons on the anchor tag problem.

JavaScript for Anchor Tags Loading Icons

Now all we need to do is to shift the x-axes of the loading icon image by adding the class named 'loading' to the anchor when clicked. This of course, is easier said than done.

Sticking to the discipline that HTML provides structure, CSS provides presentation and JavaScript provides behaviour all the JavaScript in the solution I found loads from a JS file.

The first thing the solution needs to do is to wait for the DOM to be loaded. It then needs to find all the anchor tags that are going to have loading icons. Once it has found the anchor tags, it needs to add a click event. As this is pretty standard functionality given by JavaScript abstraction layers, I made my life easier by using Mootools. However, there is nothing library specific in the solution that I am giving here. Prototype JS, jQuery, etc. will work just fine.

So the click event! This is the tricky part that can stop the user's browser working as it should. When the anchor is clicked, we add the class named 'loading' to the anchor tag. However, the 'Ctrl' click, 'Alt' click and 'shift' click need to not have an effect when the event is fired. So an if not statement needs to wrap around the event to stop the class 'loading' being added.

For example:

if(!event.control && !event.alt && !event.shift){
  node.addClass('loading');
}

That is all there is to it! It was easy once I solved it.



Read

For those of you that do not know the JSON format; JSON stands for JavaScript Object Notation and is a very powerful and fast way of getting and using data. It is fast because the client does not need to parse it unlike XML. At your keyboarding finger tips you have a JavaScript collection ready to roll. But the best part of it is it circumvents the cross domain malarkey. That's right no proxy needed.

So let me give you a demo using a well-known website that lets you feed on their data. Of course this demo is only a demo and I would not use script tags in the body of the document if it was a live website.

<div id="twitter"><!-- a Handle --></div>
 
// This function must be known before the call
function getTweets(data)
{
    var html = '';
    for (var i = 0; i < data.length; i++){
        html += '<p>' + data[i].text + '</p>';
    }
    document.getElementById('twitter').innerHTML = html;
}
 
<script type="text/javascript" src="https://twitter.com/statuses/user_timeline.json?screen_name=YOURUSERNAME&callback=getTweets" ></script>

The example I created about will right out the main text from all of your tweets paragraph by paragraph thus demonstrating the elegance of JSON. Try it yourself but, remember to check the API of the data feed you are getting JSON from to see what tasty nibbles are in store.



Read

Mailing List


Responsive Media

With the ResponsiveMedia plugin for Joomla it is easy to add 3rd party content from YouTube, Vimeo, and Instagram right in to any Joomla! article.

ResponsiveMedia