MEME: jQuery version

I thought I’d spice thing up a bit with some humour related to jQuery and JavaScript from my experience. With the new work and responsibilities, this kind of “surprise” happened to me more than once :)

If you like it, please share. Depending on the interest, this might become more periodic thing.

How to prepare your jQuery plugin for the new plugins.jquery.com site

It’s been over a year since the unfortunate event that whipped out the plugins.jquery.com site’s database. But sometimes unfortunate events lead to better things and that’s the case with the Plugins site. Instead of trying to reinvent the wheel and create a website equally useful for plugin users and plugin developers (while fighting spam, maintaining the servers, etc.), the team decided to embrace the power of existing tools. Now plugin developers will maintain their code on GitHub taking full advantage of all its’ features, while jQuery Foundation concentrates on building a better user experience for “plugin users”.

This means that plugin development and maintenance lifecycles are moving over to more confortable and more suitable for this kind of work GitHub platform.

There seems to be a lot of confusion among “plugin users”, that they’ll need to deal with GitHub and such. “NO” – plugin users will see all necessary information about the plugin on a user friendly plugins.jquery.com website.

“It’s alive” - new theme design, interesting posts & more…

Happy New Year everyone! I would like to give you a heads up with the news that the blog will become “live” again with more regular and interesting posts around jQuery and JavaScript. For the last couple of years I have been involved in a very fast growing start-up with a vibrant developers team. I have learned a lot during this period, so I decided to also cover topics about maintaining frequently changing codebase, programming best practices for better code maintenance and also tools & tips to stay sane.

To get things moving I spent couple of days redesigning the blog theme using Twitter Bootstrap and dressing it up to Blogger template (if there is a demand, I can polish the template’s code and release it to the public). I hope you like the new look. If there are any bugs, please leave a message on Facebook or Twitter.

Happy New Year and happy coding…

NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]

This is a common error in Firefox. It is logged in console when you try to call on non existent DOM API method. Seeing this error message is very common with methods call to alert(), confirm(), drawImage() (canvas) and window.open(). You may think "how those methods could be 'non-existent'?", since they are standard APIs of the window object. Well, that's true, they can't, but consider the case when browser blocks your alert or pop-up windows. Firefox pop-up blocker will make those methods not available in that context and should silently carry on with the next statement, but instead it throws an error.

To solve this problem:

  • make sure you are calling methods on non-null objects;
  • remove alert(), confirm() or open() methods in unload event handler. FF pop-up blocker ignores all window.open() methods in the unload handler.

The flavours of the error message:

  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert]
  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.confirm]
  • NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]

At the time of writing the problem has not been fixed.

Dynamically change <title> using jQuery

In this post I will show how to dynamically change document's title using JavaScript and jQuery. Browsing the web (and StackOverflow) I saw a lot of posts that say you can't do it using jQuery. Actually, there is a jQuery syntax that is basically a wrapper for javascript code (see below).

Note: just to clarify, by document title we mean the text that is displayed in the browser window or a tab.

The best way to change the document title is to use native javascript api document.title.

document.title = "New text set by JavasSript";

The equivalent jQuery code of js code above.

$(document).prop('title', 'New text set by jQuery');

Example

Let's say we need to change the tab title text when a user clicks on a button. Here is a jQuery code to do just that:

<html>
<head>
  <title>Initial page title</title>
  <script src="path-to/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#clickme').click(function(){
        document.title = $(this).val();
        // jQuery syntax alternative
        // $("title").text( $(this).val() );
      });
    });
  </script>
</head>
<body>
  <input type="button" id="clickme" name="clickme" value="Click me!" />
</body>
</html>

To conclude, you are better off using document.title, because it is cross-browser and has performs better.

Alternative jQuery syntax has been tested in all major browsers.