[DHTML] Javascript Text Effects Script

1) CODE TITLE: Javascript Text Effects Example

2) AUTHOR NAME/NOTES: Ryan Dutton

3) DESCRIPTION: The Text Effects script performs various animations on a HTML element containing text.

4) URL TO CODE:
http://www.theredplanet.org/examples...t_effects.html

I like it a lot! I did notice though, on your demo page in Opera 9 and IE 7 that if I clicked the buttons in rapid succession and sometimes even just in a slow and orderly fashion, sometimes it would change to the link instead of applying the effect. In FF 2, doing the rapid clicking caused the page to freak out (rapidly change its width as evidenced by a growing and shrinking horizontal scrollbar, while also showing code bleed through) and stopped working. A refresh cleared it though.

Thanks for your feedback John. I have modified the code slightly to only allow a single transition at a time. Hopefully this will solve some of the problem. It seems to work ok now in Firefox2, however I don't have access to IE7 to test at the moment.
The URL I am verifying is : http://www.theredplanet.org/examples...t_effects.html
Regards, Ryan

OK, sorry to take so long to get back to you. The problem is still occurring in IE 7, Opera and FF, though the original FF problem is gone. I have figured out why, at least partly. What is happening is that when you disperse the link, phantom 'hot spots' in between and on the buttons become links, even though they have the 'text' style cursor in IE. In Opera and FF they even exhibit the 'pointer/hand' style cursor. This is obviously most likely an artifact of the position property of the link after it is dispersed, coupled with using only its opacity, and/or z-index, and/or visibility properties to obscure it from view. If you were to set its style display property to none after dispersal, this may fix it. A link with display:none; (style) or style.display='none'; (scripted) cannot be clicked. Or, you could add an onclick event - return false; to it when it is dispersed and remove same when it is in view once again, but this may cause memory problems in IE, so my first idea would probably be better.

Thanks for checking it out again John. I see what you mean with the artifacts appearing over the buttons.

I have done 2 things to remedy the problem. After a disperse or fade-out transition, I reset the position of each character to its original location so it doesn't overlap buttons etc. Secondly, the 'visibility' style of the element gets set to 'hidden', which makes the link unclickable as you suggested. I opted for visibilty:hidden over display:none as display none causes the page layout to change.

Ah very good! As I said, I really like this script, and now it is much better. Now there is only one other problem. In IE 7 when a filter is applied to text, it loses its anti-aliasing quality, making it appear noticeably different than before the filter was applied. This same thing occurs in IE 6, but by simply giving the element background, that takes care of it. For some reason, in IE 7, this no longer works. I'm not sure if there is any way around this. I have used a technique (in another script I've been playing with that involves images that have text fade in over them) where I fade the image out over a copy of itself that has the text already over it. That way, the text doesn't actually have a filter. I'm not sure how applicable that would be to your script, or if there might be another way of dealing with it here. I have tried removing the filter (which would only be possible when its 'work' is complete), but haven't found a way to do that. It would still exhibit this text quality change during filter use though.

This is a problem that has bothered me ever since IE 7 came out, and has nothing specifically to do with your script or its coding. It is a bug in IE 7 really, but it would still be nice to find a way of dealing with it.

Once again, thanks for your help, very much appreciated. Will be looking into the cleartype issue soon as I have IE7 which should be soon :)

Oh, you are welcome. Sorry I didn't suggest the visibility property. I was tired and even listed it as a possible cause of the problem. That was an error on my part. Just for some more information on this IE 7 problem, see:

http://www.dynamicdrive.com/forums/s...14&postcount=4

Unfortunately, I don't think any of those ideas will work with your script. The suspension of Clear Type in IE 7 in filtered elements is a bug that I hope MS will address soon. Hopefully, they will make it so even background isn't required, at least as far as opacity goes. That would make it equivalent to other browsers' opacity capabilities.