Advanced table cell/row/column background rollovers

tobiaseichner · December 17, 2009, 1:58pm

Hello,

I know about the “Cell BG Colour on Rollover” action from easibase to add a rollover effect to tables. Unfortunately this action has some disadvantages, especially that it has to be applied to each table cell (no table-wide catch-all option).

Is there an action available that changes colours for entire rows or columns when moving the mouse over a particular cell of this row or column ?

Ideally it should be possible to give the cell where the mouse pointer moves over a given color and apply an other color to its parent row and column.

Do you know of an action that is capable of doing this ?

Tobias.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · December 17, 2009, 5:15pm

I haven’t had much luck with using a style on the TR to do this, the only way that seems to work in most browsers is to style all the TDs within a given row.

Using this method, you’d probably want to choose between highlighting the column or the row, but if you apply both observers, then both axes will highlight.

Here’s a way to get this behavior for all tables on your page (so you probably don’t want to use this on a non-CSS-layout page).

Create a classname style called ‘highlight’ (enter .highlight in the Tag field in the Edit Style dialog, tab into the Name field, delete whatever is there, and tab out again to “stick” the preference). Give this style a background color or whatever other attribute you like to indicate the highlight.
Apply the Protaculous Action to your page. Select prototype-packed as the library.
Click on the bottom Function Body button in the Actions palette and paste the following code:

var unHighlight = function(evt){
	evt.stop();
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'table') elm = elm.up('table');
	elm.select('td').invoke('removeClassName','highlight');
}
var highlightRow = function(evt){
	evt.stop();
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up('td');
	if(elm){
		var t = elm.up('table');
		var tr = elm.up('tr');
		if(tr){
			for (var i = tr.cells.length - 1; i >= 0; i--){
				$(tr.cells[i]).addClassName('highlight');
			};
		}
	}
};
var highlightColumn = function(evt){
	evt.stop();
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up('td');
	if(elm){
		var t = elm.up('table');
		var tr = elm.up('tr');
		if(tr){
			for (var i = tr.cells.length - 1; i >= 0; i--){
				if(tr.cells[i] == elm) var c = i; 
			};
			for (var i = t.rows.length - 1; i >= 0; i--){
				for (var j = t.rows[i].cells.length - 1; j >= 0; j--){
					if(j == c) $(t.rows[i].cells[j]).addClassName('highlight');
				};
			};
		}
	}
};
$$('table').invoke('observe','mouseover',highlightRow);
$$('table').invoke('observe','mouseover',highlightColumn);
$$('table').invoke('observe','mouseout',unHighlight);

If you want to make this specific to one table only, you could modify the selector to apply it to one table on the page by adding the ID of the table item (you’ll see that on the Inspector in the Name field). For example, $$('table') would become $$('#item4 table').

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tobiaseichner · December 17, 2009, 7:40pm

Thank you for your efforts to work out an example

I’ll give it a try (probably over the weekend when I have more time) and then let you know.

Tobias.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · December 18, 2009, 5:54pm

I was staring at this and realized it could be made a lot more “Prototype-y”:

var unHighlight = function(evt){
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'table') elm = elm.up('table');
	elm.select('td').invoke('removeClassName','highlight');
}
var highlightRow = function(evt){
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up('td');
	if(elm){
		elm.up('tr').select('td').invoke('addClassName','highlight');
	}
};
var highlightColumn = function(evt){
	var elm = evt.element();
	if(elm.tagName.toString().toLowerCase() != 'td') elm = elm.up('td');
	if(elm){
		elm.up('table').select('td').findAll(
			function(td){
				return (td.cellIndex == elm.cellIndex);
			}
		).invoke('addClassName','highlight');
	}
};
$$('table').invoke('observe','mouseover',highlightRow);
$$('table').invoke('observe','mouseover',highlightColumn);
$$('table').invoke('observe','mouseout',unHighlight);

All those for loops were looking old-school.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tobiaseichner · December 18, 2009, 8:32pm

I’ll give it a try this weekend.

Thanks again

Tobias.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tobiaseichner · December 21, 2009, 1:31am

