Archive for the 'javascript' Category

Published by Fabian on 20 Jul 2009

Proposal for a new Javascript Event

Fresh from my daily coding:

<div onlick="nextItem()">next</div>

took a while for me to realize why it did not work as desired. However, wouldn’t that be a good event for some adult content sites?

Published by Fabian on 10 Jun 2009

Adding Javascript Event Handlers in Element Constructor

When replacing large server side generated structures with JavaScript generated elements, I found the “new” style of Prototype very convenient:

new Element('div', {
                 'class':'tooltip',
                 'style':'height: '+tooltipHeight+'px;',
                 'onClick': 'closeTooltip()'
                 })
            .update(tooltipText);

What I did not notice that this doesn’t work in all browsers. When then, after a while, checking cross browser compatibility, I wondered why the closeTooltip method was not called. It was called ok in Firefox. It shouldn’t have worked in Firefox, because it is actually the wrong way to register an event listener.
The correct way is:

new Element('div', {
                 'class':'tooltip',
                 'style':'height: '+tooltipHeight+'px;'
                 })
            .update(tooltipText)
            .observe('click',closeTooltip);

I assume that Firefox does scan the attributes of JavasScript generated nodes for event handling code, while the Internet Explorer does not.
The W3C DOM Level 2 Specification on event listeners says:

In order to achieve compatibility with HTML 4.0, implementors may view the setting of attributes which represent event handlers as the creation and registration of an EventListener on the EventTarget.

While all browsers do that consistently for generated HTML, it seems that it does not apply to JavaScript generated elements.

Perhaps Prototype people could add a note to the Element documentation (or document writeAttribute at all :-) )

Published by Fabian on 22 Oct 2008

AjaxWorld Day 2

Today has been day two of the AjaxWorld conference and the two main topics on my agenda today were JavaScript and what Enterprises need.

The most delighting talks of the day were focusing entirely onto core Javascript. Douglas Crockford gave a really interesting session about “Javascript the good parts” and explained why JavaScript is as it is and why that sucks. He talked also about his code quality tool JSlint, that will help one to eradicate bad code and leave good code in place. He said he is sorry for the case that JSlint will hurt our feelings about code quality. As an example about bad code he showed and explained this nice example, which I will leave for you to find out why it sucks (or by Dougs book)

function a(){
return {
  ok: "hello"
}
}
 
function b(){
return
{
  ok: "hello"
}
}
 
alert(a().ok);
alert(b().ok); //wont work. you know why?

Mike Girouard followed that directly up with a really great presentation on why he things that JavaScript is really beautiful. I can really recommend checking his presentation.
It was refreshing to see with all the high level abstraction fancy stuff here and there that also people care for the nifty stuff of a language. I am getting into the joy of discovering more and more about Java and Javascript and really like that. I personally find that much more interesting than any high level abstraction, because the abstraction hide the beauty with too much make up :-)

Other sessions were addressing the issues we still have. Too many toolkits, too much useless technology. When companies want to utilize RIA to modernize their application infrastructure, they need something that we still need to invent.

Also this day had a negative highlight. A guy which I won’t name, from a company which I won’t name, had a general session in which he presented their product. Well he did the talking, but the slides were changed by his personal assistant. Also the demos were given by here. Well not actually given. She moved the mouse according where he said. I find this not acceptable, and not professional. Well it somehow fit to the arrogant presentation with the somewhat dubious content inside (“unfortunately eclipse does not provide debugging capabilities in production systems” – remote debugger anyone?)

Published by Fabian on 29 Sep 2008

jQuery wins the race

It seems like jQuery has beaten Prototype, Mootools, Dojo and all the others.
While recent Garnter Studies still claim Prototype and Scriptaculous being the leading duo, this will for sure change.
Microsoft and Nokia announced that they will integrate jQuery into their software stacks. While Mircosoft and Nokia are not Google and Yahoo! and seem not to be that important in Internet business right now, one important detail should not be overlooked:
Nokia and Microsoft dominate the “runtime market”. Their systems run the majority of software applications, Nokia for the mobile market and Microsoft for the desktop/laptop market.
As I said already in my post about Googles Chrome browser, I think that it is very important to support JavaScript in the platform.
This announcement could make a noticeable shift in market shares towards jQuery. Who could dare to ignore the new first class citizen in the web platform world?

Published by Fabian on 16 Apr 2008

Imageflow – revised

I have been working recently on integration a great Imageflow library from Finn Rudolph, which however was code wise err a bit hacky. It was using plain Javascript, with many global variables and some cross browser hacks. Also its lightbox integration was not compatible with Lightbox v2.04.

To practice my Javascript skills a bit I decided to refactor that library. There is another serious alternative called Protoflow, but its scaling algorithm doesn’t work on different sized images well. I made it working quite nicely with Lightbox and additionally cleaning up lots of code. Quite some temporary variables are no longer required due to the object-ness of the widget. It also will not produce namespace conflicts anymore.

The script is available for download here.

I am pretty sure that the code can be still improved. Initially i started with a 1-1 port to Object. Basically just namespacing the whole thing. Then I did an iteration cleaning things up, after that I removed some browser hacks, especially using Prototype Event class for that. After that I cleaned again, and thats how it is now. 6KB compressed using YUIcompressor. I have not yet verified that it works cross browser as good as the original, but thats what I am going to do next. Additionally i try to improve my prototype skills and hack some for each loops.

Expect some updates on this blog entry and the script.

Feel free to post ideas in the comments.

Note that however I am not giving support for this script. Make sure to visit the original Imageflow site first and get a version from there running. There is quite a lot of documentation and help available. Afterwards you may come here again and try my variant of the script :-)

Updated 2.May 2008:

Just integrated the options into the object creation. you can now pass changed options more easily. Also merged a feature that allows you to prevent images being scaled larger than they actually are.

Published by Fabian on 09 Apr 2008

Latest Lightbox v2 with automatic resizing

It seems that quite many people want to get their lightbox resizing automatically, but there were not many good solutions out there. I finally found a solution from Sebastien Grosjean, which was already integrated into a later, not yet very object oriented lightbox version, by Michael R. Bagnall. However the latest available one, which was upgraded to use latest Prototype and Scriptaculous versions, was not patched.

So this is what I did.
Please find my patched version of the Javascript and CSS file. Please take care to update image pathes in CSS and JS file. And the localization if you don’t speak German :-)

Detailed list of changes from Lightbox v2.04:

  • Added automatic resize method. Controlled by featBrowser & breathingSize options.
  • Corrected Opera 9 fix, to prevent disortion in FireFox on slidedown.
  • Tweaked the overlay to resize to windowHeight, not pageHeight.
  • When in a slideshow the next image had no title set it inherited the title of the previous one. that was fixed.
  • Tweaked some default parameters (thats my matter of taste :-) )

Many thanks to Lokesh Dhakar for creating this awesome Lightbox, that is still unmatched by soo many clones :-)

Next »