Who said geez site should be ugly? Introducing jGeez 1.2.0.0

One of the driving forces that gave birth to jGeez is the damage geez fonts cause on the look and feel of websites with such a content. Be it a missing Unicode font or plain dreadful font that destroys the UI design that consumed hundred hours of the developers time, at the end of the day this geez content would degrade your web application in the eyes of the user unless you took steps to ensure consistent visual and interactive experience to the user.

Previous versions of jgeez tackle most of the pitfalls of geez font contents like missing Unicode detection and software independent geez typing, but one aspect that needed enhancement is its rigid default font approach. If you are using jgeez, you will be required to use one font (Jiret) and there was no option to change that.

With the newly released jgeez library (version 1.2.0.0), I have added more flexibility in using different kind of fonts to display your geez content. Courtesy of Eyasu from http://www.techsefer.com, I have included a list of fonts that can be used with jgeez. Now you can choose different  font based on the look you are trying to achieve on your website and maintain a level of uniqueness in your work.

By using jgeez and choosing the appropriate geez font to your site you will ensure that your layout is consistent and predictable across all the users and your design work is maintained regardless of the capability of the user’s operating system. The UI will retain its looks as you have defined it on your original design and you will be relieved of the unjust horror of the decisions made by the operating system and the browser geez fonts.

In addition to this major enhancement, with the release of jgeez 1.2.0.0 I have fixed a bug related to jquery plugins and AJAX calls. Courtesy of Getnet from http://www.ethiowired.com/ for identifying this issue and helping me fix it. I have a different blog entry about this issue and how I managed to fix it, if interested click here to view that detail.

All the downloads related to this release can be found at jgeez main website jgeez.com/downloads and details on how to utilize the new options can be found at jgeez.com/developerguide

jQuery plugin and Ajax

In the time when a data driven website’s only way to deliver the tiniest information to the user was a full-fledged web request, the advent of AJAX (Asynchronous JavaScript and XML) was one of the most significant milestone in dynamic web development. The browsers were able to do partial updates to their DOM (Document Object Model) and developers rejoiced to make web browsing experience more efficient and smoother.

AJAX came with the price of pitfalls like lower control to the browser user as well as bookmark unfriendliness among other things. But when compared to the amount of ease of use it brings to your web application, I believe introducing AJAX in your web application is more of a requirement that just a fancy addon at this point.

One of the benefits of having the capacity to do partial updates is the ability to create HTML elements on the fly based on the data retrieved from these AJAX requests. This dynamic restructuring of the DOM ( a fancy Acronym for HTML structure on the page :)) sometimes changes the location of elements on the page and hence messing up any jQuery events that might have been attached to these elements.

Well on a normal day you would have a simple routine to re-attach all the events on your page every time you make restructuring on your page (AJAX calls or DOM manipulation using Javascript). But when it comes to jQuery plugins this is not that simple as most jQuery plugins tend to create a lot of HTML elements to serve their purpose. Like for example jGeez creates toggle buttons and help button around the target input element. Obviously we can’t simply reapply the plugins to the elements as that would cause your plugin to regenerate the adorning elements. So the jQuery plugin author has the responsibility to empower the developers with a method to reattach the plugin events when he/she moves the target element around.

So the bottom line is the previous version of jGeez stops working when you are using AJAX or javascript to restructure your DOM, Thanks to Getnet from ethiowire.com who pointed out this bug. But in the new version of jGeez(1.2.0.0) I have added features where the plugin detects whenever the page does AJAX calls and reattaches all the events after the AJAX call is completed. I will just try to go through the technical details of how I have implemented the fix, if you are not interested in the inner workings click here to jump start your experience the latest and greatest jgeez library.

The first thing you need to do is to make sure you make the event handlers independent of (loosely couple) the business logic used to modify the DOM structure when the plugin is first applied, meaning avoid a code like this

$(this).click(function(event){

//do stuff

});

Instead use

//hold the reference in a local variable array

eventHandlers=[];

eventHandlers.push({element:$(this),eventName:’click’,handler:function(event){//do stuff});

Because you can iterate through each of the objects, you can reattach the event handlers whenever you want to. Well that is the methodology I used to make sure the utility is available for developers to invoke “reattaching” on jgeez plugins.