Hot!Ajax

A slider for mootools with support for additional html tags and images that slide from the bottom of the screen upwards.

Implementation

• HEAD:

<p><SCRIPT src="mint" type=text/javascript></SCRIPT>
<SCRIPT language=javascript src="mootools.js" type=text/ecmascript></SCRIPT>
</p>
<p><SCRIPT language=javascript src="slimbox.js" 
type=text/ecmascript></SCRIPT></p>
   

• BODY:

To show the slider with an image, a heading and a sample text, you can call it this way:

<p><a href="http://www.hotajax.org/download/mootools/mooSlide/images/0.jpg
"rel="designSlide" rev="mycontent"title="Design Slide Sample::
There's some nice tool out there, and it just does
what it should - </p>it slides in an image with description and adds extra content
<p>rom a specified div">Slide</a></p>
   

To make the link a slideBox link, you need to add the tag rel="designSlide" to it. The slide can contain a heading and some text. Define it in your title tag of the link, separate the heading from the main text with a "::"

If you wish to have more content, or html tags like links in the displayed content area, you can specify another tag in your slideBox. SlideBox uses the "rev=" tag. Give your rev tag the name of the div that contains additional content. In this sample it's called rev="mycontent". This is the additional content
div:

<p><div id="mycontent"><a href="http://www.hotajax.org">
visit us at www.hotajax.org</a></div></p>
   

The div containing the additional content is automatically hidden when the page is loading.

works in IE 6/7, Opera and Firefox

Comments (1)

Show/Hide comments

Kyias said:

	Perfect!
	report abuse vote down vote up

February 06, 2008
Votes: +0

Show/Hide comment form

Name

Email

Website

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment