blog.jorrit salverda.nl

I tried moving some html that didn’t have a direct relation to the meaning of my content, but more with layout aspect, to the client-side by writing a jQuery plugin for it. This in order to heighten the separation of concerns. The plugin performs some DOM manipulation in order to apply a drop shadow effect as seen in the following image (left side without plugin applied, right side with):

To accomplish this the crucial part of the plugin performs the following DOM manipulation:

elementToWrap.html(
	'<div class="frame" style="width: 157px;">' +
		elementToWrap.html() +
		'<div class="right_shadow">' +
			'<div class="shadow_top_right"></div>' +
			'<div class="shadow_right" style="height: 93px;"></div>' +
		'</div>' +
		'<div class="bottom_shadow">'
			'<div class="shadow_bottom_left"></div>' +
			'<div class="shadow_bottom" style="width: 143px;"></div>' +
			'<div class="shadow_bottom_right"></div>' +
		'</div>' +
	'</div>'
);

(more…)