CSS Gradient Shadow

**harlequin2k6** · 05-30-2007, 07:58 PM

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&copy;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;
}

**Veronica** · 05-31-2007, 12:20 AM

OK, first you need to fix the javascript. Your editor inserted line breaks where they shouldn't be. So change this

Code:

			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)

to this (use a text editor like notepad or ultraedit to make sure it's on one line):

Code:

			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)

Once you do that, you'll see the shadow appear on your main-wrap div. If you wanted it around your content-container div, just move the class=shadow to there.

**harlequin2k6** · 05-31-2007, 12:41 AM

veronica - thank you so much for pointing that out to me - as I said I have zero js knowledge

there was actually a second comment line that had another line break and I've corrected that also, but alas, it still isn't working

any other thoughts?

CORRECTION--where I thought there was a second broken line I found that the line wasn't broken - that's been corrected and now it's working fine

Thread: CSS Gradient Shadow

Thread Tools

Search Thread

CSS Gradient Shadow

Bookmarks

Bookmarks

Posting Permissions