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!

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

This article has been dead for over six months. Start a new discussion instead.