JavaScript DHTML/GUI Components/Border
Shade border with shadeborder-0.2
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /**
* RUZEE.ShadedBorder 0.2 * (c) 2006 Steffen Rusitschka * * RUZEE.ShadedBorder is freely distributable under the terms of an MIT-style license. * For details, see http://www.ruzee.ru/ */
var RUZEE = window.RUZEE || {}; RUZEE.ShadedBorder = { create: function(opts) {
var isie = /msie/i.test(navigator.userAgent) && !window.opera; function sty(el, h) { for(k in h) { if (/ie_/.test(k)) { if (isie) el.style[k.substr(3)]=h[k]; } else el.style[k]=h[k]; } } function crdiv(h) { var el=document.createElement("div"); el.className = "sb-gen"; sty(el, h); return el; } function op(v) { v = v<0 ? 0 : v; v = v>0.99999 ? 0.99999 : v; if (isie) { return " filter:alpha(opacity=" + (v*100) + ");"; } else { return " opacity:" + v + ";"; } } var sr = opts.shadow || 0; var r = opts.corner || 0; var bor = 0; var bow = opts.border || 0; var shadow = sr != 0; var lw = r > sr ? r : sr; var rw = lw; var th = lw; var bh = lw; if (bow > 0) { bor = r; r = r - bow; } var cx = r != 0 && shadow ? Math.round(lw/3) : 0; var cy = cx; var cs = Math.round(cx/2); var iclass = r > 0 ? "sb-inner" : "sb-shadow"; var sclass = "sb-shadow"; var bclass = "sb-border"; var edges = opts.edges || "trlb"; if (!/t/i.test(edges)) th=0; if (!/b/i.test(edges)) bh=0; if (!/l/i.test(edges)) lw=0; if (!/r/i.test(edges)) rw=0; var p = { position:"absolute", left:"0", top:"0", width:lw + "px", height:th + "px", ie_fontSize:"1px", overflow:"hidden" }; var tl = crdiv(p); delete p.left; p.right="0"; p.width=rw + "px"; var tr = crdiv(p); delete p.top; p.bottom="0"; p.height=bh + "px"; var br = crdiv(p); delete p.right; p.left="0"; p.width=lw + "px"; var bl = crdiv(p); var tw = crdiv({ position:"absolute", width:"100%", height:th + "px", ie_fontSize:"1px", top:"0", left:"0", overflow:"hidden" }); var t = crdiv({ position:"relative", height:th + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); tw.appendChild(t); var bw = crdiv({ position:"absolute", left:"0", bottom:"0", width:"100%", height:bh + "px", ie_fontSize:"1px", overflow:"hidden" }); var b = crdiv({ position:"relative", height:bh + "px", ie_fontSize:"1px", marginLeft:lw + "px", marginRight:rw + "px", overflow:"hidden" }); bw.appendChild(b); var mw = crdiv({ position:"absolute", top:(-bh)+"px", left:"0", width:"100%", height:"100%", overflow:"hidden", ie_fontSize:"1px" }); function corner(el,t,l) { var w = l ? lw : rw; var h = t ? th : bh; var s = t ? cs : -cs; var dsb = []; var dsi = []; var dss = []; var xp=0; var xd=1; if (l) { xp=w-1; xd=-1; } for (var x=0; x<w; ++x) { var yp=0; var yd=1; if (t) { yp=h-1; yd=-1; } for (var y=0; y<h; ++y) {var div = "
// draw border if (xc < 0 && yc < bor && yc >= r || yc < 0 && xc < bor && xc >= r) {dsb.push(div + "" class="" + bclass + "">
} else if (d<bor && d>=r-1 && xc>=0 && yc>=0) { var dd = div; if (d>=bor-1) { dd += op(bor-d); doShadow = true; } dsb.push(dd + "" class="" + bclass + ""></div>"); } // draw inner var dd = div + " z-index:2;"; if (xc < 0 && yc < r || yc < 0 && xc < r) { dsi.push(dd + "" class="" + iclass + ""></div>"); } else if (d<r && xc>=0 && yc>=0) { if (d>=r-1) { dd += op(r-d); doShadow = true; } dsi.push(dd + "" class="" + iclass + ""></div>"); } else doShadow = true; } else doShadow = true; // draw shadow if (sr > 0 && doShadow) { d = Math.sqrt(x*x+y*y); if (d<sr) { dss.push(div + " z-index:0; " + op(1-(d/sr)) + "" class="" + sclass + ""></div>"); } } yp += yd; } xp += xd; } el.innerHTML = dss.concat(dsb.concat(dsi)).join(""); } function mid(mw) { var ds = [];ds.push("");
var dd = "<div style="position:absolute; width:1px;" + " top:" + (th+bh) + "px; height:10000px;"; for (var x=0; x<lw-r-cx; ++x) { ds.push(dd + " left:" + x + "px;" + op((x+1.0)/lw) + "" class="" + sclass + ""></div>"); } for (var x=0; x<rw-r-cx; ++x) { ds.push(dd + " right:" + x + "px;" + op((x+1.0)/rw) + "" class="" + sclass + ""></div>"); } if (bow > 0) { var su = " width:" + bow + "px;" + "" class="" + bclass + ""></div>"; ds.push(dd + " left:" + (lw-bor-cx) + "px;" + su); ds.push(dd + " right:" + (rw-bor-cx) + "px;" + su); } mw.innerHTML = ds.join(""); } function tb(el, t) { var ds = []; var h = t ? th : bh; var dd = "<div style="height:1px; overflow:hidden; position:absolute;" + " width:100%; left:0px; "; var s = t ? cs : -cs; for (var y=0; y<h-s-cy-r; ++y) { ds.push(dd + (t ? "top:" : "bottom:") + y + "px;" + op((y+1)*1.0/h) + "" class="" + sclass + ""></div>"); } if (y >= bow) { ds.push(dd + (t ? "top:" : "bottom:") + (y - bow) + "px;" + " height:" + bow + "px;" class="" + bclass + ""></div>"); } ds.push(dd + (t ? "top:" : "bottom:") + y + "px;" + " height:" + (r+cy+s) + "px;" class="" + iclass + ""></div>"); el.innerHTML = ds.join(""); } corner(tl, true, true); corner(tr, true, false); corner(bl, false, true); corner(br, false, false); mid(mw); tb(t, true); tb(b, false); return { render: function(el) { if (typeof el == "string") el = document.getElementById(el); if (el.length != undefined) { for (var i=0; i<el.length; ++i) this.render(el[i]); return; } // remove generated children var node = el.firstChild; while (node) { var nextNode = node.nextSibling; if (node.nodeType == 1 && node.className == "sb-gen") el.removeChild(node); node = nextNode; } var iel = el.firstChild; var twc = tw.cloneNode(true); var mwc = mw.cloneNode(true); var bwc = bw.cloneNode(true); el.insertBefore(tl.cloneNode(true), iel); el.insertBefore(tr.cloneNode(true), iel); el.insertBefore(bl.cloneNode(true), iel); el.insertBefore(br.cloneNode(true), iel); el.insertBefore(twc, iel); el.insertBefore(mwc, iel); el.insertBefore(bwc, iel); if (isie) { function resize() { twc.style.width = bwc.style.width = mwc.style.width = el.offsetWidth + "px"; mwc.firstChild.style.height = el.offsetHeight + "px"; } el.onresize=resize; resize(); } } };
} } // add our styles to the document document.write(
"<style type="text/css">" + ".sb, .sbi, .sb *, .sbi * { position:relative; z-index:1; }" + "* html .sb, * html .sbi { height:1%; }" + ".sbi { display:inline-block; }" + ".sb-inner { background:#ddd; }" + ".sb-shadow { background:#000; }" + ".sb-border { background:#bbb; }" + "</style>"
); </script> <style type="text/css">
html { font-family:sans-serif; background:url(back.jpg); } html, body { margin:0; padding:0; } p { margin:5px 0; } .headfoot { background:#444; text-align:right; color:#ddd;
padding:10px; margin:0; }
.headfoot h1 { font-size:1.3em; padding:0; margin:0; } .headfoot a { color:#fff; } /* For the first shadowed border */
- shadowed-border { padding:20px; width:80%; margin:20px auto; }
- shadowed-border .sb-inner { background:#ccc; }
- shadowed-border .sb-border { background:#fff; }
/* The tabs */
- tabs { overflow:hidden; padding:0; margin:20px auto 0 auto; width:400px; }
- html #tabs { height:1%; }
- tabs .tab { float:left; color:#000; list-style:none; padding:0; margin-left:5px; }
- html #tabs .tab { display:inline-block; }
- tabs .tab a { display:block; float:left; text-decoration:none; padding:5px; color:#000; }
- tabs .tab .sb-inner { background:#ccc; }
- tabs .tab:hover .sb-inner { background:#eee; }
- tabs .tab .sb-border { background:#fff; }
- tabs-content { background:#ccc; width:380px; margin:-1px auto 20px auto; padding:10px;
border:1px solid #fff; }
/* The links */
- links { color:#4c2; padding:20px; margin:20px; width:400px; margin:0 auto; }
- links .sb-inner { background:#444; }
- links a { color:#9f2; }
- links a .sb-shadow { background:transparent; }
- links a:hover .sb-shadow { background:#777; }
/* Partial stuff */
- partial { overflow:hidden; width:500px; margin:20px auto; }
- html .partial { height:1%; }
.partial-class { float:left; width:30px; height:30px; padding:10px;
margin-left:10px; color:#4c2; }
.partial-class .sb-inner { background:#444; } .partial-class .sb-border { background:#fff; }
- change-border { color:#fff; padding:20px; margin:20px auto; width:300px; }
.change-border0 .sb-inner { background:#444; } .change-border1 .sb-inner { background:#888; }
</style> <script language="javascript" type="text/javascript">
var t = new Date().getTime(); var shadowedBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 }); var tabBorder = RUZEE.ShadedBorder.create({ corner:8, edges:"tlr", border:1 }); var linksBorder = RUZEE.ShadedBorder.create({ corner:10 }); var linkBorder = RUZEE.ShadedBorder.create({ shadow:4 }); var changeBorders = [ RUZEE.ShadedBorder.create({ corner:20 }), RUZEE.ShadedBorder.create({ corner:10, shadow:20 }) ]; var partialIDs = ["tl", "tr", "bl", "br", "tlr", "blr", "tbl", "tbr"]; var partialBorders = {}; for (var i=0; i<partialIDs.length; ++i) { partialBorders[partialIDs[i]] = RUZEE.ShadedBorder.create({ corner:10, border:2, edges:partialIDs[i] }); } var calcTime = "Calculation time: " + ((new Date().getTime() - t) / 1000.0) + "s";
</script> </head> <body>
<a href="http://www.ruzee.ru/blog/shadedborder"> RUZEE.ShadedBorder</a> Examples
<script type="text/javascript">document.write("");
</script>
This shadowed border has a width of 80% and hence scales with the size of your browser window. Try it out ;-) And now some Lorem ipsum:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- <a href="#">Tab 1</a>
- <a href="#">Tab 2</a>
- <a href="#">And a third tab</a>
Tabs that change the color when hovered over (hover works on all supported browser but Internet Explorer 6.0).
Links that "glow" when hovered over - this is alpha code... It doesn"t work in IE6 and Opera and looks strange in Safari. This is some text with some <a href="#" class="sbi">links</a>. Don"t get bored by the content but hover over the links ... This is some text with some <a href="#" class="sbi">links</a>. Don"t get bored by the content but hover over the links ...
<button onclick="changeBorder()">Change this border</button>
Text that gets hidden - you can do nothing about it...
<script language="javascript" type="text/javascript"> if (!window.$) { window.$ = function(id) { return document.getElementById(id); } } var currentChangeBorder=0; function changeBorder() { currentChangeBorder = (currentChangeBorder + 1) % changeBorders.length; $("change-border").className = "sb change-border" + currentChangeBorder; changeBorders[currentChangeBorder].render("change-border"); } var t = new Date().getTime(); shadowedBorder.render("shadowed-border"); var tabs = $("tabs").getElementsByTagName("li"); for (var i=0; i < tabs.length; ++i) { tabBorder.render(tabs[i]); } linksBorder.render("links"); linkBorder.render($("links").getElementsByTagName("a")); for (id in partialBorders) { partialBorders[id].render(id); } changeBorder(); $("calcTime").innerHTML = calcTime; $("renderTime").innerHTML = "Render time: " + ((new Date().getTime() - t) / 1000.0) + "s"; </script>
</body> </html>
</source>