Archives par mot-clé : HTML

Tab with link and mouesover effect

I like the user experience offered by 01net. There is a contextual text which changes when the mouse goes over titles positionned in tabs, and the tabs titles are links to a more detailed page.

I’ve done the tab widget with clickable links with jQuery (live demo). I have slightly extended the original jQuery UI tabs by BKlaus Hartl.

First you need to include the jQuery library.

Then set up a the tabs widget.

By default, the content of the tab panel is changed when you click on the tab. I want to change this behaviour, and select a tab with the mouseover event instead. Jquery provides an option for this:

javascript

  1. $('#tabs').tabs( {
  2.   event: 'mouseover'
  3. });

Now comes the hard part. I want to change the event handler triggered when clicking a tab. As the documentation might suggest, I tried to set the select event handler.

However, it turns out that a tab is now « clicked » when the mouse rolls hover, because of the event I have changed before. The jQuery documentation should say that select is « The event which is triggered, as defined by the event option (or, by default, when the link in the tab title is clicked) »

So I have decided to overide the click event on the link. To do this, I have added a class attribute to my links. Instead of

  1. <li><a href="#fragment-1" id="tab-one" rel="ahah_1.html"><span>One</span></a></li>

I have now

  1. <li><a href="#fragment-1" id="tab-one" class="clickable-tab" rel="ahah_1.html"><span>One</span></a></li>

As you can see, I have decided to rely on the « rel » attribute to define the real link, and this looks rather appropriate.

And of course, I have defined some Javascript to handle the click:

javascript

  1. $('.clickable-tab').click(function(){
  2.     document.location=this.rel;
  3.     return false; });

Edit: to improve the user experience, discret-incognito advised me to set the pointer to cursor for the links on tab titles. This is done in one line of CSS

  1. .clickable-tab  {
  2.     cursor: pointer;
  3.     /* cursor: hand;   -- add this for IE 5. I don't care */
  4.   }

But because, this is overridden by jQuery-UI, it doesn’t work ‘or just a fraction of second). I actually have to overload jQuery:

javascript

  1. $(".clickable-tab").css("cursor","pointer");

Thanks for reading, enjoy the live demo of tabs widget. Hope this helps!

Webmasters, vérifiez votre travail

On ne répètera jamais assez l’importance de respecter les standards. Une page web qui ne les respecte pas à toutes les chances de mal s’afficher voir de ne pas fonctionner sur différent navigateurs (y compris sur IE7).

Pour éviter la catastrophe, on peut faire auditer son site par des services comme ocawa ou Mon opquast. Ces services regardent aussi un certain nombre de bonnes pratiques (exemple: « L’adresse du webmaster est clairement indiquée sur la page de contacts »), notamment celles édictées par l’Administration française en ligne.

Je parle de tout cela parce que je viens de découvrir une extension pour firefox bien pratique: Ocawa toolbar indique sur la page auditée les erreurs constatées.

screenshot of an audit

C’est fou ce qu’on peut faire avec du XHTML et du CSS

Beaucoup de sites web ont un code HTML affreux, et sont lourds à charger. La fnac est l’exemple typique de ce qu’il ne faut pas faire. Il y a plein de tableaux et de sections div.

Pourtant, on peut faire des choses très jolies, très simplement, comme le montre le très fameux Zen garden. Et je viens de tomber sur un exemple beaucoup plus ludique: la femme qu’on peut déshabiller (enfin pas tout à fait).