text drop shadow in AJAX

[adastic]

Any idea how this guy does his AJAX drop shadows (see the post title "New Year New Site" in blue with the light gray in larger font offset from it):

http://www.dhtmlnirvana.com/blog/archives/New-Year-New-Site.html

...and could this technique be used to create a more conventional same-font/slightly offset text drop shadow?

I see from this post that sometimes text drop shadows are done in a way that leaves the text showing up double in some browsers:

http://www.thescripts.com/forum/thread731409.html

However, when I select all, copy, and paste into Notepad I only see the title once (not repeated) so maybe this way is better? The effect created looks the same to me in IE7 and in Firefox, again promising.

[acoder]

Welcome to TSDN!

You don't need Ajax for the drop shadow effect. Just some CSS will do fine.

To add it after the page has loaded will require some JavaScript. Do you want it to be added afterwards or does it not matter?

[adastic]

What matters to me is cross-browser compatibility. I have been looking for days online for "how-to" stuff on drop shadows using CSS, and when I check out their examples in Firefox and IE, they don't work in one or the other, and some don't work in either. So this AJAX example feels promising 'cause it looks the same in both. (No telling how it looks in other versions of IE or Firefox, but so far it's got more promise than the rest...)

[adastic]

P.S. On that first link I posted in the original note above, if you search for "auto create" in the text, the author references the use of AJAX to create the effect -- but as far as I can tell he doesn't explain how on the site. I know I could ask directly, but I'm also hoping for objective input on the merits of his approach, hence asking here. :) (Oh, and thanks for the welcome, btw -- this looks like a good site for getting this kinda info/feedback!)

[acoder]

If you do want so see how its been done, look for autoshadow.js in the source. It's achieved through the use of DHTML (a combination of JavaScript, HTML and CSS).

[adastic]

Would you recommend this technique in terms of cross-browser compatibility in general, or did I just luck out with my two browsers being able to see it? And could it be used to offset text by something more typical like a pixel or two?

[acoder]

I don't like the use of browser detection. It probably won't be supported by all browsers, otherwise it seems fine.

It makes use of outerText which is not supported by most browsers, but has been added as a property which is why it works in Firefox. All outerText is is the actual text within the tag ignoring any tags within it. If you have only text within the tags that you want to add this to, then innerHTML should be fine. If not, you may need to parse the text.

As for the position, you just need to change the left and top properties which are easy to modify if you look at the code.

[gits]

hi ...

only adding a note to make one thing clear: AJAX = asynchronous javascript and xml ... it has nothing to do with setting some css-styles or anything dhtml-like gui-widgets ... it is a very simple thing of using the XMLHttpRequestO bject to make a request in the background to avoid a page-refresh and allow to update small parts of a page ... AJAX is nothing more then this ;)

kind regards

[acoder]

only adding a note to make one thing clear: AJAX = asynchronous javascript and xml ... it has nothing to do with setting some css-styles or anything dhtml-like gui-widgets ... it is a very simple thing of using the XMLHttpRequestO bject to make a request in the background to avoid a page-refresh and allow to update small parts of a page ... AJAX is nothing more then this ;)

Of course, I did mention this to begin with, but probably didn't make myself clear. Thanks!

[gits]

Of course, I did mention this to begin with, but probably didn't make myself clear. Thanks!

i know :) ... i only pointed it out especially since the term was repeatedly used by the OP after you told him that it has nothing to do with ajax ... and i think the usage of that term for DHMTL-things is the worst misunderstandin g of the ajax-technologie today! ...

kind regards