Javascript Shadow Div is not working!! HELP

[XRideRed450R]

I downloaded a shadow box from the web that uses javascript and based on the size of the div it applies a shadow. This is great however when i apply a slider javascript function to it to make the div bigger the shadow goes nuts and does not like it.

Below is the code for the shadow box.

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

This is the code for the slider box.

function toggle(objname){
		if(document.getElementById(objname).style.display != "none")
		{
			slideup(objname);
			gradientshadow.position();
			return;
		}
			
		if(document.getElementById(objname).style.display == "none")
		{
			slidedown(objname);
			return;
		}
	return;
}

This is how you call to the slider in an html webpage.

<a href="javascript:;" onmousedown="toggle('newVehicle');"

'newVehicle' being the div id.

There is a live example of this here.
http://www.speedcountry.com/page/test.php

Thank you any help will be appreciated!

[Airshow]

XRRR,

You could try adding two methods to gradientshadow; show and hide, such that dropshadows can be hidden before sliding, then shown again after they have been repositioned.

gradientshadow.hide = function(){
	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.display = 'none';
		}
	}
};
gradientshadow.show = function(){
	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.display = 'block';
		}
	}
};

Then modify toggle as follows:

function toggle(objname){
	if(document.getElementById(objname).style.display == "none"){
		slidedown(objname);
	}
	else{
		gradientshadow.hide();
		slideup(objname);
		gradientshadow.position();
		gradientshadow.show();
	}
}

You may also need to wrap slidedown(objname); in ....hide() ... show().

I've not been able to test. It may not work but more probably will just trade off one visual artifact for another.

Airshow