These days I noticed something quite interesting in rendering DOM elements by a sample browser. In my case this was Firefox, but whatever the browser was this happens always.

Let me explain you what was the case. I have to render 200 DIV elements, each with 2 pixels width and 30 pixels height. Thus you got something like a scale.

So far so good. The problem is that if you get some random width for the scale as the browser can be resized. If you’d like something like random space (gap) between the scale bars you get something like 7,35 pixels between every two bars.

Of course the browser cannot use non integer pixels so it starts to render gaps which are 7 pixels wide and in every few pixels it renders 8 pixel single gap. Thus he corrects this problem.

My advice is – don’t make the browser think and round the pixels. Use fixed integers to make browser flow faster. You can fix the whole width to be multiple of 200 pixels which is the number of bars.

Browser reflows and performance issues

What is a browser reflow? Well actually when you change some property in CSS like change of a color, width, height, font-size, etc. normally the browser redraws the layout just to fit the new requirements after the reflow.

The problem is not in the first render of the page. Than the CSS is just parsed and everything is positioned as the browser reads the CSS. The problem is when you change some CSS property using JavaScript, and in our case using jQuery.

In fact nowadays is very popular to make every kind of animation using JavaScript and most of the “big” libraries, such as jQuery, give you a built in set of functions just to make this task easier for you. Read the rest of this entry »

AJAX calls in jQuery

Just because I don’t want to write the same content twice, I’ll say that in jQuery the AJAX calls can be done by various ways, because there are many wrappers that helps you do this job depending of what you want from your application. However you can find more about $.ajax which is the main topic of this post in my previous post, where I described really in breve what it does and how it does it. Yet again just to be correct I’ll add that you can find more, of course, on the docs page of jQuery about AJAX.

Supported data types by $.ajax

In fact the $.ajax object according to the docs page support a large set of options that can specify the custom type of call you’d like to use in your application. Read the rest of this entry »

AJAX and jQuery

Just in breve as a powerful JavaScript library jQuery wraps the ability to call XHR within a built in interface. There are several ways to implement asynchronous calls. In fact you can call either .load or .post to perform custom calls.

$.load

In the case of .load you can chain it on every returned object from a custom jQuery selector: $(‘div’).load(.. than the content of the DIV is filled with the returned text.

But what if I want a OK and Error handlers?

The .load method doesn’t give such “complex” functionality. Than the built in $.ajax method comes in help. You can specify the URI, method, data, dataType, onSuccess, onError handlers, etc. Read the rest of this entry »

What is OK?

If you’ve written at least once the OBJECT and EMBED tags, without copy/paste you may have been noticed that the place of the EMBED tag is a bit strange. Actually after the OBJECT tag, comes the PARAM sequence, that simply defines different parameters for the flash movie.

And what looks strange?

The strange thing in all this is that the EMBED tag, which in fact is only one, instead of the case with all the parameters of the OBJECT, is displayed just before the closing of the OJBECT tag.

Experimenting …

What if the embed tag is outside of the OBJECT opening and closing tags. Actually only IE understands this as a problem. Than it displays the move twice!

That’s why the place of the EMBED is just before closing the OBJECT tag. In that case MSIE doesn’t “see” the EMBED and displays everything correctly!