Animated Popup Elements

JavaScriptSource Staff Feb 2, 2009

General

Bring simple and effective animation to a page by fading your popup elements in and out using this JavaScript function.

Click for demonstration page

Notes

Created by: HunBug
Web Site: http://www.astral-consultancy.co.uk/
Posted: February 2, 2009

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: animatedPopup.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: HunBug | http://www.astral-consultancy.co.uk/ */

var fadeOpacity  = new Array();
var fadeTimer    = new Array();
var fadeInterval = 100;  // milliseconds

function fade(o,d) {
  // o - Object to fade in or out.
  // d - Display, true =  fade in, false = fade out

  var obj = document.getElementById(o);

  if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block')) {
    if(fadeTimer[o])
      clearInterval(fadeTimer[o]);
    else
      if(d) fadeOpacity[o] = 0;
      else  fadeOpacity[o] = 9;
  
    obj.style.opacity = "."+fadeOpacity[o].toString();
    obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
    
    if(d) {
      obj.style.display = 'block';
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
    } else
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
  }
}

function fadeAnimation(o,i) {
  // o - o - Object to fade in or out.
  // i - increment, 1 = Fade In

  var obj = document.getElementById(o);
  fadeOpacity[o] += i;
  obj.style.opacity = "."+fadeOpacity[o].toString();
  obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

  if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0')) {
    if(fadeOpacity[o]=='0')
      obj.style.display = 'none';
    else {
      obj.style.opacity = "1";
      obj.style.filter  = "alpha(opacity=100)";
    }

    clearInterval(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeOpacity[o]);
  }  
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.demoPopup {
  border: solid 1px #333;
  font-family: Tahoma;
  font-size: 12px;
  display: none;
  position: absolute;
  width: 300px;
  z-index: 60;
}

.demoPopuptitle {
  background: blue;
  color: white;
  font-weight: bold;
  height: 15px;
  padding: 5px;
}

.demoPopupbody {
  background: #ddd;
  padding: 5px;
  text-align: center;
}

#demoPopup1 {
  top: 100px;
  left: 50px;
}

#demoPopup2 {
  top: 100px;
  left: 400px;
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<input type="button" value="Show Popup 1" onClick="fade('demoPopup1',true);">
<input type="button" value="Show Popup 2" onClick="fade('demoPopup2',true);">

<div id="demoPopup1" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 1</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup1',false);">
  </div>
</div>

 <div id="demoPopup2" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 2</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup2',false);">
  </div>
</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details