Just to let you know that it worked well.

Thanks again for your help

Tobias.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 7, 2013, 11:33am

Walter

I tried this little trick to highlight a row in a table. Looks great, however it interferes with another use of Protaculous on this page (the scroll arrow on the far left). Is there away around this?

http://www.biscaya.com/beg_show.html

I am simply wanting to improve the “roll over indicator” for the table rows.

Any suggestions would be helpful
Thanx

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 7, 2013, 4:01pm

I can’t see the table cell highlighting code anywhere in your page head. I do see a million items in that page. Can you try cutting it down so all you have is the table, the slider and its controls, and nothing else?

Walter

On Jan 7, 2013, at 6:33 AM, Zignar wrote:

Walter

I tried this little trick to highlight a row in a table. Looks great, however it interferes with another use of Protaculous on this page (the scroll arrow on the far left). Is there away around this?

http://www.biscaya.com/beg_show.html

I am simply wanting to improve the “roll over indicator” for the table rows.

Any suggestions would be helpful
Thanx

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 8, 2013, 8:41am

Try this cleaned up version… hopefully better.

http://www.biscaya.com/temp

Thanx
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 8, 2013, 1:17pm

The CSS way would be to create the tag-style tr:hover and set the
background color with the Style Editor. This creates a mouseover event that
is controlled by CSS and won’t interfere with your javascript.

–
Ernie Simpson

On Tue, Jan 8, 2013 at 3:41 AM, Zignar email@hidden wrote:

Try this cleaned up version… hopefully better.

http://www.biscaya.com/temp

Thanx
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 8, 2013, 2:43pm

Much easier to see what’s going on there. I still don’t see any table highlighting rows going on here in code, just the slider (which works fine).

Here’s a gist with your code (up to the comment) and 5 additional lines to highlight the table rows when you mouse over them:

gist.github.com

https://gist.github.com/walterdavis/4484231

gistfile1.js

