Cross-wise MouseOver Highlight of table row, column and cell

Cross-wise MouseOver Highlight of table row, column and cell

This mouse over effect is perfect for tables like currencies, etc.

the best bit: it works also on the Lotus Notes Client..

Currency Table with Javascript Mouse Over effect

Currency Table with Javascript Mouse Over effect

HTML
Create a <table> with the ID “higlight”

CSS
.cur_row {
color: #000;
background: #FFE3B3;
}

.cur_col {
color: #000;
background: #FFF9B5;
}

.cur_cell {
color: #000;
background: #FDC743;
}

Javascript (execute it on XSPOnLoad)
function initTableHighlight()
{
var table=document.getElementById(‘highlight’);

if (table==null){
return;
}

function highlight(row, col, state)
{
for(var i=0; i<table.rows.length; i++)
{
if(state==’off’)
{
for(var j=0; j<table.rows[i].cells.length; j++)
{
tableElement = table.rows[i].cells[j]
dojo.removeClass(tableElement, ‘cur_col’);
}
}
if(state==’on’)
{
tableElement = table.rows[i].cells[col]
dojo.addClass(tableElement, ‘cur_col’);
}
}

for(var i=0; i<table.rows[row].cells.length; i++)
{
if(state==’on’)
{
tableElement = table.rows[row].cells[i]
dojo.addClass(tableElement, ‘cur_row’);
tableElement = table.rows[row].cells[col]
dojo.addClass(tableElement, ‘cur_cell’);
}
if(state==’off’)
{
tableElement = table.rows[row].cells[i]
dojo.removeClass(tableElement, ‘cur_row’);
tableElement = table.rows[row].cells[col]
dojo.removeClass(tableElement, ‘cur_cell’);
}
}
}
// end function highlight

// detect cursor position
for(var i=0; i<table.rows.length; i++)
{
table.rows[i].row_index=i;
for(var j=0; j<table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].column_index=j;
table.rows[i].cells[j].onmouseover=function()
{
highlight(this.parentNode.row_index, this.column_index, ‘on’);
}
table.rows[i].cells[j].onmouseout=function()
{
highlight(this.parentNode.row_index, this.column_index, ‘off’);
}
}
}
}

Warning
IE doesn’t make the job very good here.. Solution: set the disableTheme attribute on the RepeatControl Tag to “true” and remove the ID of the RepeatControl Tag…OR: create Header and Footer for the RepeatControl..
<xp:repeat id=”repeat1″ rows=”30″ value=”#{view1}” var=”repeat1″>

<xp:this.facets>

<xp:text disableTheme=”true” xp:key=”header” escape=”false”>
<xp:this.value><![CDATA[<ul>]]></xp:this.value>
</xp:text>

<xp:text disableTheme=”true” xp:key=”footer” escape=”false”>
<xp:this.value><![CDATA[</ul>]]></xp:this.value>
</xp:text>

</xp:this.facets>

<li><xp:text escape=”true” id=”name”>
<xp:this.value><![CDATA[#{javascript:repeat1.getColumnValue(“name”)}]]></xp:this.value>
</xp:text>
</li>
</xp:repeat>

Leave a Reply

comment-avatar

*