« automatic, more semantic image hovering

Alternating row colors and adding hover with javascript

Views: 1028

Keeping in my do-it-all-with-javascript theme, here's something else I created in order to keep the javascript completely separate from the HTML from the more javascript stuff.

It was originally created for the purposes of adding the hover onmouseover, but I also decided to add the alternating row color at the same time.

To be completely anal, I'll note that the hover is something that should be done with javascript (it pretty much has to be done in javascript anyways, and it's less part of the presentation than an action), while the alternating colors should be purely CSS.

However, this makes page creation easier. I also remember having some problems with reading the background color style from the row object, so this makes it easy.

It uses behaviour.

PLAIN TEXT
JavaScript:
  1. function init_hoverclick_list () {
  2.   var initList = {
  3.     'tr.hoverclick' :
  4.         function (el) {
  5.           el.list_mod = list_iterate++ % 2;
  6.           el.style.background = list_colors[el.list_mod];
  7.          
  8.          
  9.           el.onclick = function() {
  10.             url = document.getElementById(this.id + ':url').innerHTML;
  11.             location.href = url;
  12.           },
  13.           el.onmouseover = function() {
  14.             this.style.background = list_hover_color;
  15.           },
  16.           el.onmouseout = function() {
  17.             this.style.background = list_colors[el.list_mod];
  18.           }
  19.         }
  20.   };
  21.  
  22.   Behaviour.register(initList);
  23.   Behaviour.apply();
  24. }

This entry was posted on Saturday, December 16th, 2006 at 9:14 pm and is filed under kb, js. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Alternating row colors and adding hover with javascript”

  1. jesse Says:
    April 3rd, 2007 at 2:33 pm

    you should put an example of your script in the blog so people can see what it looks like in action

  2. Voip Solution Says:
    August 4th, 2007 at 11:08 am

    The plan of bonification of Telextreme is fantastic, therefore with few indications you can form a net of distribution of much success and excellent financial return. Visit: www.voipshop.tv

  3. all internal girls Says:
    December 5th, 2007 at 8:25 pm

    All Internal Girls…

    all internal girls…

  4. jenna jameson in action Says:
    December 18th, 2007 at 9:59 pm

    jenna jameson in action…

    jenna jameson in action…

  5. Anal Sex Anal Insertions Anal Sex Videos Says:
    July 4th, 2008 at 4:28 pm

    Anal Sex Anal Insertions Anal Sex Videos…

    I can not agree with you in 100% regarding some thoughts, but you got good point of view…

Leave a Reply

You must be logged in to post a comment.