Hi, everybody!

Let’s dance for a little around my favorite JavaScript framework jQuery!

Today I’d like present you my new creature based on it.
This is new jQuery plugin the purpose of which gives you easy way to create tabbed UI elements on your pages.

Let’s look the peaces of code.

JavaScript initialization code:

HTML part of code:

The picture shows how it will look on a page:

Main features of jQuery.gTab plugin which I consider as its specific advantages:

• Myself exclusive design of tab labels (items), which I consider as very compact, smart and quite pretty. I have got in from the one of mine old successful project. When I had seen it again, I decided to relive good solution.
• It’s support multi instance of tabbed controls on the page.
• You can bind yourself handler, which will get content for new tab by Ajax for example.

Download, get more details and see other interesting examples of usage you can on the jQuery.gTabs page.

I will happy to see your comments about, thank you in advance!

I has found a strange limitation for IE (tested in IE7) when we make <input type=checkbox> object dinamically trough DOM manipulation methods.

So try to set in the same way ‘checked’ value like:

Don’t give proper effect. The same won’t give proper effect other variants:

Of course all of them do the same and no reason check all of them, but when don’t know exactly where is problem begin check all possible variants

Any way I found in Internet solution that gives right effect:

Furthermore, trough div.lastChild will work correct all variants that presented above.

Link to page where I found solution.

I sure ‘checkbox’ isn’t one of property that in IE can be defined on “live” object only, somethings like this I had when was trying to set ‘onclick’ attribute for dynamic element, but I solved it with help addEventListener and attachEvent handlers, they work fine in “off-line” elements.

I decided write small helpful plug-in for jQuery framework.

Propose.

Often we use textarea element in back-end to supply a possibility to enter multi-line content. However the block that is destination for this in front-end can have strong limitations for width and height (for example news announces must be put in strict appropriated by super-puper design of our site area). Unfortunately  textarea element doesn’t have native support settings that help easy implement that restriction. The jQuery.Limiter plug-in add this feature for textarea elements.

Go to jQuery.Limiter page to get more details and see examples.

Few days ago I read interesting article about non-trivial syntax of JavaScript.

And today I had the chance to met using of this kind magic in real practice. Let me show this small example.

I have a simple form with one field which always have to be filled for success submitting, to reduce a cycles of interaction between server and client browser I’d like to use JavaScript that will check form before submitting and prevent cause when user forgot fill value. Below I show the piece of code that we can solve this problem:

I think it’s cleae and doesn’t require any explanations. Now suggest hypothetical situation when we don’t like write special function for checking only one field and would like to put it directly in onchange attribute, how will code look in this case?

This code looks terrible and mixed, but I wouldn’t like to discuss it here, because my purpose here in other. I’d like to show way to use inline handlers function in general. That’s all.

I’d like to use only FF, but unfortunately most of customers prefer use IE. I don’t cry about it, it’s life and sometime it makes life more colorful and we should invent new hacks to solve customer’s requirements. Of course sometime it’s boring.

FF has collection of very powerful tools for debugging of web pages, DOM, CSS, HTML:

• Firebug;
• Web Developer;
• Hackbar;
• Live HTTP Headers.

Almost time this tools are enough to make solutions that will work properly in both browsers. But sometime we also should have possibility provide debug session into IE too. Because it has her own sight for HTML, CSS, JS.

I’d like present some links where can find out some tools that are give that possibilities:

• IE Developer Toolbar
• Rich collection of tools here

I don’t have time to make now more wide article about programs from those links, I’ll do it later.