Slider code

Reworked a bit of slider code from 45royale.com. We are using it on our new site so I figured I would share with all =)

----

1) Grab http://prototype.conio.net and http://script.aculo.us

2) Make sure effects.js has the Combo Variables code [displayed below]

3) Add the css code to your css file

4) Add slider code to HTML files

5) Add a button image to your media folder

----

/*
--------------------------------------------------
Combo Variables code
--------------------------------------------------
*/

Effect.OpenUp = function(element) {
  element = $(element);
  new Effect.BlindDown(element, arguments[1] || {});
}

Effect.CloseDown = function(element) {
  element = $(element);
  new Effect.BlindUp(element, arguments[1] || {});
}

Effect.Combo = function(element) {
  element = $(element);
  if(element.style.display == ‘none’) {
    new Effect.OpenUp(element, arguments[1] || {});
  }else {
    new Effect.CloseDown(element, arguments[1] || {});
  }
}

----

/*
--------------------------------------------------
slider css code
--------------------------------------------------
*/

.slider {
  width: 629px;
  margin: 0px 0px 0px 0px;
  padding: 7px 7px 0px 7px;
  border: 1px solid #999999;

}

.slider a {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background: #ffffff url(/media/new/plus-button.png) no-repeat center right;
  min-height: 25px;
  /* border: 1px solid #999999; */
  display: block;
  color: #606060;
}

.slider a:hover {
  color: #999999;
}
----

<!-- html code -->

  <div class=”slider”>
 
    <h5><a href=”javascript:Effect.Combo(‘slide-content’, {duration: .5});”>
    Click to slide</a></h5>
   
    <div id=”slide-content” style=”display:none;”>
     
      Content you want to slide
   
    </div> <!-- id=”slide-content” -->
 
  </div> <!-- class=”slider” -->

----

Button -->