Posted By

alvaroisorna on 09/04/07


Tagged

css js prototypejs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

heinz1959


Javascript dynamic effects library for css & html


 / Published in: JavaScript
 

URL: http://kaedatorum.net/blog/

This js library will help you add dynamic effects to your html tags. It's recommended for IE, as it helps you to simulate tag:hover effects for example.

  1. /**
  2.  * @author alvaro isorna
  3.  * @projectDescription dynamic effects library for css & html
  4.  * @id dfx.js
  5.  * @extends prototype.js
  6.  * @use add a "dfx" className to your tags, in order to apply the dynamic effects
  7.  */
  8.  
  9. Event.observe(window, 'load', function(e){
  10. // dfx:hover
  11. $A(document.getElementsByClassName('dfx:hover')).each(function(poElement){
  12. Event.observe(poElement, 'mouseover', function(e){
  13. Element.addClassName(poElement, 'hover');
  14. }, false);
  15. Event.observe(poElement, 'mouseout', function(e){
  16. Element.removeClassName(poElement, 'hover');
  17. }, false);
  18. });
  19. // add any other "dfx" effects (:focus, :first, ...)
  20. // dfx:quotes
  21. $A(document.getElementsByClassName('dfx:quotes')).each(function(poElement){
  22. var cHTML_OPEN_QUOTE = '<span class="open-quote">&ldquo;</span>';
  23. var cHTML_CLOSE_QUOTE = '<span class="close-quote">&rdquo;</span>';
  24.  
  25. new Insertion.Top(poElement, cHTML_OPEN_QUOTE);
  26. new Insertion.Bottom(poElement, cHTML_CLOSE_QUOTE);
  27. });
  28. }, false);

Report this snippet  

You need to login to post a comment.