Transparent HTML nodes without affecting content
Snippet Menu
4
Wed. Nov. 28th, 2007 8:14 AM
This code allows you to set the "opcity" style attribute on a element without affecting it's content.
Just call the function for a specific element or to all elements of a given classname after the document loads.
Examples and advanced usage here...
Just call the function for a specific element or to all elements of a given classname after the document loads.
Examples and advanced usage here...
function applyTransparencyHack(element) {
//create the background container
var backContainer = $new('DIV');
//apply the same location, dimension and background properties of the element
backContainer.style.width = element.style.width;
backContainer.style.height = element.style.height;
backContainer.style.background = element.style.background;
backContainer.style.opacity = element.style.opacity;
backContainer.style.position = 'absolute';
backContainer.style.top = element.style.top;
backContainer.style.left = element.style.left;
//remove background definitions from the element
element.style.background = '';
element.style.opacity = 1;
//now append the background container before the element
element.appendBefore(backContainer);
}
Votes Up
Votes Down
var bg;
if (!!el.backgroundElement)
bg=el.backgroundElement;
else
bg=el.backgroundElement=document.createElement('div');
var st=el.getStyle;
bg.setStyle({
background:st.background,
opacity:st.opacity,
position:'absolute',
top:el.offsetTop+'px',
left:el.offsetLeft+'px',
width:el.offsetWidth+'px',
height:el.offsetHeight+'px'
});
el.setStyle({
background:'',
opacity:1
});
el.parentNode.insertBefore(bg,el);
}
//Example calls:
$('myDiv').setOpacity(0.5); //Oooh, noes, the content went all grey!
$('myDiv').backgroundTransparency(); //Yeeah, that's how it should look.
$('myDiv').backgroundTransparency(0.25); //Less background, more mess!