Results 1 to 8 of 8

Thread: [DHTML] Javascript Text Effects Script

  1. #1
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default [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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,236 Times in 3,197 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,236 Times in 3,197 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,236 Times in 3,197 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2007
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,236 Times in 3,197 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-25-2007 at 10:43 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •