Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

FrontPage

2009100604 Email to Ronx
 

Enhancing Shared Borders with Javascript

How to enhance the appearance of Shared Borders with JavaScript


Shared Borders are applied to a page using tables: a table for the Top Border, one for the Bottom border, and one table for the left and right borders, and content.

Since these tables are added after the page is saved, it is not possible to access them to add, for example,decorative effects such as a background image that covers only the left, right and content areas. It is possible to add backgrounds to these areas individually, or to the entire page - but not to all three in one go leaving header, page and footer backgrounds untouched.

That is, not possible unless Javascript is used to access the tables when the page is loaded in the browser.

An example of the JavaScript required to access the tables is:

<script type="text/javascript">
function getInternetExplorerVersion() {
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
}
return rv;
}
function doBorders() {
var ver;
var ht;
var d=document.getElementById("wrap");
var e= document.documentElement.getElementsByTagName("table");
ht = e.item(1).offsetHeight;
d.style.height=ht + "px";
e.item(1).className="mnbdr"
ver = getInternetExplorerVersion();
if (ver > -1) {
if (ver < 8.0) {
e.item(1).style.marginTop="-3px";
e.item(2).style.marginTop="0";
}
}
}
window.onload=doBorders;
</script>

This script gets a list of every table in the page, then adds a CSS class to the second table in the list. A further margin adjustment to the second and third tables is made for IE7 and earlier. An example using this technique (and a bit more) is at the button3 page in the Interacive Buttons section.

Important: The code example above affects the tables comprising the shared Borders and assumes there are NO other tables in the page it is applied to. If there were other tables, the code would have to be changed to suit.