Dynamic Shaddows

Guess not! DIV doesn't work in Opera anyway's.

DIV doesn't work in Opera?! What the heck are you talking about Clint? Of course DIV works in Opera. It's the JavaScript to control DIV that is commonly used for DHMTL menus that doesn't work. However, you can create DHTML that works in Opera -- see secondstory.com for an example.

For the shadow - you might want to look into CSS, not JavaScript. Possibly JSS. I remember a few years ago the promise of CSS being able to add drop shadows to things, but I don't know (because I haven't kept up with things that aren't universally supported) how that turned out.

I'm sorry I don't know off hand any more than that. Perhaps a search at google might reveal more?

I said that DIV doesn't work in Opera because I once tried to build a site entirely in DIV instead of Tables and when I tested it on my Opera it didn't take at all, unlike IE. So from that time foward, it was my opinion that if someone used Opera out there in the same fashion as mine, my site would look stupid, and we can't have that. So yes, maybe it can work in Opera in some way. But if it doesn't work all the time or by default, then to me it doesn't work at all. Why risk it.

I use the tag a fair bit on my site and it works fine for me. Suzanne was right in saying though that DHTML does go a bit pear shaped in Opera...

Clint, have you ever considered that your code wasn't right?!

Have a look at these three pages:

http://hotwired.lycos.com/webmonkey/97/33/index1a_page5.html?tw=authoring
http://hotwired.lycos.com/webmonkey/97/33/index1a_page11.html?tw=authoring
http://www.secretagentwoman.com/textfilters.html

They use the CSS dropshadow/shadow filters. You can offset the shadow to simulate a mobile light source, but this is IE-only.

They don't seem to be much like a 3d shadow. I'm not sure... maybe the shadow filter is.

That's a possibilty. I haven't really mess with DIV that much, sticking to tables for now. Is there a reason why someone would want to use DIV for the same thing that tables can do? What are the advantages of DIV vs. Tables?

's can be altered dynamicly --> width, height, visibility, 3dshadow and so on with CSS.

they can be placed on top of eachother (z-index).

they can be moved.

Quote: Originally posted by theprofessional
That's a possibilty. I haven't really mess with DIV that much, sticking to tables for now. Is there a reason why someone would want to use DIV for the same thing that tables can do? What are the advantages of DIV vs. Tables?

The fallacy here is your equating the DIV tag with the TABLE tag. I suggest that you go back and read what the purpose of these two very different elements is.

Maybe someday, for until I see it take off really big, "Ebay, Barnes & Nobles, and other huge successes", I don't have a need yet. IMO anyway, DIV is just an old thing that'll be phased out eventually without costing me a dime. Thanks for the info.

LOL! Sorry, I have to laugh at that one.

You should try reading up at the following sites;

http://www.w3c.org
http://www.alistapart.com

The bottom line is that tables were never meant to be used for layout - that's what divs are supposed to be for.

Quote: Originally posted by theprofessional
Maybe someday, for until I see it take off really big, "Ebay, Barnes & Nobles, and other huge successes", I don't have a need yet. IMO anyway, DIV is just an old thing that'll be phased out eventually without costing me a dime. Thanks for the info.

Well, you lost me here. Ebay and B&N are big due to their concepts, not their web designers.

Was your point that they use tables (of course they do) or that they don't use the DIV tag? If the latter, I suggest you view some of their source code - both sites implement div tags where appropriate. The div tag is not the same thing as the table tag.

DIV's are no longer bleeding-edge technology. With browser support increasing, its popularity among designers is increasing.

Getting back to the original topic:
dk01, it would be possible to create a mobile, scalable DIV which acts as a shadow, and a mobile light source. It only take a few x and y offset calculations to determine the correct position of a shadow, given the light source's co-ordinates.

Even so, I don't think that it's possible to create advanced shadows. i.e: ones that are distorted to a third perpendicular plane -- like 3d programs do. At least it won't be very easy.

Anyway, since all this got me thinking, I'm tinkering with a script that puts what I just said into practice. If you're interested (and it works), I'll send you a copy when I'm done.

Wow! What a hot debate I sparked! Thanks for everyone's inputs. Abhishek Reddy - you actually hit on what I was looking for and I would like to see the results of your work since I have been working on the task my self. The trig was a bit of a pain but if you would like to see what I am working on I would gladly send you the address. Am I correct that we are not allowed to post links here? Thanks again.
-dk

I know a few people and sites that have/are/will convert to div from table. It seems that it is the emerging standard for layout display.

You can post links to relevant discussion points, of course. The "no links" is in regards to spam postings and promotional postings and postings designed to gain you money. Links to works in progress, and points of discussion are encouraged.

Clint -- I hope you read some of the comments here and the links provided and gain a better understanding of HTML. Div is not something that will be "phased out". I've been using DIV successfully for three years, without any issues, within the natural flow of the page. You have received some very good advice here. I hope you take it.

dk01, yes, I'd like to see what you've got so far.

I'm still in the early stages... not much to see of mine yet.

So Far: Here
Well there is not too much of mine but here is what I have so far. I have the light source working. There paremeters in the movebox() function are explained in the source. It only works for IE at the moment. Later I will make it cross browser and appliable to several layers at once instead of currently how I have it applied to one layer.
-dk

Hmm, a slightly different approach to what I'm using.
It looks quite similar, though.
You're working with diagonal values, right? I'm going the other way with two sides of a rectangle.

The gist of what I'm trying to do is this:

1) Get the y difference between the light source point (L) and point A on the box.
2) Get the x difference between the L and point A on the box.
3) Move the similar shaped shadow div to new location based on point A' which is equidistant with L, to A. This is done by offsetting shadow by |LA| in the opposite direction of the "ray."
If x,y of L is less than or equal to x,y of A then shadow is offset by |LA|.
If x,y of L is greater than x,y of A then shadow is offset by |LA| * (-1).

I hope I've explained it properly. It's not perfect, but I'm still working on it.

The script I'm making is quite literal. i.e. allows the user to click on screen to move L, and the shadow moves dynamically. Also I'm adding a slider to change depth, which will probaly just increase and decrease the width/height of the shadow by percentage of its original properties.

My end result will probably be totally IE-only. I'm thinking of adding the glow filter (read in the textfilters links that I listed in a previous post here) to change focus and blur the shadow.

Well it sounds like your method is organized well and I think I can imagine it. I'd like to see the math your using to try and get it. Yes I am using diagonals for mine to calculate theta and then have the user supply the offset themself. I guess I could change it to have the shaddow offset be proportional to the lightsource offset.

Anyways I am very interested by this 3d javascript. I know this q has been asked probly a million times but does anyone reccomend any good sources for stuff like 3d javascript?
-dk

3d javascript?? I've never actually seen any resources particularly dedicated to it. I have, though, read the odd individual article in some of the common webdesign/code resource sites. Even those just mention 3d illusion only as a sidenote.

Most people seem more keen on 2d stuff... either ultility things like navigation etc or flashy scrollers, font changers etc.

Check out Google's results at http://www.google.co.nz/search?q=%223d+javascript%22&hl=en&lr=
There are a couple of games/engines listed that are interesting but it didn't look like much else was relevant.