MOOSLIDE - AJAX CONTENT SLIDE

DEMO:

Slide in from top | Slide in from bottom

SHORT DESCRIPTION:

BASIC INFORMATION:

UPDATE JUNE 2009:

Additional functions added for mootols 1.2 version:

autoCloseDelay - define when the box should automatically disappear
closeBtn: 'element' - define an element which closes the actual
slide

mooSlide is an ajax replacement for the common lightbox found on many pages.

It can hold any type of content, from html, over images to flash. The dropdown can be slid into view from top of the page as well as from the bottom, and can also be used to create nice looking login panels, like on our page here.

Based on the mootools framework, this script is sleak, fast and can be used more than once on a page through its object orientated programming code.

Options

There are a few options that influence the behaviour and style of mooSlide, like drop speed, transition effects and executing of external functions after completed dropdown. Please read on the right about all options you can set up.

BASIC STEPS

Place the included mootools12.js and the mooslide12.js into your js directory. If your paths differ, adapt the next lines to match your directory structure.

INSTALLATION STEPS

Open the page you want mooSlide to be used. Now add these lines to the head section of your site:

<head>
<script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script>
<script language="javascript" type="text/ecmascript" src="js/mooslide12.js"></script>
<link href="css/socializer.css" rel="stylesheet" type="text/css" />
</head>

Now add a link to your document which will be used to slide in | out the mooSlide. Give it an ID, this id is used later on to identify the link.

Now define a <div> container with the content you want to slide in. Give it an ID too. ( in this sample we use 'test' as id for the div )

To create a mooSlide you will need to add the following code to your document, right before the closing body tag.

ADDING THE BOX

var px = new mooSlide2({

slideSpeed: 1700,
fadeSpeed: 500,
toggler:'toggle',
content:'test',
height:250,
removeOnClick: true,
opacity:'1',
effects:Fx.Transitions.Bounce.easeOut,
executeFunction:'sayGoodbye()',
from:'top',
loadExternal:'test.html'
});

</script>

JAVASCRIPT VARIABLES

slideSpeed:
This is a value in ms and determines how long the effect of sliding in will take.
fadeSpeed:
This is a value in ms and determines how long the effect of dissolving the box will take.
toggler:
defines the link (id) that is used to slide in | out the box
content:
this is the id of the container div with the contents that will slide in
height:
defines the height of the mooSlide box in px
removeOnClick:
boolean, (0|1) defines if the box is fading out when clicked
opacity:
float value, (0,0 to 1,0) defines the opacity of the box and its contents
executeFunction:
defines a function to execute when sliding out. Optional.
from:
(bottom|top) defines from which direction the slide box comes into view
loadExternal:
(file) specifies if the contents of the box should come from an external file.
closeBtn:
defines an element that you can use to close the slider
autoCloseDelay:
(ms) define the millseconds after the slide should disappear automatically

MORE INFORMATION

To execute the box on page load, you can use the function run()
(i.e. if you defined a mooSlide with px = new mooSlide(..., just add px.run(); to your doument)

This script has been tested in Firefox 2|3, IE6/IE7, Opera 9.2 and Safari for Windows 3.2. If you find any bugs, please drop a mail at admin[at]artviper.net

DOWNLOADS

This script is available in different versions and / or for different systems. Please choose the appropriate version:

Download versions:

for mootools 1.1
for motools 1.2

ADDITIONAL INFO

If you want to adapt our plugin for your own system or any system that isn't listed here, we'd be happy if you could drop us a copy so we can add it here.

QUESTIONS?

If you need help integrating this script or simply have a question, then feel free to drop us a line here >>

We develop AJAX | mySQL | PHP integrated systems, shop addons ( XT:Commerce, OSCommerce ), Javascript and AJAX widgets and many more.
Simply request a quote for your upcoming project.

Interesting Links

Latest Blog Entries

2010-02-03 - mootools dropDown menu - ajax menu... Just for all you mootools lovers out there, here's a drop down menu with a broad...
2010-01-30 - Google fighting IE6... Google plans to stop supporting the outdated IE6. Its limited support of modern ...
2010-01-23 - Website Thumbnail Server online... Finally the new system is online. All requests that have been made to artviper.n...
2010-01-19 - Free Website Thumbnails move to another server... Today, we are going to move our free screenshot service to another server, so th...
2010-01-17 - Website color finder produces Photoshop color pa... Our old mooColorFinder has undergone an update, and is now capable of producing ...