Category Archives: javascript

Asynchronous JQuery loading using yepnope – almost there, but with quirks…

Today I stumpled upon a problem I was not (entirely) able to solve. I wanted to use the Javascript code printed below to load JQuery code asynchronously (using yepnope).

<script src="/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="/scripts/yepnope.1.5.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
	var docready = [], $ = function () { return { ready: function (fn) { docready.push(fn); } }; };
		load: '//ajax.googleapis<em><strong>OFFLINE</strong></em>.com/ajax/libs/jquery/1.8.2/jquery.min.js',
		complete: function () {
			if (!window.jQuery) {
				yepnope({ load: '/scripts/jquery-1.8.2.min.js', complete: initJQuery });
			} else {

	function initJQuery() {
		$ = window.jQuery;
		for (var index in docready) $(document).ready(docready[index]);

The code works almost perfectly. The JQuery library is loaded from the Google CDN as requested, and when that one is not available, it falls back to local script loading. While the JQuery library is not yet loaded, I hold all calls to $(document).ready() to fire them when JQuery is loaded entirely. This works! However, I discovered that JQuery plugins do not work with this code, as they require the JQuery or $ object.

I know I should use the initJQuery function for plugin loading based on JQuery, but since some plugins get inserted by ASP.NET partial views or Rejuicer, this is not possible. Currently, I stick with late loaded synchronous JQuery plugin loading while still holding $(document).ready calls for later (guaranteed) execution. I am curious about your solutions though ;) .

PS. Ow, currently, the piece of code I use for now, is:

// in head:
<script type="text/javascript">var docready = [], $ = function () { return { ready: function(fn) { docready.push(fn); } }; };</script>

// just before </body> tag:
<script src="//" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript">
    // fire all preliminary $(document).ready(fn) calls immediately after jquery is loaded.
    $ = jQuery;
    for (n in docready) $(document).ready(docready[n]);

Self closing iframe tag fails Javascript execution

On a project I am currently working on, I have to use an iframe. Since I included the iframeĀ in my web application, the Javascript code beneath it stopped working immediately. I did not see the problem at first and had a tough time finding out the iframe caused the problem. As it were, I used a self-closing iframe. The solution to the problem was to add a closing iframe tag instead of using a self-closing iframe… Simple solution, but I assume more people will face this problem as I did ;) .

Happy coding!

Clean and minified Javascript

It has been a while since I last posted a technical post. I’m sorry, but I am too busy enjoying my work to keep you posted as much as I should.

Just a few days ago I was playing around with YSlow and PageSpeed, two add-ons on Firefox. Both stated my Javascript files were 1) to many and 2) not at all at minimum size.

Searching for an automated way of cleaning up and minifying my Javascript files, I bumped in on JSMin, a Javascript minifier that can be downloaded in C#. Do you hear the term HttpModule in your head already as I did?

When you try to implement JSMin, do consider the fact that your Javascript files will be stripped really rigorous: some of my files did not work anymore after minifying. The reason for this is that Javascript gives you the opportunity to write bad code. To prevent myself from writing rubbish Javascript files that fall apart using JSMin, I now use ‘the tool that hurts feelings’, JSLint. It hints you about bad code and, when obliged to, prevents you from failure when using JSMin afterwards ;)

Lucky coding :) !