Selectors, optimizing time and jQuery

When I  learned  to use jQuery, it was necesary to me to understand the several  kinds of selectors to do the same duty.

To confront the problem of to do the init of  a few Datepicker calendars (10 in total ), the first way was to make the follows selector (class selector):

<script>
$(".datepicker").datepicker();
</script>

The problem of this kind of selector is that each time that you do it, the jQuery do a whole search by all DOM. In fact, to do this sentence takes a few seconds.

Searching a solution to this response time GAP, the selector was changed by the follows code (a for with id selector):

<script>
var arrId=new Array("id0","id1","id2","id3","id4","id5","id6","id7","id8","id9");
for (x in arrId) {
$("#"+arrId[x]).datepicker();
}
</script>

Where the arrID var is a array with the id's by each  element to set as a datepicker. The id selector always be faster because uses the feature of a document.getElementById() search. This code just takes arround a second.

A weakness of DatePicker widget

A jQuery's widget, the datepicker, have many users in the website programming field.

But, nothing in programming is perfect. When a webpage includes several calendars (datepicker objects), the init process for each calendar gives atime gap undesired.
Testing in a PC(intel core 2 duo), when init the datepicker calendars, you could have a 500ms time wasted by each object.

Of course, the most webpages have just 1 or 2 calendars, but I need a page with 10. Moreover, we needed the calendars with lenguage's distintion, so, when makes the lenguage's settings the init process was slower.
Apparently, the code .datepicker(option, {var:valor, var:valor}) or options set later to init take more time in the execution than realy we  want. I don't check the sources yet, but in facts, it's clear that for each sentence to init a calendar we produce a time gap when set options.

How to solve this?
By now, we add a previous code (execute on server side, like PHP or ASP code) that using the lenguage defined by the page's user inserts a javascript like this before to init the calendars:

<script>
jQuery(function($){
$.datepicker.setDefaults($.datepicker.regional['es']);
});
</script>

With this reduce the load time from 5 to 1 second.

Publishing HTML code

To publish HTML code in a blog, is necesary to write the code as an "entity-encoded markup". To don't do it by hand, there is a site called simpleCode that does it easier as a copy and paste.

Just need to visit the form and use it.

The important link: http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process.

Internet Explorer and CSS classes

Programming with jQuery an interactive menu to my work website, I realize a curious behavior of Internet Explorer(IE), why not.

Everytime that you  use jQuery code like this: 

$(this).addClass("clicked");

You will see an erratic behavior. If the element (this) have more than one class, the IE have problems to resolve the heritance and procedence to finaly apply the desired style. But this works with others browsers like Firefox(FF) or Chrome.

The only way I know to avoid this, it is use the css jQuery function. In facts, this function does a style attribute definition in the element. By example, suppose a li element like the following:

<li id="li_0" class="classLi otherClass andOtherClass">
<a href="#">Testing element</a>
</li>

and run this jQuery code:

$("#li_0").css( { 'background-color' : '#C0C0C0', 'color': '#FFFFFF'} );

The li element inside the DOM will be setting like this:

<li id="li_0" class="classLi otherClass andOtherClass" style="background-color: #C0C0C0; color: #FFFFFF;">
<a href="#">Testing Element</a>
</li>

And because the style attribute of an element has dominance over every previous CSS definitions, you will get the desired effect. Using this, IE and FF can have the same final behavior.

Useful link: http://www.visualjquery.com/

jQuery

This entry doesn't need any comment. If somebody is writing a lot of javascript, try with jQuery.  This tool is  very powerful  because has selectors and useful predefined functions.

The official website is  http://www.jquery.com.

I recomended to take a look to UI website too,  http://jqueryui.com/.
I resolved to use jQuery because exists a widget called datepicker that solves many problems that I have with other similar javascript artifact to give support to IE 6.0.

When you feel comfortable, visit this 7 things I wish I had know about jQuery, and this Working with Events part 1, and if you want to check some blogs, look at this: 15 blogs to follow for jQuery lovers.



Others important links:
http://plugins.jquery.com/ site with a lot of jQuery's plugins.
http://jquerylist.com/ a list with plugins and useful widgets.
http://www.visualjquery.com/ very useful site to search jQuery functions references.
http://www.addedbytes.com/cheat-sheets/download/javascript-cheat-sheet-v1.png  An useful "cheat sheet" to whom knows javascript programming lenguage and just needs a memory help.

Another Technical Blog

This is another technical blog, but this blog doesn't aspire to be cited by a lot of programmers o designers. Just it is a help to my memory like a notebook, and if somebody else thinks that this is useful, great!