104 lines
4.4 KiB
JavaScript
104 lines
4.4 KiB
JavaScript
//
|
|
//Notes:
|
|
//Requires that the element getting the shadow have a fixed height and width defined in the html, and that both a left and right or top and bottom reference be provided.
|
|
//Alternatively a shadow-class="xxx" attribute can be supplied that references a css class with those properties. The css class must have width and height that includes the contents, border, and shadow size (10px x 10px).
|
|
// Example: <div class="shadow" shadow-class="shadowDivCss" style="">...</div>
|
|
//
|
|
(function($) {
|
|
$.fn.buildShadow = function() {
|
|
for(var index = 0; index < this.length; index++) {
|
|
var next = $(this[index]);
|
|
|
|
//Prevent a double shadow.//
|
|
if(!next.parent().data('is-shadow')) {
|
|
//<div style="position: relative; top: -8px; left: 0px; width: 256px; height: 164px; float: left;">
|
|
//Wrap the image with a div and leave space for shadows.//
|
|
next.wrap(function(index) {
|
|
$next = $(next);
|
|
var p = $next.css('position');
|
|
var f = $next.css('float');
|
|
var w = parseInt($next.css('width'));
|
|
var h = parseInt($next.css('height'));
|
|
var classes = $next.attr('shadow-class');
|
|
var c = $next.css('clear');
|
|
var padT = parseInt($next.css('padding-top'));
|
|
var padR = parseInt($next.css('padding-right'));
|
|
var padB = parseInt($next.css('padding-bottom'));
|
|
var padL = parseInt($next.css('padding-left'));
|
|
var marT = $next.css('margin-top');
|
|
var marR = $next.css('margin-right');
|
|
var marB = $next.css('margin-bottom');
|
|
var marL = $next.css('margin-left');
|
|
var borL = parseInt($next.css('border-left-width'));
|
|
var borR = parseInt($next.css('border-right-width'));
|
|
var borT = parseInt($next.css('border-top-width'));
|
|
var borB = parseInt($next.css('border-bottom-width'));
|
|
var html;
|
|
|
|
html = "<div " + (classes ? " class='" + classes + "'" : "") + " style='" + (w > 0 && h > 0 ? "width: " + (w + 10 + padL + padR + borL + borR) + "px; height: " + (h + 10 + padT + padB + borT + borB) + "px;" : "");
|
|
|
|
if(p != 'static') {
|
|
var left = $next.css('left');
|
|
var right = $next.css('right');
|
|
var top = $next.css('top');
|
|
var bottom = $next.css('bottom');
|
|
|
|
html += " position: " + p + ";";
|
|
|
|
//TODO: Assuming for now that a left & right or top & bottom were not defined.
|
|
if(left) {
|
|
html += " left: " + left + ";";
|
|
}
|
|
else {
|
|
html += " right: " + right + ";";
|
|
}
|
|
|
|
if(top) {
|
|
html += " top: " + top + ";";
|
|
}
|
|
else {
|
|
html += " bottom: " + bottom + ";";
|
|
}
|
|
|
|
//Make the image static.//
|
|
$next.css({left: 0, right: 0, top: 0, bottom: 0, position: 'static'});
|
|
}
|
|
else {
|
|
//Make the position relative such that the absolutely positioned shadow backgrounds are absolute relative to the parent div.//
|
|
html += " position: relative;";
|
|
$next.css({left: 0, top: 0, position: 'absolute'});
|
|
}
|
|
|
|
//Transfer the float to the container, from the image.//
|
|
if(f && f != 'none') {
|
|
html += " float: " + f + ";";
|
|
$next.css('float', undefined);
|
|
}
|
|
|
|
if(c && c != 'none') {
|
|
html += " clear: " + c + ";";
|
|
$next.css('clear', undefined);
|
|
}
|
|
|
|
//Margins & Padding//
|
|
html += " margin-top: " + marT + "; margin-right: " + marR + "; margin-bottom: " + marB + "; margin-left: " + marL + ";"
|
|
// padding-top: " + padT + "; padding-right: " + padR + "; padding-bottom: " + padB + "; padding-left: " + padL + ";";
|
|
//$next.css({margin: 0, padding: 0});
|
|
$next.css('margin', 0);
|
|
|
|
html += "'/>";
|
|
|
|
return html;
|
|
});
|
|
//Place the shadows.//
|
|
next.each(function(index) {
|
|
$next = $(next);
|
|
$next.before("<div style='position: absolute; right: 0px; top: 0px; height: 10px; width: 10px; background: url(\"images/shadow_tr.png\");'></div><div style='position: absolute; top: 10px; right: 0px; bottom: 10px; width: 10px; background: url(\"images/shadow_r.png\");'></div><div style='position: absolute; right: 0px; bottom: 0px; height: 10px; width: 10px; background: url(\"images/shadow_br.png\");'></div><div style='position: absolute; left: 10px; right: 10px; bottom: 0px; height: 10px; background: url(\"images/shadow_b.png\");'></div><div style='position: absolute; left: 0px; bottom: 0px; height: 10px; width: 10px; background: url(\"images/shadow_bl.png\");'></div>");
|
|
});
|
|
next.parent().data('is-shadow', true);
|
|
}
|
|
}
|
|
|
|
return this;
|
|
}
|
|
})(jQuery); |