Zapatec DHTML Effects Manual

The DHTML Effects files are bundled in a zip file. Click the download link in the Effects section of Zapatec web site, and follow the instructions to download the file. Save the file (zpeffects.zip) to your website root folder on your computer or server.

In your web editor (Dreamweaver, UltraEdit, etc.), open the web page in which you want to use the effects. Position the cursor before the ending </head> tag. Paste the following script paths before the ending </head> tag:

<!-- Javascript Zapatec utilities file -->  
<script type="text/javascript" src="utils/zapatec.js"></script>
<!-- basic Javascript file for the effects -->
<script type="text/javascript" src="zpeffects/src/effects.js"> </script>
<!-- Only needed for the slide show-->
<script type="text/javascript" src="zpeffects/src/slideshow.js"></script>
<!-- Only needed for the hoverer -->
<script type="text/javascript" src="zpeffects/src/hoverer.js"></script>

The last two files are optional. Include the slideshow.js file only if you want to create a slide show. Include the hoverer.js file only if you want to enable a user to hover over an item to display an image.

<script src="utils/utils.js" type="text/javascript"></script> 
<script src="src/effects.js" type="text/javascript"></script>

<script type="text/javascript" src="utils/zapatec.js"></script>
<script type="text/javascript" src="zpeffects/src/effects.js"> </script>

All you have to do in your HTML page is to call Zapatec.Effects to have the effect applied to your containers.

See section on how to attach Zapatec Effects to all buttons.

Using your editing or FTP program, copy or move your web page and the entire tree folder to the root of your website.

Using your web browser, navigate to the web page that you created to include the Zapatec DHTML Effects. Congratulations! You have set up the most basic version of the Zapatec DHTML Effects! Now, you can change this highly adaptable application with the help of multiple features provided.

Effects are associated with an element usually with an onclick event.

The onclick calls the Zapatec Effects module.

There are three methods related to Zapatec Effects. They are:

The show and hide functions have the following parameters:

For example, if you want a fade effect for a button, add Zapatec.Effects.show to the onclick event:

<input type=button 
 onclick="Zapatec.Effects.show(this, 5, 'fade')" 
 value='Click for Fade'>

To add several effects to an object, pass an array instead of a single string:

<input type=button 
 onclick="Zapatec.Effects.show(this, 5, ['fade', 'highlight'])" 
 value='Click for Fade'>

An apply is used when a show/hide scenario is not applicable to the particular effect. The effect that is appropriate for apply is dropShadow .

To apply an effect to an element, call Zapatec.Effects.apply(ref, effect, params)

In addition to looking at the examples in this section, a good way to preview the various effects to run the Effects demo.

The effect parameters are lower-case and case-sensitive. For example, the wipe will not work if you pass in ’Wipe’ instead of ’wipe’.

Several effects are sensitive to the browser you use and may require additional customization to work properly.

For example, in Opera and Firefox, Fade and Highlight work regardless of whether CSS position property is set to "absolute".

Though, in Internet Explorer 6.0 and up, Fade requires that the target element be configured with its CSS position property set to "absolute":

<style type="text/css">.styleName{position: absolute}</style> : 

Highlight, in its turn, works irrespective of the CSS position property value.

Some effects conflict with one another. Consequently, you can not select the combinations of them. In the Custom demo, you may check for possible combinations of effects.

2.1. fade

Instead of the container appearing and disappearing instantly, it fades in and out. The opacity dynamically increases on show and decreases on hide.

2.3. slideTop

Instead of the container appearing and disappearing instantly, it slides down from the top.

During show, the top of the container appears first and the container slides down until it is fully displayed. During hide, it slides up from the bottom until it disappears.

The following diagram shows how an element is displayed during show.

1. Bottom

2. Middle and Bottom

3. Top, Middle, and Bottom.

2.6. glideBottom

During show, the top of the container appears first and the container glides down until it is fully displayed. During hide, it glides up until it disappears.

For example, on show, the top 10% is displayed, then the next 10%, until 100% is displayed. The container is dynamically clipped from the top down.

Table shows Top, then Top and Middle, then Top, Middle, and Bottom.

1. Top

2. Top and Middle

3. Top, Middle, and Bottom.

2.10. wipe

Instead of the container appearing and disappearing instantly, it wipes in and out. The width and height of the container expand during show and collapse during hide at the same rate. The container (rectangle) is clipped at the top left corner and increases in size until the top left corner reaches the bottom right corner.

2.11. unfurl

Unfurl is similar to wipe, except that the width fully expands and then the height.

Zapatec.Effects.apply(this, 'dropShadow', {deep:5})

If true, then after the last slide was shown it starts from the very beginning.

This is the amount of time, in milliseconds, that each slide will be visible. Each slide can override this value on an individual basis.

This is the amount of time, in milliseconds, for the animation effects.

This is the visual effect for displaying slides. Each slide can have its own effect.

These are the container IDs or references to the HTML elements that provide the content of the slide show.

This is an optional callback to invoke during show and hide.

The callback takes two input arguments:

This is an optional callback to invoke when the cycle has finished or is ready to begin. This is useful for displaying an image or message at the end of the cycle.

The callback takes a single input argument:

boolean bEnd - true if at the end of the cycle, false if at the beginning of the cycle

This is the ID of the element to display at the end of the cycle.

While cycling, this display is set to ’none’

At the end of the cycle, this display is set to ’block’

You can use Event Listeners to assign specific actions to certain events. If this event is fired - the appropriate function gets executed. Specify Event Listeners in the constructor. For example:

eventListeners: {
      beforeSlideShow: function(slideNumber){
             //do something before slide gets shown
      },
      stop: function(){
             //do something after slideshow stops
      }
}

Here is a code example that calls the Zapatec Slide Show constructor:

var slideshow = new Zapatec.SlideShow({
effect: 'fade',
slides: [
  "slide1", "slide1a", "slide2", "slide2a", "slide3", "slide3a",
  "slide4", "slide4a", "slide5", "slide5a"
],
cycling: true,
animSpeed: 10,
speed: 100,
callback: ss_callback,
eventListeners: {
      beforeSlideShow: function(slideNumber){
             //do something before slide gets shown
      },
      stop: function(){
             //do something after slideshow stops
      }
}
});

Then you can use slideshow.start() and slideshow.stop() methods to start and stop slideshow.

This is the anchor element for the hoverer. It can be any container; it does not have to be an HTML anchor.

The argument is either the ID of the container as a string or the container object.

This is the element that is displayed when the user’s mouser hovers over the anchor. The argument is either the ID of the target element as a string, or the object.

If true, this element is displayed when the page loads.

The following example shows how to apply effects globally to all the buttons on the page.

<html>
<head>
<script type='text/javascript' src='../utils/utils.js'></script>
<script type="text/javascript" src="../src/effects.js"></script>
<script>
function attach_effects() {
var e, i;

e=document.getElementsByTagName('input')
// All buttons
for (i=0; i<e.length; i++)
   if (e[i].type=='button')
         e[i].onclick=function() { Zapatec.Effects.show(this, 5, ['highlight']) }
}
</script>
</head>
<body onload='attach_effects()'>
   Only BUTTON types will have effects<br>
   <form action=''>
      <input type=button value="Button 1">
      <input type=button value="Button 2">
      <input type=button value="Button 3">
      <br>Input Text<input type=text><br>
      <input type=submit>
   </form>
</body>
</html>