var s = new Control.Slider('thumb','track', {axis:'vertical'});
var f = function(value){
  var inner = $('innerDiv');
  var h = (inner.getHeight() - inner.up('div').getHeight());
  inner.style.top = (Math.round(value * h) * -1) + 'px';
}
s.options.onChange = function(value){
  f(value);
};
s.options.onSlide = function(value){

This file has been truncated. show original

To use this, you will need to make a style with the selector td.over, with its background-color set to your desired highlight color. Note that this only highlights the rows, not the columns. If that’s something you need, I would have to dig back into my original example and see what it would take to make it work.

Walter

On Jan 8, 2013, at 3:41 AM, Zignar wrote:

Try this cleaned up version… hopefully better.

http://www.biscaya.com/temp

Thanx
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 8, 2013, 3:55pm

Regarding scrolling data tables, couldn’t the table be put in a
fixed-height div box with overflow set to auto? This would require no
thumb-slider control as the browser would provide that (as well as mouse
scrolling)?

Here is a different script for scrolling data tables:
http://www.datatables.net/examples/basic_init/scroll_y.html

–
Ernie Simpson

On Tue, Jan 8, 2013 at 9:43 AM, Walter Lee Davis email@hidden wrote:

Much easier to see what’s going on there. I still don’t see any table
highlighting rows going on here in code, just the slider (which works fine).

Here’s a gist with your code (up to the comment) and 5 additional lines to
highlight the table rows when you mouse over them:

https://gist.github.com/4484231

To use this, you will need to make a style with the selector td.over,
with its background-color set to your desired highlight color. Note that
this only highlights the rows, not the columns. If that’s something you
need, I would have to dig back into my original example and see what it
would take to make it work.

Walter

On Jan 8, 2013, at 3:41 AM, Zignar wrote:

Try this cleaned up version… hopefully better.

http://www.biscaya.com/temp

Thanx
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 8, 2013, 7:32pm

I feel ignorant among such wizardry…!

First I tried to insert the additional code for highlighting the row, as suggested but I must have done something wrong… http://www.biscaya.com/temp

Second I tried the suggestion from Ernie… looks and works great: http://www.biscaya.com/temp2
Is there anyway I could loose that ugly scroll bar to the right of the div? Or at least move it to the left…? (I now remember that’s why I went with the protaculous/javascript to start with)

THANK YOU BOTH!

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 8, 2013, 7:50pm

This appears to create a darker background color on each row you mouse over. In what way isn’t it working for you?

Walter

On Jan 8, 2013, at 2:32 PM, Zignar wrote:

First I tried to insert the additional code for highlighting the row, as suggested but I must have done something wrong… http://www.biscaya.com/temp

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 8, 2013, 7:59pm

Just saw it… it is the CSS [tag-style tr:hover] that is displaying.
The java does not work for me…

I am happy with this solution. I like the scrolling in http://www.biscaya.com/temp2 better (scroll anywhere in the window). The only problem now is the big ugly scroll bar! Any suggestions to how I can get rid of it?

THANX
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 8, 2013, 10:12pm

The scroll bar is a creation of the browser or operating system, and not
really something you can do anything with. I would suggest living with it,
or elongating your page to accommodate the entire table, thus eliminating
the scroll.

A better use of your time would be to remove the fake dark background from
the quite nice background photo, then apply a background color to the div
which is enclosing the table… Right now, if the background image fails to
load no on can read your white on white table. There are actions to give a
similar background effect to the enclosing div

http://actionsforge.com/actions/view/236-css3-rgba-backgrounds

http://actionsforge.com/actions/view/235-css3-shadow-extra

–
Ernie Simpson

On Tue, Jan 8, 2013 at 2:59 PM, Zignar email@hidden wrote:

Just saw it… it is the CSS [tag-style tr:hover] that is displaying.
The java does not work for me…

I am happy with this solution. I like the scrolling in
http://www.biscaya.com/temp2 better (scroll anywhere in the window). The
only problem now is the big ugly scroll bar! Any suggestions to how I can
get rid of it?

THANX
Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 8, 2013, 11:18pm

OK, but why would the background page fail to load?

Also, as you can see, mouse over in the first column reveals hidden layer. Is there anyway I can make the whole row act that way? (without a bunch of text rollover actions)

Thanx again

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Zignar · January 8, 2013, 11:42pm

Oops, just discovered something else…

That tag-style tr:hover took over all my other pages as well.
Can I limit it to this page only?

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie_Simpson · January 9, 2013, 12:25am

Why would the background image fail to load?

  1. The server fails to find the image.

  2. The server fails to find the image location, or the location

changes.

  3. The server fails to recognize the image name, or the image name

changes.

  4. The user's gateway/firewall/device/browser fails to load the

image, for whatever reason.

  5. The user's browser/settings break your design in an unexpected

way. The image loads, but not aligned under your table so to make it
readable.

  6. Shit happens.

There’s no rule that says you have to care if something happens beyond your
control. Some designers plan for how different browsers display their page…
planning for image failure or style failure is just more of the same.

Is there anyway I can make the whole row act that way?

You probably used an action, so I don’t know what the limitations of that
action is. Whether you can use it on the whole row depends on the
limitations of the action. What I can see in the source code are three
specific attributes added to the link or anchor tag for those first-column
items. They are onmouseover, onmouseout, and class. I don’t see why you
couldn’t replicate those attributes and their values on text links in those
rows - which is not the same thing I think as you’re asking. And it is
advanced, complicated work. What you really want is to wrap the tr element
in link tags then extend those link attributes. More complicated still.
Maybe someone else has a suggestion, as I can only think of very hard ways
to do that.

Can I limit it to this page only?

If you extend the table itself with an id (id=“mytable”) then rewrite your
new style to be

table#mytable tr:hover

then CSS will apply it only to that table. Alternately, you can remove the
style from the Style Editor then place it in the head of just that page by
pasting just before the

  <style type="text/css">

  table#mytable tr:hover { background-color: #000000; }

  </style>

Best wishes,

–
Ernie Simpson

On Tue, Jan 8, 2013 at 6:42 PM, Zignar email@hidden wrote:

Oops, just discovered something else…

That tag-style tr:hover took over all my other pages as well.
Can I limit it to this page only?

Sverker

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options