Advanced Search

Results 1 to 3 of 3

Thread: CSS Gradient Shadow

  1. #1
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Gradient Shadow

    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;
    }
    Last edited by harlequin2k6; 05-30-2007 at 08:21 PM.

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •