Javascript rollover

Question

I'm stuck with the following challenge:

My table has a basic (static) alternating color scheme for even/odd rows, containing different options (class).
In addition Javascript should provide for:
1. a rollover effect to show which row is pointed at by the cursor (onmouseover, onmouseout)
2. a specific color for the row which contains the option selected by a mouse click (onclick).

I came up with the following code:

<html>
<head>

<style type="text/css">
tr.moduleRow-odd {
    BACKGROUND-COLOR            : #FF0000;
}

tr.moduleRow-even {
    BACKGROUND-COLOR            : #00FF00;
}

.moduleRowOver-odd, .moduleRowOver-even {
    BACKGROUND-COLOR            : #D7E9F7;
}

.moduleRowSelected-even, .moduleRowSelected-odd {
    BACKGROUND-COLOR            : #0000FF; 
}
</style>

<script type="text/javascript"><!--
var selected;

function selectRowEffect(object, buttonSelect) {
  if (!selected) {
    if (document.getElementById) {
      selected = document.getElementById('defaultSelected');
    } else {
      selected = document.all['defaultSelected'];
    }
  }

if (selected) {

if (selected.className == 'moduleRow-even' || selected.className == 'moduleRowSelected-even') {
selected.className = 'moduleRow-even';
object.className = 'moduleRowSelected-even';
}

if (selected.className == 'moduleRow-odd' || selected.className == 'moduleRowSelected-odd') {
selected.className = 'moduleRow-odd';
object.className = 'moduleRowSelected-odd';
}

}
//selected.className = 'moduleRow';
//object.className = 'moduleRowSelected';
selected = object;

// one button is not an array
  if (document.checkout_payment.payment[0]) {
    document.checkout_payment.payment[buttonSelect].checked=true;
  } else {
    document.checkout_payment.payment.checked=true;
  }
}

function rowOverEffect_1(object) {
  if (object.className == 'moduleRow-odd') object.className = 'moduleRowOver-odd';
}

function rowOverEffect_2(object) {
  if (object.className == 'moduleRow-even') object.className = 'moduleRowOver-even';
}

function rowOutEffect_1(object) {
  if (object.className == 'moduleRowOver-odd') object.className = 'moduleRow-odd';
}

function rowOutEffect_2(object) {
  if (object.className == 'moduleRowOver-even') object.className = 'moduleRow-even';
}

//--></script>

</head>
<body>

<table>
<tr class="moduleRow-odd" onmouseover="rowOverEffect_1(this)" onmouseout="rowOutEffect_1(this)" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onmouseover="rowOverEffect_2(this)" onmouseout="rowOutEffect_2(this)" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
</table>

</body>
</html>

When testing, after clicking a few times on the options, I loose the alternating static background (odd/even rows get the same color) and part of the rollover.

Any help is much appreciated.

Kind regards,

Dennis

Answer 1

I modified your selectRowEffect function in order to fix your logic problem

As you can see, you only need to check if the selected row is even or not and revert its class to what i should be (unselect it).

And then, you can change the clicked row's class to the corresponding selected one. Note that i used the ? : ? : ternary operator which basically tests for the condition before the ? and if it is true returns the part between ? and : otherwise it returns the part after the : . The returned value is then affected to the object's className.

Here is the fiddle to quickly see it in action.

function selectRowEffect(object, buttonSelect) {
    if (!selected) {
        if (document.getElementById) {
            selected = document.getElementById('defaultSelected');
        } else {
            selected = document.all['defaultSelected'];
        }
    }

    if (selected) {
        if (selected.className == 'moduleRowSelected-even') {
            selected.className = 'moduleRow-even';
        }

        if (selected.className == 'moduleRowSelected-odd') {
            selected.className = 'moduleRow-odd';
        }
    }

    object.className = buttonSelect == 1 ? "moduleRowSelected-even" : "moduleRowSelected-odd";

    selected = object;

    // one button is not an array
    if (document.checkout_payment.payment[0]) {
        document.checkout_payment.payment[buttonSelect].checked=true;
    } else {
        document.checkout_payment.payment.checked=true;
    }
}

Answer 2

I put the full code snippet below for others to use. All credit goes to Dany Khalife, who put me on the right track.

Remember to adjust the javascript to reflect your own: - file name (in my case: rollover_test ) - input field's name (in my case: payment )

<html>
 <head>
<style type="text/css">
tr.moduleRow-odd {
   BACKGROUND-COLOR            : #FF0000;
}

tr.moduleRow-even {
   BACKGROUND-COLOR            : #00FF00;
}

tr.moduleRow-odd:hover, tr.moduleRow-even:hover {
    BACKGROUND-COLOR            : #FFFF00;
}

.moduleRowSelected-odd, .moduleRowSelected-even {
    BACKGROUND-COLOR            : #0000FF; 
}
</style>
 </head>

 <body>
<script>
 var selected;

 function isEven(value) {
    if (value%2 == 0)
        return true;
    else
        return false;
}

function selectRowEffect(object, buttonSelect) {
    if (!selected) {
       if (document.getElementById) {
           selected = document.getElementById('defaultSelected');
       } else {
           selected = document.all['defaultSelected'];
       }
   }

   if (selected) {
       if (selected.className == 'moduleRowSelected-even') {
           selected.className = 'moduleRow-even';
       }

       if (selected.className == 'moduleRowSelected-odd') {
           selected.className = 'moduleRow-odd';
       }
   }

   object.className = isEven(buttonSelect) == false ? "moduleRowSelected-even" : "moduleRowSelected-odd";

   selected = object;

   // one button is not an array
   if (document.rollover_test.payment[0]) {
       document.rollover_test.payment[buttonSelect].checked=true;
   } else {
       document.rollover_test.checked=true;
    }
}
</script>

<table>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 2)">
  <td>Option 3 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 3" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 3)">
  <td>Option 4 - Row-even</td>
  <td><input type="radio" name="payment" value="option 4" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 4)">
  <td>Option 5 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 5" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 5)">
  <td>Option 6 - Row-even</td>
  <td><input type="radio" name="payment" value="option 6" /></td>
</tr>
</table>
  </body>
</html>

Note: The script works just as well when you alternate for XX between 0 and 1 in selectRowEffect(this, XX) , like this:

<table>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
   <td>Option 1 - Row-odd</td>
   <td><input type="radio" name="payment" value="option 1" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 2 - Row-even</td>
  <td><input type="radio" name="payment" value="option 2" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
  <td>Option 3 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 3" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 4 - Row-even</td>
  <td><input type="radio" name="payment" value="option 4" /></td>
</tr>
<tr class="moduleRow-odd" onclick="selectRowEffect(this, 0)">
  <td>Option 5 - Row-odd</td>
  <td><input type="radio" name="payment" value="option 5" /></td>
</tr>
<tr class="moduleRow-even" onclick="selectRowEffect(this, 1)">
  <td>Option 6 - Row-even</td>
  <td><input type="radio" name="payment" value="option 6" /></td>
</tr>
</table>

Javascript rollover

Question

2 answers

solution1
0 2013-07-11 19:03:39

solution2
0 2013-07-12 09:09:30

Javascript rollover

Question

2 answers

solution1 0 2013-07-11 19:03:39

solution2 0 2013-07-12 09:09:30

solution1
0 2013-07-11 19:03:39

solution2
0 2013-07-12 09:09:30