coloring row background and popping a mini side bar for that table, using jquery

[anubhavk]

I am working on improving the visual appeal of table rows. The data in table rows is generated dynamically and has lots of information. There is a column in that table which gives the time when that particular information row was issued. On the basis of the days/months etc before which the information was issued, I have to color the different rows.

It's exactly like as shown in the following link :
http://www.nseindia.com/live_market/dynaContent/live_watch/equities_stock_watch.htm

Moreover, the table rows must also have a small colored bar,the color of which will be determined by another field in the same row.I am wondering how to go about it in jquery. I know javascript but its getting messed up.

Any kind of help will be appreciated.

Thanks.

[Airshow]

Anubhavk,

Develop classnames and associated CSS directives to give the various visual effects you want. Test out your CSS with hard-coded HTML.

Build your real table with :

• <table class="highlightTable">
• <td class="time"> (your time cell in each row)
• <td class="aaaa"> (your other key data cell in each row)

Now start to develop your jQuery. The general format of the code will be :

$(function(){
	$('.highlightTable tr').each(function(){
		var $this = $(this);
		var timeValue = $this.find('td.time').html();//the value in the time cell in this row
		var aaaaValue = $this.find('td.aaaa').html();//the value some other cell in this row
		$this.addClass(time_class(timeValue));
		$this.addClass(sidebar_class(aaaaValue));
	});
});

By implementing the tests in functions (time_class() and sidebar_class() above), you will keep the master routine nice and clean.

Your major effort will be in developing the CSS, then in developing the javascript in time_class() and sidebar_class() . These functions should return classnames (or "") to apply the CSS directives you developed earlier.

Airshow

[anubhavk]

Thank you for the reply airshow.
Actually the problem is, I already have that table coded for by the other fellow.I have take it on from there.So basically I have to put a loop and compare the time values from the cells of each tr to the certain values,according to which the color would change.So, if you could help me with that.
Thanks.

[Airshow]

It doesn't matter that the table is already developed by some other fellow. The worst case is that you will need to modify his work slightly, but maybe not depending on what he wrote.

I have given you a master javascript routine. To make it work, you need to write the subroutines time_class() and sidebar_class().

Each function must return one of several classnames and thus apply the required CSS style to each table row.

If I do the whole job for you then you will not have learned anything. Give it a try and ask specific questions when you get stuck.

Airshow

[anubhavk]

That helped a lot Airshow. But since I'm a beginner.i would be thankful if you could really help me out.

function time_class() {
if (timeValue =="3 days ago") {
$(this).css("color","red");
}
};

This is the function that i am planning to apply for all the trs. Is this sufficient. because i just need to experiment with the color changes.Nothing fancy in the start.

[Airshow]

Anubhavk,

What is the format of the times in the time column please?

Airshow

[anubhavk]

Kindly find the attached screenshot of the row.
thank you.

[Airshow]

Is the time always in minutes or can it ever be hours/minutes or even days/hours/minutes?

If so, can you provide examples please.

[anubhavk]

Thanks a lot for giving it a thought. But yeah the time can be from 0 minutes to 59 minutes. then it goes into hours like 17hours ago 23 hours ago and then days like, 4days ago till 30 days. and then goes into months.but the inter-conversion isnt really important.So even if I can put, say 2 color changes.just experimentation like I said.

[Airshow]

OK, the string probably needs processing to find an actual date/time. This may be necessary because Month length varies (29/30/31 days).

However, if your color coding requirement goes to a maximum at less than a month then interpreting the sting simplifies considerably.

Another line of thought ... when the "xxxx ago" string is built (server-side), presumably it starts out as a date (in PHP, JSP, ASP or whatever). If you have access to the server-side source, then we code the original date invisibly into the HTML and avoid having to parse out the "xxxx ago" string to get back to the date. That would be ideal but clearly only possible if you control the server-side source, not if you screen-scrape.

I'm away for a few hours, will look in again when I get back.

Airshow

[Airshow]

Anubhavk,

OK, I have found a way to do this without working out the original date/time. Simply parse the "n unit ago" string to extract n and unit, then decide on a className accordingly.

Here's the function:

