Oyoyo Prototype JS Control Suite

Oyoyo is a control suite using the Prototype JS library and is meant to be used by anyone who wants dead simple controls and dynamic content added to their website. Items found in this project are as is and may still contain bugs until completion. Feel free to branch this project and come up with your own controls.

yoSlider

This little control lets you turn elements on your page into a sliding DIV or containing element for use as an image slide show or any content to slide horizontal. It also allows for the use of tabs in addition to the previous and next controls.

The build call and options

To create the slider, use the following call to build the object inside your script tags.

  new yoSlider(element, {options});

The options

• sliderHolderClass: Class name for the container of the track. default: slider_holder
• sliderTrackClass: Class name for the track that holds the elements. default: slider_track
• sliderElementClass: Class name of elements that hold the content. default: slider_item
• sliderNextButton: Class name of the next link. default: slider_next
• sliderPreviousButton: Class name of the previous link. default: slider_previous%
• slideBy: Number of elements that are visible at once. Using tabs constrains this to 1. default: 1
• useTabs: Boolean. default: false
• sliderTabsClass: Class name for tabs container, typically a unordered list element. default: slider_tabs
• selectedTabClass: Class name for current tab selected. default: highlighted

HTML Setup

All elements for the slider must be contained in a unique DIV with a unique ID for all parts to work.

The sliding DIV

  <div class="slider_holder">
    <div class="slider_track">
      <div id="item_1" class="slider_item">
        Content goes here.
      </div>
      <div id="item_2" class="slider_item">
        Content goes here.
      </div>
      <div id="item_3" class="slider_item">
        Content goes here.
      </div>
      ...
    </div>
  </div>

The previous/next controls

  <a href="javascript:void(0)" class="slider_previous">&laquo; Previous</a>
  <a href="javascript:void(0)" class="slider_next">Next &raquo;</a>

The tab setup

If you need the sliding box to be controlled by tabs, use the following html to setup the tabs. The sliding area will be mandated to be constrained to slide by 1 item only if tabs are used.

  <ul class="slider_tabs">
    <li><a href="javascript:void(0)" class="slider_tab">Item one</a></li>
    <li><a href="javascript:void(0)" class="slider_tab">Item two</a></li>
    <li><a href="javascript:void(0)" class="slider_tab">Item three</a></li>
    ...
  </ul>

CSS

There is no need to set the height of the sliding track as it is dynamically calculated based on the tallest item that it holds. The width of the slider_item class is up to you, but must be set.

.slider_holder{
	position: relative;
	overflow: hidden;
}

	.slider_track{
		position: absolute;

	}

	.slider_item{
		width: 400px;
		float: left;
	}

Future development

• Allow for external links to jump to specific items in slider.

yoDropdown

yoExpander

If you have ever had more text or objects than you want to show on the page and have always wanted to be able to hide/show with a simple call, then this is the control for that.

The build call and options

No need for an elementID, it reacts to any DOM elements on the page with a specific class name.

  new yoExpand({options});

The options

• togglerClass: Class name for the link toggler to hide/show element. default: yoExpander
• expandedClass: Class name for the link toggler if items are visible. default: expanded
• hiddenElementClass: Class name for the elements to be hidden/shown on click of toggler. default: hidden_element
• hideText: Text that shows in toggler if element is currently shown. default: show less
• method: Method that the hidden element is shown. Options include: blind, slide, and fade default: null
• duration: Integer. Time in seconds it takes to show/hide element. default: 1
• initiallyHide: Boolean. Do you want the element to be initially hiden? default: true

HTML Setup

  Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <div class="hidden_text">
    This is hidden text here.
  </div>
  <a href="javascript:void(0)" class="yoExpander">show more</a>

Please note, if using the method slide, you will need to include an extra div inside the container of the hidden element. This is due to the DOM object having something to push down structure wise. For example:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit
  <div class="hidden_text">
    <div>
      This is hidden text here.
  </div>
  </div>
  <a href="javascript:void(0)" class="yoExpander">show more</a>

yoTabIt