Posted By

mifly on 03/16/08


Tagged

javascript


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

Zidizei
MePha
paullorentzen
gAmUssA
joomla
guo3823538


slide


 / Published in: JavaScript
 

URL: http://firblitz.com/2007/3/6/re-how-to-create-digg-comment-style-sliding-divs-with-javascript-and-css

  1. var slideInUse = new Array();
  2.  
  3. function Slide(objId, options) {
  4. this.obj = document.getElementById(objId);
  5. this.duration = 1;
  6. this.height = parseInt(this.obj.style.height);
  7.  
  8. if(typeof options != 'undefined') { this.options = options; } else { this.options = {}; }
  9. if(this.options.duration) { this.duration = this.options.duration; }
  10.  
  11. this.up = function() {
  12. this.curHeight = this.height;
  13. this.newHeight = '1';
  14. if(slideInUse[objId] != true) {
  15. var finishTime = this.slide();
  16. window.setTimeout("Slide('"+objId+"').finishup("+this.height+");",finishTime);
  17. }
  18. }
  19.  
  20. this.down = function() {
  21. this.newHeight = this.height;
  22. this.curHeight = '1';
  23. if(slideInUse[objId] != true) {
  24. this.obj.style.height = '1px';
  25. this.obj.style.display = 'block';
  26. this.slide();
  27. }
  28. }
  29.  
  30. this.slide = function() {
  31. slideInUse[objId] = true;
  32. var frames = 30 * duration; // Running at 30 fps
  33.  
  34. var tIncrement = (duration*1000) / frames;
  35. tIncrement = Math.round(tIncrement);
  36. var sIncrement = (this.curHeight-this.newHeight) / frames;
  37.  
  38. var frameSizes = new Array();
  39. for(var i=0; i < frames; i++) {
  40. if(i < frames/2) {
  41. frameSizes[i] = (sIncrement * (i/frames))*4;
  42. } else {
  43. frameSizes[i] = (sIncrement * (1-(i/frames)))*4;
  44. }
  45. }
  46.  
  47. for(var i=0; i < frames; i++) {
  48. this.curHeight = this.curHeight - frameSizes[i];
  49. window.setTimeout("document.getElementById('"+objId+"').style.height='"+Math.round(this.curHeight)+"px';",tIncrement * i);
  50. }
  51.  
  52. window.setTimeout("delete(slideInUse['"+objId+"']);",tIncrement * i);
  53.  
  54. if(this.options.onComplete) {
  55. window.setTimeout(this.options.onComplete, tIncrement * (i-2));
  56. }
  57.  
  58. return tIncrement * i;
  59. }
  60.  
  61. this.finishup = function(height) {
  62. this.obj.style.display = 'none';
  63. this.obj.style.height = height + 'px';
  64. }
  65.  
  66. return this;
  67. }

Report this snippet  

You need to login to post a comment.