ok be kind to me - this is the first time I'm trying to use a js script and it's not displaying at all - the site I'm trying to apply it to is http://shiznit.no-ip.info/rjnall - the shadow is supposed to display around the content area but no matter where I've placed the class it won't come up - I've tried it with the script within the page and with the script as an include
I don't know what I've done wrong or if there is a typo - I did find missing ; in the styles but I thought I corrected them
any help is greatly appreciated
below is the code for all 3
index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Realtec - RJ Nall</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="pinellas county real estate, tampa bay real estate, tarpon springs real estate, tampa bay remax, pinellas
county remax" />
<meta name="description" content="With more than 25 years experience in helping to find just the right property to call home, I look forward
to helping you with all of your real estate needs. Whether you're looking to buy or sell a residential or commercial property, or finding the
right business to call your own, I'm ready to help!" />
<meta name="robots" content="all" />
<meta name="robots" content="index all, follow all" />
<link rel="stylesheet" type="text/css" href="css/rjnallstyle.css" />
<script language="javascript" type="text/javascript" src="includes/shadow.js"></script>
</head>
<body>
<div id="main-wrap" class="shadow" style="display:block;" rel="blue">
<div id="header">
</div>
<div id="col-wrap">
<div id="left-col-nav">
<ul>
<li><a href="/rjnall/" >Home</a></li>
<li><a href="/rjnall/" >Buying</a></li>
<li><a href="/rjnall/" >Selling</a></li>
<li><a href="/rjnall/" >Rentals</a></li>
<li><a href="/rjnall/" >Businesses For Sale</a></li>
<li><a href="/rjnall/" >Moving</a></li>
<li><a href="/rjnall/" >Mortgage Calculator</a></li>
<li><a href="/rjnall/" >Contact Us</a></li>
</ul> </div>
<div id="content-container">
<div id="content">
<h1>Welcome to Realtec!</h1>
<div class="imgcontainerright"><img src="img/rjnallsmall.jpg" alt="Rick J. Nall" title="Rick J. Nall" /><p
style="clear:right;margin:0;padding:0;">Rick J. Nall<br />Broker Associate</p></div>
<p>With more than 25 years experience in helping to find just the right property to call home, I look forward to helping you with all of your
real estate needs. Whether you're looking to buy or sell a residential or commercial property, or finding the right business to call your
own, I'm ready to help!</p>
<div class="clearfix"></div>
<hr />
<h2>Find a Home Now!</h2>
<div id="formcontainer">
<form action="/rjnall/" method="post">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</form>
</div> </div>
</div>
<div id="right-col-nav">
<p class="navtitle">
Featured Listings
</p> </div>
</div>
<div class="clearfix"></div>
<div id="footer">
<ul>
<li><a href="/rjnall/" >Home</a></li>
<li><a href="/rjnall/" >Buying</a></li>
<li><a href="/rjnall/" >Selling</a></li>
<li><a href="/rjnall/" >Rentals</a></li>
<li><a href="/rjnall/" >Businesses For Sale</a></li>
<li><a href="/rjnall/" >Moving</a></li>
<li><a href="/rjnall/" >Mortgage Calculator</a></li>
<li><a href="/rjnall/" >Contact Us</a></li>
</ul> <p>©2007 Remax/Realtec Group, Inc.</p>
<p>Site design and maintenance by <a href="/rjnall/" >Suncoast Web Designs</a></p>
</div>
</div>
</body>
</html>
shadow.js
Code:
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
rjnallstyle.css
Code:
body{
font-family: verdana,arial,helvetica,sans-serif;
text-align:center;
color:#000000;
font-size: 12px;
background-color:#efefef;
text-align:center;
}
#main-wrap{
background-image:url(../img/mainbg.jpg);
background-repeat:repeat-y;
width:760px;
text-align:left;
margin-left:auto;
margin-right:auto;
font-family: verdana,arial,helvetica,sans-serif;
text-align:center;
color:#000000;
font-size: 12px;
}
h1 {
font-size:16px;
}
h2 {
font-size:14px;
}
* html #main-wrap{
height:600px;
}
#header{
width:760px;
height:119px;
background-image:url(../img/rjnallbanner2.jpg);
background-repeat:no-repeat;
background-color:#114076;
}
#col-wrap {
width:760px;
text-align:center;
background-image:url(../img/colbg2.jpg);
background-repeat:repeat-x;
min-height:600px;
}
#left-col-nav{
width:200px;
float:left;
margin:0;
padding:0;
text-align:center;
}
#left-col-nav ul {
padding:10px;
width:150px;
margin:10px auto 0 auto;
background-color:#ffffff;
text-align:left;
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
min-height:600px;
}
#left-col-nav li {
list-style-type:none;
text-indent:10px;
line-height:18px;
margin-top:10px;
}
#left-col-nav ul li a:link {
text-decoration:none;
color:#114076;
font-weight:bold;
}
#left-col-nav ul li a:visited {
text-decoration:none;
color:#114076;
font-weight:bold;
}
#left-col-nav ul li a:hover {
text-decoration:none;
background-color:#114076;
color:#ffffff;
font-weight:bold;
display:block;
width:150px;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
#left-col-nav ul li a:active {
text-decoration:none;
background-color:#114076;
color:#ffffff;
font-weight:bold;
}
#left-col-nav ul li a:focus {
text-decoration:none;
background-color:#114076;
color:#ffffff;
font-weight:bold;
}
#content-container {
width:410px;
margin:10px auto 0 auto;
text-align:left;
float:left;
text-align:justify;
background-color:#ffffff;
min-height:600px;
}
#content {
margin:10px;
}
#right-col-nav{
width:150px;
float:right;
margin:0;
padding:0;
text-align:center;
min-height:600px;
}
#footer{
width:750px;
background-color:#114076;
padding:5px;
color:#ffffff;
text-align:center;
}
.clearfix{
clear:both;
}
.imageleft {
float:left;
margin:10px;
}
.imageright {
float:right;
margin:0 10px 10px 10px;
}
#right-col-nav .navtitle {
background-color:#ffffe8;
text-align:center;
margin:10px auto 0 auto;
padding:0;
width:130px;
}
#footer li {
display:inline;
padding:10px;
}
#footer li a:link{
color:#ffffff;
font-weight:bold;
}
#footer li a:visited{
color:#ffffff;
font-weight:bold;
}
#footer li a:hover{
background-color:#ffffff;
color:#114076;
font-weight:bold;
}
#footer a:link{
color:#ffffff;
font-weight:bold;
}
#footer a:visited{
color:#ffffff;
font-weight:bold;
}
#footer a:hover{
background-color:#ffffff;
color:#114076;
font-weight:bold;
}
.imgcontainerright {
padding:10px;
margin: 0 10px 10px 10px;
float:right;
border: 1px solid #114076;
text-align:center;
}
#formcontainer {
clear:left;
margin:10px;
background-color:#eeeeee;
border: 1px solid #114076;
}
/*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;
}
Bookmarks