Tab with link and mouesover effect

Posted by Régis in English, Informatique on 12 juin 2009

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:

PLAIN TEXT
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

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

I have now

PLAIN TEXT
HTML:
  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:

PLAIN TEXT
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

PLAIN TEXT
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:

PLAIN TEXT
JAVASCRIPT:
  1. $(".clickable-tab").css("cursor","pointer");

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

, ,

Pas de commentaires

KDE and video mode not supported [SOLVED]

Posted by Régis in Linux on 7 juin 2009

Today, in KDE, I have started a windows application throuh wine. The applicaiton tried to change the video mode, and my screen turned blank with "Video mode not supported". This means that the resolution or refresh rate are not supported by the screen.

Alright, I restart my X11 server. I can log in, and during the initialisation of the KDE session, the screen went blank again. Usually this is configured in /etc/X11/xorg.conf, but this is obviously correct since I have the KDE login manager (kdm). Something during in KDE changes that.

My first idea was that the wine applicaiton was still in the KDE session. Being exectuted during the startup, it would push the new unsupported video mode.

Actually, it's much more simple. There is a configuration file called ~/.kde4/share/config/krandrrc which defines the resolution, à la randr (X Resize and Rotate Extension)

,

Pas de commentaires

Thème photo: le rond

Posted by flickr in Photo on 31 mai 2009

IMGP2833

IMGP2833,
originally uploaded by wakaseoo.

Aujourd'hui, j'ai fait une sortie photo avec Heng ; On a retenu comme thème "Le rond"

Pas de commentaires

Retour de Barcelone

Posted by Régis in vacances on 30 mai 2009

J'ai passé une très bonne semaine de vacances à Barcelone. J'ai visité la capitale catalane pour la première fois. L'architecture est très intéressante. Le centre historique est très latin ; le quartier plus récent de l'Eixample est au contraire à l'image de Madrid, très aéré, très allemand.

Les musées sont intéressants sans être exceptionnels. J'ai adoré le musée Miro, mais ai été assez déçu par le musée d'art contemporain. Beaubourg reste loin devant par la richesse et la diversité de sa collection.

Évidemment, il a fait un temps superbe :-)

2009-05-24 Barcelona

2009-05-24 Barcelona

Pas de commentaires

Grosse frayeur ce soir

Posted by Régis in Linux on 14 mai 2009

Ce soir, mon ordinateur ne démarre pas. Un système de fichiers n'a pas pu être monté à cause d'incohérences. Manque de bol, il s'agit de /home. Mais je suis encore confiant.

Le fsck échoue. Je suis un peu moins confiant. Je décide de l'appliquer directement sur le disque, et non sur le périphérique RAID. Je veux donc démonter mon RAID, mais il refuse car il y a un volume actif sur le RAID.

Hé oui, car j'utilise LVM... En fait, j'ai deux disques /dev/sda9 et /dev/sdb2 agrégés en RAID 1 (mirroring) sur /dev/md0.
J'ai placé ce /dev/md0 dans un groupe physique LVM /dev/raidvg.
Et sur ce groupe physique, j'ai créé un volume logique /dev/raidvg/home sur lequel est monté mon répertoire /home

A ce stade, je me dis donc qu'il me suffit de stopper mon LVM. Et je lance (un peu à l'improviste) la commande vgremove sur /dev/raidvg. Il me demande la confirmation du retrait de /dev/raidvg/home dans la foulée.

Et là, je me rends compte qu'il est absurde de lancer fsck sur /dev/sda9 car ce volume sert uniquement de support à LVM et n'est pas la partition de données en tant que telles.

Et c'est à ce moment que j'entre en mode panique: je n'ai pas moyen de récupérer ma configuration LVM car je l'ai détruite!

Il y a bien sur un vgcfgrestore, mais il nécessite un fichier de backup dans /etc/lvm/backup et je n'avais pas vu la commande vgcfgbackup!

Avant de recréer un nouveau système de fichiers sur ce nouveau volume LVM, je me dis que LVM doit bien pouvoir redétecter l'ancienne configuration. Je cherche désespérément avec lvscan mais non...

Et là je découvre qu'il y a un répertoire /etc/lvm/archive. Avec pleins de fichiers; LVM est génial. Il a créé un backup à chacune des opérations que j'ai faites avec lui depuis la création des volumes physiques. Je retrouve la configuration d'avant catastrophe, et fais une copie dans /etc/lvm/backup.

Je retrouve mon volume logique sans problème, et je finis par reconstruire mon système de fichiers à coups de fsck.reiserfs

Et j'ai retenu la leçon: la panne disque n'est pas la seule façon de perdre ses données. Je fais une copie de tout mon /home sur un autre système de fichiers. Il faudrait que je grave tout ça.

Et LVM est génial.

, , ,

1 Commentaire

xsl that does nothing

Posted by Régis in Informatique, Programmation on 14 mai 2009

Well, it does one thing: it writes the input XML as is:

PLAIN TEXT
CODE:
  1. <xsl:stylesheet version="1.0"
  2. xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3.  
  4. <xsl:template match="/">
  5. <xsl:copy-of select="." />
  6. </xsl:template>
  7.  
  8. </xsl:stylesheet>

Pas de commentaires

Mario dit You are Mr Gay

Posted by Régis in Brève on 6 mai 2009

Toujours dans la série des graphismes qui ont un message caché, voici la pochette de Mario galaxy. J'ai passé en sépia l'image, sauf les lettres qui ont une étoile brillante.

Super mario galaxy says You are Mr gay

Super mario galaxy says You are Mr gay

, , ,

1 Commentaire