//color values picked from: http://www.somacon.com/cgi/colorchart.pl
function time_class(agoString) {
	var agoValues = agoString.split(/\s+/);
	var n = Number(agoValues[0]);
	var unit = agoValues[1].toLowerCase();
	switch(unit){
		//minutes
		case 'm':
		case 'min':
		case 'mins':
		case 'minute':
		case 'minutes':
			clss = (n<5) ? 'minutes_A' : (n<15) ? 'minutes_B' : (n<30) ? 'minutes_C' : 'minutes_D';
		break;
		//hours
		case 'h':
		case 'hr':
		case 'hrs':
		case 'hour':
		case 'hours':
			clss = (n<3) ? 'hours_A' : (n<6) ? 'hours_B' : (n<12) ? 'hours_C' : 'hours_D';
		break;
		//days
		case 'd':
		case 'day':
		case 'days':
			clss = (n<4) ? 'days_A' : (n<8) ? 'days_B' : (n<15) ? 'days_C' : 'days_D';
		break;
		//months
		case 'month':
		case 'months':
			clss = (n<3) ? 'months_A' : (n<6) ? 'months_B' : (n<12) ? 'months_C' : 'months_D';
		break;
		default:
			clss = '';
	};
	return clss;
};

As you can see I have allows for some variation in the unit string (eg. m, min, mins, minute, minutes), just in case.

I tested with the following CSS :

/* color values picked from: http://www.somacon.com/cgi/colorchart.pl */
.minutes_A { background-color: #D2FFBF; }
.minutes_B { background-color: #A6FF7F; }
.minutes_C { background-color: #49EE00; }
.minutes_D { background-color: #3FCD00; }
.hours_A  { background-color: #FF9F3F; }
.hours_B  { background-color: #FF7F00; }
.hours_C  { background-color: #EE7700; }
.hours_D  { background-color: #CD6600; }
.days_A { background-color: #7FBFFF; }
.days_B { background-color: #3F9FFF; }
.days_C { background-color: #007FFF; }
.days_D { background-color: #0066CD; }
.months_A { background-color: #FF7F7F; }
.months_B { background-color: #FF3F3F; }
.months_C { background-color: #EE0000; }
.months_D { background-color: #CD0000; }

If you want to style the text rather than the background, then change background-color to color all through.

After that, the world is your oyster with regard to styles; bold, italic, letter spacing etc. etc.

Airshow

[anubhavk]

Yes I have access to the server side source.Primarily it is in jsp.Yeah, not parsing the client side html definitely saves a lot of space and makes it understandable.

I have attached 3 files.See if they are of any use.

jsp_file is in jsp format.rest all are javascript/jquery codes.

Thanks a lot.

[Airshow]

Anubhavk,

Let's not worry about server-side for now. If the solution in my post above at top of page 2 works, then it avoids needing to know the original date, hence avoids needing to address server-side code.

Please let me know if post at top of page 2 is any good.

Airshow

[anubhavk]

Thanks a lot for the help. I will implement it and get back to you.

[anubhavk]

Hey airshow. Thanks a lot. It worked absolutely fine. But I want to implement it as a server side thing from where the date is actually coming. Could you tell me how to go about it. as this method sure works but doesnt count for the changes we might make in future.
Thanks

[Airshow]

Anubhavk,

If you want to do the whole thing server-side then, you need to build your HTML to achieve similar to what is performed client-side by my code above. ie. add a className to each <td class="time"> to give it additional style directives. Choose the stylename in accordance with the staleness of the data, eg. <td class="time staleness_X"> .

Of course, this server-side approach would provide strictly one-off styling for the page. With a little extra work, the client-side approach would allow the color coding to be "live", ie. to change colors as the data gets staler and staler without refreshing the page. Given the nature of the data, I think that would be an end-user expectation.

To facilitate that, you would need to go back to my earlier idea of encoding time-stamps in the HTML. By far the simplest encoding is a UNIX epoch representation of the time. ie, seconds since 1 January 1970. This is available in just about all server-side languages and you may well be using it already to perform date subtraction where the "xxx ago" string is computed, and/or in a database 'timestamp' field.

You can encode a time-stamp as a custom attribute of the table row or table cell to which it applies.

<tr class="..." timestamp="1326966381">...</tr>

This will be readily picked up by jQuery and converted to a javascript Date() object (which works in milliseconds rather than seconds). Here's a sample code fragment which returns a javascript Date object.

var timestamp = new Date(Number($('tr-selector').attr('timestamp')) * 1000);

You then have many Date() methods available to you for the client-side testing, manipulation and display of the timestamp.

Airshow

[anubhavk]

Thank you airshow.I am exactly working on these lines.

[Airshow]

I am sure the end result will be very cool :cool:

Airshow