Drop shadow effects

@pithhelmetDec 30.2005

Hi everyone –

I am trying to implement a drop shadow effect to cells in a grid.

The basic premise is when a user clicks in the cell,
it is replaced with an edit box with a nice drop shadow
effect under it.

does anyone have any pointers on accomplishing this task?

thanks
tony

to post a comment

JavaScript

@methodpgDec 30.2005 — #If you want a cross-browser, translucent drop-shadow... you could put a DIV beneath the edit box, using the follow CSS:

[CODE]
 {
 position: absolute;
 z-index: 200;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 opacity: .4;
 filter: alpha(opacity=40);
 /* this hack is so it works in IE */
 background-color:transparent !important;
 background-color: #333333;
 /* this hack is for opera support
 * you can uncomment the background-image if you don't care about opera.
 * this gives you the flexibility to use any bg color that you want, instead of the png
 */
 background-image/**/: url("maskBG.png") !important; // For browsers Moz, Opera, etc.
 background-image:none;
 background-repeat: repeat;
 display:none;
 }
 [/CODE]

Of course, you'd need to put the DIV in the right place, etc. but that CSS should allow to create semi-transparent DIVs that work on almost all browsers (apparently)

@pithhelmetauthorDec 30.2005 — #Thanks for the post -

i understand the logic, but the implementation escapes me...

perhaps a small sample...

thanks again

take care

tony

@methodpgDec 30.2005 — #This is where cross-browser stuff gets the best of me..

generally.. if you have an input or textarea field.. and give it an ID (matching it's NAME preferably) you can probably reference that and then position and size the DIV accordingly.

(In this example "myInputId" will be a cell's edit-box input/field)

[CODE]
 var shadowOffset=4;
 
 document.getElementById('myShadowDiv').width = document.getElementById('myInputId').width;
 
 document.getElementById('myShadowDiv').height= document.getElementById('myInputId').height;
 
 document.getElementById('myShadowDiv').top= document.getElementById('myInputId').top+parseInt(shadowOffset);
 
 document.getElementById('myShadowDiv').left= document.getElementById('myInputId').left+parseInt(shadowOffset);
 [/CODE]

Though.. i think you may need to replace some of those with offsetWidth / offsetHeight / etc. Hopefully someone will let me know if I've made a mistake there. ?

Drop shadow effects

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drop shadow effects

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