During this 2 years I gained my experience in jQuery and created my own jQuery Tabs Script completely from scratch. And I want to share it with you in this post.

I call it an universal, because it lets to create an unlimited number of tabbed blocks with an unlimited number of tabs, while the contents of the script remains unchanged (script size is only 0.4 kilobytes).

jQuery Tabs Script code

In my opinion, I’ve made a miniature and pretty jQuery script for a tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

(function($) {
$(function() {
 
  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current');
        var p = $(this).parents('div.section');
        p.find('div.box').css({opacity: 0}).hide();
        p.find('div.box:eq('+i+')').animate({opacity: 1}, 500).show();
      });
    });
  });
 
})
})(jQuery)

HTML code for the script

It very similar on a structure of HTML code of another jQuery tabs solutions, which I was seen:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="section">
  <ul class="tabs">
    <li class="current">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div class="box visible">
    Content of the first block
  </div>
  <div class="box">
    Content of the second block
  </div>
</div><!-- .section -->

Requied CSS for this HTML

1
2
3
4
5
6

.box {
  display: none;
}
.box.visible {
  display: block;
}

The .box class hides all tabbed blocks by default, but the .visible shows the desired block.

P.S.. Yes, perhaps I invented the wheel, but i get great pleasure from this process and simultaneously improve my experience in jQuery, and I don’t think this is so bad.

In this article I want to share jQuery script, that solves this problem. May be it will be usefull for someone.

What is interesting, while I wrote this post and have tested the script, I reduced its size about 2.5 times compared with the original version (this suggests that the same problem can be solved in different ways and always need to try to optimize JavaScript scripts).

Now lets look at the script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function() {
 
  /* Adding a class to TEXTAREA to determine the focus */
  $('textarea').focus(function() {
    $('textarea').removeClass('hasFocus');
    $(this).addClass('hasFocus');
  })
 
  /* Putting the focus by default on a first TEXTAREA */
  $('#textarea1').focus();
 
  /* Switching the focus by clicking Enter */
  $(document).keypress(function(e) {
    if(e.which == 13) {
      $('textarea').not('.hasFocus').focus();
      return false;
    }
  })
 
})

What we doing in this script? We add the .hasFocus class to the focused textarea, remove this class from a field that is not focused, and while pressing Enter focus switches to a textarea, that has no this class.

May be there is a shorter way to do the same, but, unfortunately, I not found simpler way to get a field, that has not the focus.

Demo

Look at the script in action.

But we will use them, while browsers like IE6, IE7 and IE8 will exist and while Microsoft will not create a normal browser, which will stand on equal with modern browsers like FireFox, Safari, Chrome and Opera.

We, web developers, are constantly faced with deficiencies of Internet Explorer, and CSS hacks allow to overcome them in most cases.

In this post I would like to group the personal CSS hacks for each of the 3 popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 probably not. Therefore the focus of this article is on a personal CSS hack for Internet Explorer 8.

CSS hack for Internet Explorer 6

It is called the Star HTML Hack and looks as follows:

* html .color {color: #C39;}

This hack uses fully valid CSS.

CSS hack for Internet Explorer 7

It is called the Star Plus Hack.

*:first-child+html .color {color: #66F;}

Or a shorter version:

*+html .color {color: #66F;}

Like the star HTML hack, this uses valid CSS.

CSS hack for Internet Explorer 8

I learned about it from a familiar russian web developer, who’s found it by experimental way. It looks like this:

.color {color: #0FC\0/;}

There are several similar variants of this hack, but this is the easiest. It’s very easy to remember. Just add the \0/ at the end of a CSS rule. This hack must go after the rules for all another browser, i.e.:

.color {color: #777;} /* for all browsers */
* html .color {color: #C39;} /* for IE6 */
*+html .color {color: #66F;} /* for IE7 */
.color {color: #0FC\0/;} /* for IE8, going last */

This hacks does not use valid CSS, therefore I recommend to use a conditional comments.

Demo

I’ve created a simple demo, it displays, what personal CSS hacks works fine for all 3 versions of IE. Take a look.

box-shadow for modern browsers (except IE8)

You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:

.box-shadow {
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

box-shadow for Internet Explorer

Download the ie-css3.htc file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make box-shadow:

.rounded-corners {
  behavior: url(ie-css3.htc);
}

It’s reasonable to connect this CSS through conditional comments.

Cross-browser box-shadow demo

In the following example you can see the demonstration of both CSS3 styles – border-radius and box-shadow:

• Internet Explorer support for CSS3 border-radius and box-shadow

Turn your attention on few limitations while using these solutions for IE.

Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.

I very long time was waiting for a moment, when I can safely use the border-radius property on my sites. And this moment has finally has come – now we can make rounded corners in Internet Explorer with his means. This method uses VML and behaviour.

border-radius for modern browsers

This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:

.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

border-radius for Internet Explorer

Download the border-radius.htc file, put it in the same place where your CSS file, and then use this CSS code:

.rounded-corners {
  behavior: url(border-radius.htc);
}

I think it’s better to put this CSS in a separate file and connect it using conditional comments:

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->

Demo

Download crossb-rowser border-radius demo.