Javascript dynamic effects library for css & html


/ Published in: JavaScript
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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);

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.