By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,695 Members | 1,284 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,695 IT Pros & Developers. It's quick & easy.

text drop shadow in AJAX

P: 4
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/arc...-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.
Jan 12 '08 #1
Share this Question
Share on Google+
9 Replies


acoder
Expert Mod 15k+
P: 16,027
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?
Jan 13 '08 #2

P: 4
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...)
Jan 13 '08 #3

P: 4
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!)
Jan 13 '08 #4

acoder
Expert Mod 15k+
P: 16,027
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).
Jan 14 '08 #5

P: 4
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?
Jan 14 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 14 '08 #7

gits
Expert Mod 5K+
P: 5,327
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 XMLHttpRequestObject 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
Jan 14 '08 #8

acoder
Expert Mod 15k+
P: 16,027
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 XMLHttpRequestObject 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!
Jan 15 '08 #9

gits
Expert Mod 5K+
P: 5,327
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 misunderstanding of the ajax-technologie today! ...

kind regards
Jan 15 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.