Tag Archives: style

Alternating row styles with Javascript

I am writing a list that outputs a large amount of data in a vertical structure, with many rows the list gets hard to tell which entry is which.

Now, normally I would do this via PHP, something like

	< ?php $messages = SQL('QUERY TO GET MY MESSAGES'); ?>
	< ?php $style    = "on"; ?>
	< ?php if($messages): ?>
	

Messages

< ?php foreach($messages as $message): ?>
>

< ?=date('d/m/Y', strtotime($message->last_modified))?> < ?=$message->firstname?> < ?=$message->lastname?>

< ?=$message->message?>

< ?=$message->status?>

< ?php if($style=='on') { $style = 'off' } else { $style = 'on'} ?> < ?php endforeach; ?> < ?php endif; ?>

But I decided today to write it in Javascript. Mootools 1.2 in fact, as the site I am working on had a lot of cool JS effects.

The HTML

	< ?php $messages = SQL('QUERY TO GET MY MESSAGES'); ?>
	< ?php if($messages): ?>
	

Messages

< ?php foreach($messages as $message): ?>

< ?=date('d/m/Y', strtotime($message->last_modified))?> < ?=$message->firstname?> < ?=$message->lastname?>

< ?=$message->message?>

< ?=$message->status?>

< ?php endforeach; ?> < ?php endif; ?>

The Javascript

	$$('.message').each(function(message, row) { // find all elements the have a class called 'message' and loop trough them.
		if(row%2) message.setStyle('background', '#eceff1'); // assign my style to it
	});

You can assign more than one style, by using Mootools setStyles({ }); function. or add events. Eg;

	$$('.message').each(function(message, row) {
		if(row%2) message.setStyle('background', '#eceff1');
		var background = message.getStyle('background');
		message.setStyle('padding', '5px');
		message.addEvents({
			'mouseenter': function() { message.setStyle('background', '#d2d2d2'); },
			'mouseleave': function() { message.setStyle('background', background); }
		});
	});

This will assign a different style and an event back to each element.

Demo:

Hover over any of the below messages :)

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

23/03/2009
Sheldon Lendrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

Safari's CSS Support for multiple backgrounds on the same Style

I was browsing just now and fond something pretty interesting, Safari supports multiple background image declarations for the same style tag.

	.box {

		background:
		/*	Upper-left	*/	url(./corners_01.png),
		/*	Upper-right	*/	url(./corners_02.png),
		/*	Lower-left	*/	url(./corners_03.png),
		/*	Lower-right	*/	url(./corners_04.png),
		/*	Icon		*/	url(./icon.png),
		/*	Gradient	*/	url(./gradient.png);

		background-position:
		/*	Upper-left	*/	0% 0%,
		/*	Upper-right	*/	100% 0%,
		/*	Lower-left	*/	0% 100%,
		/*	Lower-right	*/	100% 100%,
		/*	Icon		*/	0.6em 0.6em,
		/*	Gradient	*/	0% 100%;

		background-repeat:
		/*	Upper-left	*/ 	no-repeat,
		/*	Upper-right	*/	no-repeat,
		/*	Lower-left	*/	no-repeat,
		/*	Lower-right	*/	no-repeat,
		/*	Icon		*/	no-repeat,
		/*	Gradient	*/	repeat-x;
	}