Skip to content

Archive

Category: Development

To focus on an element using jQuery is really easy, since all it takes is one function – .focus(). There are cases though were it is just a little bit trickier.

Let’s take the scenario where after entering a field, you need to validate it, and if the validation fails, you need to return focus to the field. You would expect the following code to do the job:

$(elem).blur(function(){
   if (do some validation fails) {
      $(this).focus();
   }
});

This code, logically, should work, and indeed it does in Internet Explorer, but Firefox stubbornly refuses to set the focus.

The problem is that the event is firing at the wrong time for Firefox, and therefore the focus event is being lost.

The solution for this is to delay the focusing by a small bit, which then yields a solution that works in all browsers

$(elem).blur(function(){
   if (do some validation fails) {
      var $this = $(this);
      setTimeout(function () { $this.focus(); }, 10);
   }
});
Share

At long last, my little pet project is alive on the web. The Night Sky Notebook is a website which implements a whole range of astronomical calculations, much like Urania, my desktop version, but fully implemented in Javascript.

When I first had the idea of putting up astronomical calculations on the internet, it was simply going to be a convertion to JavaScript from the C# code that I have written about extensively on this blog. Afterwards, however, I decided to rewrite the entire library from scratch to improve the quality of the code, as well as the accuracy of the calculations, basing the new code largely on the algorithms specified in the book Astronomical Algorithms by Jan Meeus.

In addition to the pages containing pure calculations, the site also has a number of pages making use of HTML5 canvas features to render animations for things such as the Moon phase, planetary positions and Jupiter’s moons. This means, of course, that the site works best on newer browsers that support HTML5, such as Internet Explorer 9+, Firefox 5+ and Chrome.

The source code for the library is open-source and is released under the MIT license, and is available for download from here.

I hope that you have as much fun using the new site and astronomical library as I have had in writing it.

Share

It has been a really long time since I have last put up a blog post.

With a combination of the summer holiday, and then on to various pet projects that have been keeping me busy since then, I have had little time to blog.

One of the more interesting projects I am working on at the moment, is creating a web-based version of my Urania astronomical library, which is a complete rewrite of the C# codebase into Javascript.

It is still a while away from completion, but it is looking very promising indeed.

I will keep you posted as to my progress….

Share

Wouldn’t it be great if you could look at the web page you are developing and be able to instantly tell if something is amiss. Say you forgot to add alt tags to your images, or you are using deprecated markup.

This might be a case for Holmes, the CSS Markup Detective.

What Holmes does is add CSS styling to elements in an HTML page that do not conform to standard, and will highlight any markup that is non-compliant, deprecated, or missing required attributes. All you need to do to make it work is to include a single CSS file in your web page, and you can then see the results immediately.

Since Holmes uses the W3C HTML5 standard (as it stands now), it is particularly useful for modernising old websites or existing codebases without too much trouble.

Share

I haven’t made much use of Windows batch files for many, many years. I just haven’t had a need for it, but I learnt a few interesting titbits of Batch file use that I never really knew before today.

Putting IFs into FOR loops
Firstly, batch files support FOR loops as well as IF statements, and therefore putting this together, I would expect this piece of code to work:

for /D %%d in (*) do (
  if "%%d" == "a" goto A 
  if "%%d" == "b" goto B

  echo "Default - %%d"
  goto CONTINUE

  :A
  echo "A - %%d"
  goto CONTINUE

  :B
  echo "B - %%d"
  goto CONTINUE

  :CONTINUE
)

At first glance this code should work. It is merely a few IF statements inside the for loop, which loop through all the directories inside the current directory, and then prints a message following the logic of the if statements.

This code fails (at least while running on Windows 7) because, while it will work for the first item, after the goto statements, the for loop decides to stop working.

To get around this, the solution I used was to move the logic inside the for loop into a separate batch file, and then using the CALL command to execute the second batch file from within the FOR loop. This works a charm

First batch file

for /D %%d in (*) do (
 	CALL SecondFile.bat %%d
)

Second batch file

if "%1" == "a" goto A 
if "%1" == "b" goto B

echo "Default - %1"
goto CONTINUE

:A
echo "A - %1"
goto CONTINUE

:B
echo "B - %1"
goto CONTINUE

:CONTINUE
)



Substring in Batch files
What I also wanted to do, was only compare a portion of the directory name, so then discovered that Batch files have a very simple method of substringing.

The basic format is %varname:~[x],[y]%, where [x] is the starting index in the string, and [y] determines the number of characters to select, which is optional

If the first parameter is positive, then it denotes the index from the start of the string, while if it is negative, it will denote the index from the end of the string.

So let us use an example

set var=teststring

echo %var:~0,5%
echo %var:~-3%
echo %var:~-5,2%
echo %var:~4%

This will output the following output

tests
ing
tr
string
Share

With AJAX being the norm for websites these days, and JavaScript taking on more a more central role in building up web content, you are more than likely going to find yourself having to build up strings containing html to display in a webpage using JavaScript.

This does come at a price though. String concatenations can be rather slow, especially if there is a lot of data that needs to get processed, such as a large table. Unsurprisingly, this is most noticeable in Internet Explorer.

A colleague of mine came up with an alternative way of creating the new html string, using an array to build it up instead of a string.

So using the traditional method you would write:

var htmlStr = '<table>';
for(i = 0; i < data.count; i++){
  htmlStr += '<tr><td>' + data[i] + '</td></tr>';
}
htmlStr += '</table>';
document.getElementById(elemId).innerHTML = htmlStr;

Using an array though, this can be rewritten as

var htmlArray = [];
htmlArray.push('<table>');
for(i = 0; i < data.count; i++){
  htmlArray.push('<tr><td>');
  htmlArray.push(data[i]);
  htmlArray.push('</td></tr>');
}
htmlArray.push('</table>');
document.getElementById(elemId).innerHTML = htmlArray.join('');

In some tests, my colleague found that speed improvements of up to 80x-400x were shown using the array method, varying on the complexity of the concatenations. The biggest improvements were shown in Internet Explorer, with less gains measured in Firefox and Chrome, although quick results were measured in each one.

Share

I have always admired subway maps for the clarity and elegance with which they are able represent a convoluted public transport system. Now there is a way to expand this concept and create your own maps using a subway map plugin for jQuery written by Nik Kalyani.

This plugin allows you to specify the data for drawing the map, and makes the concept of the subway map entensible to represent anything you would like. In fact, I recently saw one detailing the progression of modern rock music, with the different lines representing different musical genres as a timeline, and major bands representing “stations”.

Sample subway map from Nik's demo

For a detailed tutorial of how to use this plugin, go read the original post by Nik Kalyani on his blog.

Share