PDA

View Full Version : [CSS Gradient Shadow] Custom RGB Color doesn't work on FFx



undrline
06-19-2009, 05:56 PM
1) Script Title:
CSS Gradient Shadow

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/

3) Describe problem:
Changing the color seems to work fine if you have an acceptable color name ("black," "red," "blue," etc.), but creating a custom color (rrr bbb ggg) only seems to work on IE. I am testing with IE6 and FFx 3.0.10. Thank you for any assistance.

Here is the code with my modifications:
HTML


<div id="greenbox" class="shadow" rel="205 255 170">
<p>Lorum Ipsum<br />
&nbsp;dolor sit amet,<br />
&nbsp;consectetur adipisicing elit,<br />
&nbsp;sed do</p>
</div>


CSS


/*
CSS Gradient Shadow
FROM: http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/
FOR: cross-browser compatible, transparent graduated shadow on containers
*/
.shadow{
position:relative;
display:inline;
z-index:100;
overflow: visible;
background-color: #CDFFAA;
width: 250px;
}

.shadow_inner{
overflow: hidden;
position: absolute;
top: -1000px;
filter: alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity: 0.1; /*firefox 1.5 opacity*/
-moz-opacity: 0.1; /*mozilla opacity*/
-khtml-opacity: 0.1; /*opacity*/
z-index: 10
}


Javascript
I added size/positioning. Gimme teh creditz!


var gradientshadow={}
gradientshadow.depth = 5 // Depth of shadow in pixels
gradientshadow.direction = "se" // Where shadow will fall. Options: n,ne,e,se,s,sw,w,nw,center // TOFIX: center appears solid. n,e,s,w align against topmost/leftmost rather than centered.
gradientshadow.ResizeAmount = -5 // symmetrically shrink (or grow) shadow by pixels, relative to element
gradientshadow.containers=[]

gradientshadow.create=function(){
var a = document.all ? document.all : document.getElementsByTagName('*')
for (var i = 0;i < a.length;i++) {
if (a[i].className == "shadow") {
for (var x=0; x<gradientshadow.depth; x++){
var newSd = document.createElement("DIV")
newSd.className = "shadow_inner"
newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth)
if (a[i].getAttribute("rel"))
newSd.style.background = a[i].getAttribute("rel")
else
newSd.style.background = "black" //default shadow color if none specified

// make part of page
document.body.appendChild(newSd)
}
gradientshadow.containers[gradientshadow.containers.length]=a[i]
}
}
gradientshadow.position()
window.onresize=function(){
gradientshadow.position()
}
}

gradientshadow.position=function(){
if (gradientshadow.containers.length>0){
for (var i=0; i<gradientshadow.containers.length; i++){
for (var x=0; x<gradientshadow.depth; x++){
var shadowdiv=document.getElementById("shadow"+i+"_"+x)
// resize
shadowdiv.style.width = (gradientshadow.containers[i].offsetWidth + gradientshadow.ResizeAmount) + "px"
shadowdiv.style.height = (gradientshadow.containers[i].offsetHeight + gradientshadow.ResizeAmount) + "px"

// position adjustment and size
//// options: n,ne,e,se,s,sw,w,nw,center
//// method: push away from centered by x
//// notes: can only move left and top edges.
//// take resize into account so shadow doesn't disappear
var oleft = gradientshadow.containers[i].offsetLeft
var otop = gradientshadow.containers[i].offsetTop
var aresize = Math.abs(gradientshadow.ResizeAmount)

switch (gradientshadow.direction)
{
case "center":
shadowdiv.style.left = oleft + (-(gradientshadow.ResizeAmount/2)) + "px"
shadowdiv.style.top = otop + (-(gradientshadow.ResizeAmount/2)) + "px"
break
case "n":
shadowdiv.style.left = oleft + 0 + "px"
shadowdiv.style.top = otop + (-x) + "px"
break
case "ne":
shadowdiv.style.left = oleft + x + aresize + "px"
shadowdiv.style.top = otop + (-x) + "px"
break
case "e":
shadowdiv.style.left = oleft + x + aresize + "px"
shadowdiv.style.top = otop + 0 + "px"
break
case "se":
shadowdiv.style.left = oleft + x + aresize + "px"
shadowdiv.style.top = otop + x + aresize + "px"
break
case "s":
shadowdiv.style.left = oleft + 0 + "px"
shadowdiv.style.top = otop + x + aresize + "px"
break
case "sw":
shadowdiv.style.left = oleft + (-x) + "px"
shadowdiv.style.top = otop + x + aresize + "px"
break
case "w":
shadowdiv.style.left = oleft + (-x) + "px"
shadowdiv.style.top = otop + 0 + "px"
break
case "nw":
shadowdiv.style.left = oleft + (-x) + "px"
shadowdiv.style.top = otop + (-x) + "px"
break
default:
// same as se
shadowdiv.style.left = oleft + x + aresize + "px"
shadowdiv.style.top = otop + x + aresize + "px"
break
}
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", gradientshadow.create, false)
else if (window.attachEvent)
window.attachEvent("onload", gradientshadow.create)
else if (document.getElementById)
window.onload=gradientshadow.create

undrline
06-26-2009, 07:27 PM
Anyone gonna help? I tried converting to hex instead of rgb, too. Still the same.