I've labored over this so much...but the example does work in FF. I must have something conflicting in my style sheet....but no...here is the complete code from my practice page. Would someone please take the time to look at it in FF and tell me what is wrong?
What you see below is a page containing the complete java script and original css for the shadow and my html sample text with a basic page style added.
Code:
<html>
<head>
<script type="text/javascript">
var gradientshadow={}
gradientshadow.depth=6 //Depth of shadow in pixels
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
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)
shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px"
shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px"
shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px"
shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px"
}
}
}
}
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
</script>
<style type="text/css">
body
{
background: url("http://www.geoodyssey.com/THS/images/sand-stone.jpg") repeat;
}
.page_container
{
background: url("http://www.geoodyssey.com/THS/images/RECYCLED.jpg") repeat;
margin-left: 5%;
margin-right: 5%;
height: 100%;
padding: 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.shadow{
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}
.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
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p class="shadow" style="display: block" rel="red">This is some paragraph.
<p>
<div class="shadow">
<div class="page_container">
<h1>THS</h1>
</div>
</div>
</body>
</html>
Gradient Shadow Script on Firefox
Reply With Quote
Bookmarks