JAVASCRIPT   44

side-bar

Guest on 3rd May 2022 09:47:27 AM

  1. var isExtended = 0;
  2. var height = 450;
  3. var width = 200;
  4. var slideDuration = 1000;
  5. var opacityDuration = 1500;
  6.  
  7. function extendContract(){
  8.        
  9.         if(isExtended == 0){
  10.                
  11.                 sideBarSlide(0, height, 0, width);
  12.                
  13.                 sideBarOpacity(0, 1);
  14.        
  15.                 isExtended = 1;
  16.                
  17.                 // make expand tab arrow image face left (inwards)
  18.                 $('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
  19.                
  20.         }
  21.         else{
  22.                
  23.                 sideBarSlide(height, 0, width, 0);
  24.                
  25.                 sideBarOpacity(1, 0);
  26.                
  27.                 isExtended = 0;
  28.                
  29.                 // make expand tab arrow image face right (outwards)
  30.                
  31.                 $('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
  32.         }
  33.  
  34. }
  35.  
  36. function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
  37.                 var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
  38.                 myEffects.custom({
  39.                          'height': [fromHeight, toHeight],
  40.                          'width': [fromWidth, toWidth]
  41.                 });
  42. }
  43.  
  44. function sideBarOpacity(from, to){
  45.                 var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
  46.                 myEffects.custom({
  47.                          'opacity': [from, to]
  48.                 });
  49. }
  50.  
  51. function init(){
  52.         $('sideBarTab').addEvent('click', function(){extendContract()});
  53. }
  54.  
  55. window.addEvent('load', function(){init()});

Raw Paste

Login or Register to edit or fork this paste. It's free.