SEE DEMO HERE

Step one : xHtml markup

I decided to use the most basic structure. 2 wrappers next to each other, one containing the actual tabs, the other the relative content to each tab. Both elements(tabs and content) receive the ‘active’ class when their are in fact active.

<ul id="tabz">
<li class="tab active">Tab1</li>
<li class="tab ">Tab2</li>
<li class="tab ">Tab3</li>
</ul>
<div id="tabz_cont">
<div class="cont active">Content 1</div>
<div class="cont">Content 2</div>
<div class="cont">
<h1>some other content</h1>
Content 1

</div>
</div>

Step two : Css

I used a grid system (http://960.gs) to position and give widths to all the elements, beside that, I used some css3 techniques to beatify my tabs (rounded corners and shadow).
The actual css you use, isn’t important to the work of the tabz.

Step three : JAVASCRIPT

This is the reason why you are reading this, right? here you go:

//Tabz code - apply event to the tabs elements and your done
$('#tabz li').live('click',function(){
_index = $(this).parent().children().index($(this));
$(this).addClass('active').siblings().removeClass('active');
$('.cont').removeClass('active').eq(_index).addClass('active');
});

I select the tabs and assign them a click event listener, with the live() function.

Then I create an _index variable, that will tel me the index of the tab inside it’s parent.

By this _index I can now show the relevant content in the content div(the tabs and their content have to be the same index in their respective containers)

That’s it. Hope you can use this. If you do, don’t forget to comment here and show me your work.

I’s a consept website, in flash, I created some time ago and didn’t finish.

It has a couple if nifty things to play with (draggable birds, media buttons in form of floating balloons,a very unique panoramic background)

And I decided to port this whole thing into JS with MooTools and it’s FX.Scroll function.

So in the next couple of days I will be posting the results here and the code also.

Cheerz

Internet Explorer 6 was included (and I beleive still is) with Windows XP.

In turn, XP was released in October 2001! That’s 8 years ago.

Think about it. 8 YEARS.

Die ie6! DIE!

And yeah yeah I know…there are issues of accessibility involved, and many people simply cannot install new software (officces and GP policy ) and they are STUCK with IE6.

But personally, I don’t care.

As a webmaster, I do twise the work, trying to make up for IE6′s standart non-compliance.

• I need to create another stylesheet (conditional comments to the resque)
• I have to figure out what exactly is wrong with IE6 and how to fix it (google helps me here alot)
• I have to use different graphics or extend the website with javascript to achieve transparency.
• I have to clean up all the hair on the floor, hair I previously tore from my head in anger with IE6.

The thing is, in Israel, as little as 10% – 15% of all websites are standart compliant. That’s because nobody here really cares about web-standarts (very few do : KCS is one of them) , and it becomes something of a needed skill to know how to write mark-up for both standart-compliant browsers and otherwise(ie6 + ie7).

Ok, so I agree, when most of your clients still use ie6 , you have to build their website’s accordingly.

But personally, NO!

That’s why this blog and other personal websites I will build from now on, will not even be tested with IE6 or IE7. Well maybe IE7, but that’s about it.

IE8 is almoust here, and it’s good. Nice and standart compliant. No need for hacks of any sort.

Ok so i’m working on this site at work, and our creative designers decided it should have a news ticker in Javascipt. A fade-in/out kind of thing.

I used Mootools (of course) to write a simple script for this. And then I noticed something very strange. While in transition, both in Firefox and IE (6 and 7) the text got Garbled and rendered strangely.

Problem :

I then noticed this deal on another websites :

getstisfaction.com

Preview :

I tried to recreate this , and I made it happen only in IE for some reason.

FIX :

All that needs to be done, is to add background color to the absolute positioned elements that get faded in and out…

like so :

.fade_div{
position:absolute;
background-color:#fff;
}


I opened this blog, to share my thoughts on different things I come accross in my field.

I’m a web-designer and web-developer for a year now.

I do mostly PHP and JavaScript (usually mootools), also I really love everything that has to with mark-up (xHTML and CSS)

Everyday I learn something new, and this will be the place to share my newly acquired knowledge.