Java Script Vertical Slide

@slaughtersFeb 16.2009 — #I wrote a slider type of function which you could probably adapt pretty easily.

(One of these days I'll get around to doing a better job at writing it up in my blog)

Example: http://www.stansight.com/slider/index.html

JavaScript Source: http://www.stansight.com/slider/slider.js
[CODE]// *****************************************************************************
 // ** slider.js
 // **
 // ** Basic Concept: 
 // **
 // ** Slide a menu, a form, or help box out from under what ever element the
 // ** was clicked on by the user.
 // **
 // ** This is accomplished by animating the changing height of a DIV tag so it 
 // ** contracts and expands to give the appearance of a panel sliding out from
 // ** the bottom of the clicked element. 
 // ** 
 // ** The DIV panel can contain anything you wish.  A menu, a form, etc..  The 
 // ** only restriction is that it must exist. 
 // ** 
 // ** Author: Stan Slaughter
 // ** Date: 08/05/2008
 // ** E-mail: [email protected]
 // ** Web: http://www.StanSight.Com/
 // *****************************************************************************
 
 var sliderIntervalId = 0;
 var minHeight = 10;
 
 //////////////////////////////////////////////////////////////////////////////
 // slidePanel - Start the slide open method
 //  @param   sliderName - Name of sliding DIV panel
 //  @return  void
 //////////////////////////////////////////////////////////////////////////////
 
 function slidePanel(sliderName)
 {
 // Get object reference to element which triggered this event
 var event = (this.event) ? this.event : slidePanel.caller.arguments[0] || window.event;
 var slideFrom = event.target ? event.target : event.srcElement;
 
  // Clear the previous interval to halt any current slide
  clearInterval(sliderIntervalId);
 
  // Get object reference to DIV slider panel 
  var slider = document.getElementById(sliderName);
 
  // Make sure sliding DIV panel is "positionable"
  slider.style.position = 'absolute';
 
  // Set maxHeight to current height of sliding DIV panel
  maxHeight = getMaxHeight(slider);
 
  // Hide sliding DIV panel
   HideSlide(sliderName);
 
  // Find current position of the SlideFrom object 
  var curr_pos = FindPosition(slideFrom);
  var curleft = curr_pos[0];
  var curtop = curr_pos[1];
 
  // Add offsetHeight to move it below the SlideFrom object 
  curtop += slideFrom.offsetHeight; 
 
   // Move slide panel to new location
   slider.style.top = curtop + 'px';
  slider.style.left = curleft + 'px';
 
  // After the move make the slider panel visible again then start the "SlideOpen" method
  slider.style.display='block'; 
  cmd = 'SlideOpen("' + sliderName + '",'+ maxHeight + ')';
  sliderIntervalId = setInterval(cmd, 20);
 }
 
 function getMaxHeight(obj) {
 
  // First time here get the height and create a new attribute to store it in 
  if (obj.getAttribute('maxHeight') == null) {
 
   // Move object off to left of screen then make it visible so we can grab
   // it's height (offsetHeight returns 0 if display='none')
   obj.style.left = "-1000px";
   obj.style.display = 'block';
   obj.setAttribute('maxHeight',obj.offsetHeight);
  }
 
  // Return the value in the attribute maxHeight
  return obj.getAttribute('maxHeight');
 }
 
 //////////////////////////////////////////////////////////////////////////////
 // SlideOpen -  Slide panel open to a max height (must be called with a
 //               setInterval function)
 //  @param   sliderName - Name of sliding DIV panel
 //  @param   maxHeight - Max height that sliderName will grow to
 //  @return  void
 //////////////////////////////////////////////////////////////////////////////
 
 function SlideOpen(sliderName,maxHeight)
 {
 var slideSpeed = 20;
 
  // Get current panel height as a number
  var slider = document.getElementById(sliderName);
  var sliderHeight=parseInt(slider.style.height);
 
  // When panel's height is more than maxHeight 
  if (sliderHeight >= maxHeight)
  {
   slider.style.height = maxHeight + 'px'; // Make sure the panel is maxHeight
   clearInterval(sliderIntervalId); // clearInterval to stop slide
  }
  else
  {
   // Increase panel height 
   sliderHeight += slideSpeed;
   if (sliderHeight > maxHeight) sliderHeight = maxHeight;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 
 //////////////////////////////////////////////////////////////////////////////
 // closeSlidePanel - Start the slide closed method
 //  @param   sliderName - Name of sliding DIV panel that will be slide closed
 //  @return  void
 //////////////////////////////////////////////////////////////////////////////
 
 function closeSlidePanel(sliderName)
 {
 // Clear the previous interval to halt any current slide
 clearInterval(sliderIntervalId);
 
  var slider = document.getElementById(sliderName);
  var sliderHeight=parseInt(slider.style.height,10);
 
  cmd = 'SlideClosed("' + sliderName + '",'+ minHeight + ')';
  sliderIntervalId = setInterval(cmd, 30);
 }
 
 
 //////////////////////////////////////////////////////////////////////////////
 // SlideClosed -  Slide panel closed to a min height (must be called with 
 //                a setInterval function)
 //  @param   sliderName - Name of sliding DIV panel
 //  @param   minHeight - Minimum height that sliderName will collapse to
 //  @return  void
 //////////////////////////////////////////////////////////////////////////////
 
 function SlideClosed(sliderName,minHeight)
 {
 var slideSpeed = 20;
 
  // Get current panel height as a number
  var slider = document.getElementById(sliderName);
  var sliderHeight=parseInt(slider.style.height,10); 
 
  // When panel's height is less than minHeight 
  if (sliderHeight <= minHeight)
  {
   HideSlide(sliderName);
  }
  else
  {
   // Decrease panel height 
   sliderHeight -= slideSpeed;
   if (sliderHeight < minHeight) sliderHeight = minHeight;
   slider.style.height = sliderHeight + 'px';
  }
 }
 
 
 //////////////////////////////////////////////////////////////////////////////
 // HideSlide -  Hide the slide panel
 //  @param   sliderName - Name of sliding DIV panel to hide
 //  @return  void
 //////////////////////////////////////////////////////////////////////////////
 
 function HideSlide(sliderName)
 {
 // Get object reference to DIV slider panel 

 var slider = document.getElementById(sliderName); 
 
  clearInterval(sliderIntervalId);            // clearInterval to stop slide
  slider.style.display = 'none';              // Hide panel
  slider.style.height = minHeight + 'px';     // Make sure panel is min height
  slider.style.overflow = 'hidden';           // Make sure overflow is hidden
 }
 
 
 //////////////////////////////////////////////////////////////////////////////
 // FindPosition - find the Top and Left postion of an object on the page
 //  @param  obj - object of element whose position needs to be found
 //  @return array - Array whoose first eleemnt is the left postion and whoose 
 //                  second is the top position
 //////////////////////////////////////////////////////////////////////////////
 
 function FindPosition(obj) {
 // Figure out where the obj object is in the page by adding
 // up all the offsets for all the containing parent objects 

 if (obj == null) return [0,0];
 
  // Assign the obj object to a temp variable
  tmpObj = obj;
 
  // Get the offsets for the current object
  var obj_left = tmpObj.offsetLeft;
  var obj_top = tmpObj.offsetTop;
 
  // If the current object has a parent (ie contained in a table, div, etc..)
  if (tmpObj.offsetParent) {
 
   // Loop through all the parents and add up their offsets
   // The while loop will end when no more parents exist and a null is returned
   while (tmpObj = tmpObj.offsetParent) {
   obj_left += tmpObj.offsetLeft;
   obj_top += tmpObj.offsetTop;
   }
  }
  return [obj_left , obj_top];
 }[/CODE]
Java Script Vertical Slide

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Java Script Vertical Slide

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴
