Archive for the ‘Browsers’ Category

jQuery.gTabs plugin - tabbed interface plugin

February 7th, 2008 by Denis Golovtsov

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:

$(‘#gTabs_1′).gTabs([‘tab 1′,‘tab 2′, ‘tab 3′,‘tab 4′]);

HTML part of code:

<div id=“gTabs”></div>

<div id=“_tabs_0″ class=“_tabs_area”>body of tab 1</div>
<div id=“_tabs_1″ class=“_tabs_area”>body of tab 2</div>
<div id=“_tabs_2″ class=“_tabs_area”>body of tab 3</div>
<div id=“_tabs_3″ class=“_tabs_area”>body of tab 4</div>

The picture shows how it will look on a page:
shoot1

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!

IE DOM limitation for <input type=checkbox> element

August 7th, 2007 by Denis Golovtsov

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

var h = document.createElement(‘input’);
h.setAttribute(‘name’,‘flag’);
h.setAttribute(‘type’,‘checkbox’);
h.setAttribute(‘value’,1);
div.appendChild(h);

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

h.setAttribute(‘checked’,true);

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

h.setAttribute(‘checked’,‘checked’);
h.checked = true;
h.checked = ‘checked’;
h[checked] = true;
h[checked] = ‘checked’;
h[‘checked’] = true;
h[‘checked’] = ‘checked’;

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:

div.appendChild(h);
div.lastChild.checked = true;

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.

IE debug tools

May 18th, 2007 by Denis Golovtsov

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:

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