Archive for the ‘Javascript’ Category

ClearField updated to v1.1

Javascript donotfold | 12 Apr. 2010 | no comments

I’ve updated the jQuery plugin: clearField. New in version 1.1 are:

- fixed a couple illogical jQuery plugin things
- added the option to select another attribute than the default “rel” attribute
- added the option to have pre-filled content and still be able to use clearField

This last one is the most significant. If you have used clearField in forms with prefilled content (like for example your name), you might find this update pretty useful. Check out the example below on the plugins’ homepage.

For more info please visit the plugins’ homepage or download it from the jQuery plugins website.

Getting the href value with jQuery in IE

I ran into a ‘bug’ in jQuery that only occurs in IE and under specific circumstances. Actually, it’s not really a bug in jQuery… it’s more a funky “feature” of our beloved* browser: Internet Explorer. (* yeah right, muaha :P )

In jQuery you can easily get the href attribute value off of a link by doing $("mylink").attr("href"); but sometimes in IE this isn’t reliable. For example: normally, if the href value is “#myAnchor”, jQuery will return —surprise, surprise— the string: “#myAnchor”. But in some cases with IE, you’ll get the full URL path of the page you’re currently on, with the anchor string value appended to it (for example: “http://labs.thesedays.com/#myAnchor”).

This bug is specifically annoying when you use the href value in a selector in jQuery. For example, you should never do the following, because it may result in unexpected results when browsing in IE: $("a[href='#myAnchor']").click(...);

Workaround? Instead of using the href attribute, you could use the rel or xref attributes of a link, but these attributes aren’t supposed to be used for this purpose and if you disable javascript, the anchors won’t work anymore.

The  jQuery devs should fix this issue ASAP, because I think that issues like these are the main reason why people use javascript libraries like jQuery: they make hacky javascript work!

For me, this proves once again that Internet Explorer totally fails at DOM management.

Two Flash Player Instances Accessing the Same ExternalInterface Method

We’re here again with a quick post from a busy battlefront. We’ve been hard at work on some pretty awesome projects, a few of which we’ll discuss in more detail once they’re finished, but I wanted to take the time to post about a baffling issue we encountered working with Javascript and the ExternalInterface class in AS3.

For an oncoming Nokia campaign we’ve been working on an interactive website that relies heavily on the communication between Javascript and Flash. It involves two instances of Flash Player to interact with the same bit of Javascript. We had our two swf files report to Javascript using a rudimentary event dispatcher (pretty much just a Javascript function called dispatch, that could take one or more params, one of which was the event type)

Now, the issue we encountered was that, sporadically and presenting without any recognizable pattern, the event passed on from the second of the two Player instances, would fail. We just didn’t receive any notice that anything had happened at all.  Even more baffling was that the issue only occurred in Firefox on a Windows PC.

After banging our heads against the walls and endless debugging, we finally discovered that the problem lay in the fact that we were calling the same Javascript method from two separate instances. Once we created a separate function to handle the events for both player instances, the issue resolved itself.

If anyone has any explanation as to why this would happen, we’d love to hear it from you :)
To me, it seems that Firefox is more and more becoming an endless cesspool of eternal doom for Flash developers.

jQuery basics

Yesterday I gave a presentation for students of KDG on the basics of jQuery. I didn’t quite know how technical I could go in my presentation so I kept it very basic. The presentation was —hopefully— a good trigger for them to get started with learning jQuery.

jQuery is an awesome tool in these modern times. Point is, javascript has been around since 1995 and although loads of things have happened… not much has changed since then. Using javascript these days is basically the same as 10 years ago. What has changed is the way we use javascript. It’s because of javascript libraries like prototype js that we can all use javascript to the maximum of its abilities without too much hassle.

I started off my presentation with an explanation of the DOM, since I think this is key to understanding how Javascript works. Javascript works with the DOM, not the HTML. And just like javascript works with the DOM, it works with CSS. By just playing around with the DOM and CSS you can do really cool effects. Some examples where I used jQuery to the max are Nokia Comes With Music Launch and the “flappy thingie” on Sistr.it.

Disclaimer: My presentation is more an introduction to jQuery for the students of KDG. There are loads more things that I could talk about like, for example, chaining. If you want to learn more about jQuery I suggest you check out this nice presentation or buy a good jQuery book ;)

jQuery plugin: clearField

I’ve made a plugin for jQuery, clearField. It’s very simple actually: it changes the content of a form field when you click on it. Check out the input field on the top right of the Chiquita site to get an idea on what it does. First it says: “Enter your email address” and on focus it’s empty so that you can enter your own text in it. If you don’t type anything and click outside the field the original content is back.

The implementation is pretty simple, just include the javascript file onto your HTML page, then set the value of the input field to what you want and use this jQuery code to enable the plugin:

$(document).ready(function() {
    $('selector').clearField();
});

More info? Check out the plugins homepage or the jQuery plugins website.