about

Biography:

Location: Dayton, OH
College: Cedarville University, Cedarville, OH
Degree: B.A. Management Information Systems (2002)
Certifications: Microsoft Certified Professional (MCP) 2002

Interests:

Music, Playing Guitar, Working on Cars, Home Improvement, Photography, Computers, Website Programming, Driving in the snow, NHL Hockey, Sand Volleyball, Settlers of Catan board game

Favorites:

Foods: Lasagna, Carrot Casserole, Chicken Parmesan
Sports: Hockey, Football, Volleyball, Soccer
Desserts: Peanut Butter Pie, Peanut Butter Passion ice cream
TV Shows: 24, The Office, Heroes, Mythbusters, Top Gear, Fifth Gear, Modern Marvels, Seinfeld, Simpsons


Contact Me:
Use this area to send me a note or message:
Name:
Email:
Comments:
Security Code:

fun stuff

Fun links you should probably check out:


Fun games you might want to play:


photo gallery

code samples

Current Code Samples:


Future Code Samples:

  • CAPTCHA form-protection of images using PHP and GD 2.0 library
  • Resizing images using PHP and the GD 2.0 library
  • Rotating images using PHP and the GD 2.0 library
CODE TUTORIAL: Show/Hide element with opacity level fading using JavaScript
Many of us web developers are now using the CSS property for "display" to show or hide page elements. Have you ever wanted to take that to the next step, graphically speaking?

I've always wanted to give a nice smooth fade to an item when setting it's CSS display property to "none", smoothly showing or hiding it on the page, without alot of extra work or too many JavaScript loops. Using JavaScript's setTimeout() function was always a bit messy for my taste, and usually introduced alot of overhead. It also became difficult to use in the case that the end user clicked on an item to hide, and while that item was hiding they clicked another item to start fading out. Unless you wanted to write some mutitheaded JavaScript code, it wouldn't work properly and you could have some very unexpected results.

Well, I spent some more time with setTimeout() and was able to come up with a solution that is fairly bulletproof on most modern web browsers. It's not CPU intensive, and allows for some flexibility in how the items are faded (such as the speed/duration and opacity level increment used for each progressive fade)

Here's a working sample you can try out for yourself:


DIV Element  (Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)

This is a test DIV container


SPAN Element  (Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)

This is a test SPAN container


INPUT Element  (Works fully in Firefox 1.5/2.0 AND IE6)




SELECT Element  (Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)




TEXTAREA Element  (Works fully in IE6, Firefox 1.5/2.0 doesn't do anything at all)





Here is the JavaScript code I wrote to do element opacity fadeOut/fadeIn and does the work in both IE6 and Firefox.
JavaScript CODE: "fadeIn-fadeOut-opacity-with-JavaScript.js"
<script type="text/javascript">
//  Global JS variable to hold obj of ElementID for item we are fading
var DIVElementById = "";
var ReducingFinished = false;
var ElementOpacityLevel = 0;
var OpacityLevelIncrement = 10;    //  Percentage value: 1-100
var FadeDelayMS = 60;             //  Milliseconds

//  Function determines whether we show or hide the item referenced by ElementID
function fader(ElementID, ActionToTake)
{
  DIVElementById = document.getElementById(ElementID);
  if (ActionToTake == "hide")
  {
    ElementOpacityLevel = 100;
    reduceOpacity();
  }
  else if (ActionToTake == "show")
  {  increaseOpacity();  }
}
//  Makes element more visible
function increaseOpacity()
{
  //  Check to make sure the DIVElementById is already set as visibility=visible
  if (DIVElementById.style.visibility != "visible")
  {  DIVElementById.style.visibility = "visible";  }
  
  //  If opacity level is less than 100, we can still increase the opacity
  if ((ElementOpacityLevel < 100) && (ReducingFinished == true))
  {
    ReducingFinished = true;
    ElementOpacityLevel += OpacityLevelIncrement;
    DIVElementById.style.MozOpacity = ""+(ElementOpacityLevel/100);
    DIVElementById.style.opacity = ""+(ElementOpacityLevel/100);
    DIVElementById.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
    setTimeout("increaseOpacity()", FadeDelayMS);
  }
  else
  {
    ReducingFinished = false;
  }
}
//  Makes element less visible
function reduceOpacity()
{
  //  If opacity level is greater than 0, we can still reduce the opacity
  if ((ElementOpacityLevel > 0) && (ReducingFinished == false))
  {
    ReducingFinished = false;
    ElementOpacityLevel -= OpacityLevelIncrement;
    DIVElementById.style.MozOpacity = ""+(ElementOpacityLevel/100);
    DIVElementById.style.opacity = ""+(ElementOpacityLevel/100);
    DIVElementById.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
    setTimeout("reduceOpacity()", FadeDelayMS);
  }
  else
  {
    ReducingFinished = true;

    //  When finished, make sure the DIVElementById is set to visibility=hidden
    if (DIVElementById.style.visibility != "hidden")
    {  DIVElementById.style.visibility = "hidden";  }
  }
}
</script>

Here is the HTML code for the test sample I used above:
HTML CODE: "fadeIn-fadeOut-opacity-with-JavaScript.html"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FadeIn/FadeOut CSS opacity with JavaScript</title>
</head>

<script type="text/javascript" src="fadeIn-fadeOut-opacity-with-JavaScript.js"></script>

<body>
<p><span class="codeSubhead">DIV Element</span>  <span class="italic_10px">(Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)</span></p>
<div id="testDIV" style="background-color:#006699; color:#CCCCFF;">This is a test DIV container</div>
<input type="button" value="DIV FadeOut" onClick="fader('testDIV', 'hide')">
<input type="button" value="DIV FadeIn" onClick="fader('testDIV', 'show')"><br>
<br>
<p><span class="codeSubhead">SPAN Element</span>  <span class="italic_10px">(Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)</span></p>
<span id="testSPAN" style="background-color:#006699; color:#CCCCFF;">This is a test SPAN container</span><br>
<input type="button" value="SPAN FadeOut" onClick="fader('testSPAN', 'hide')">
<input type="button" value="SPAN FadeIn" onClick="fader('testSPAN', 'show')"><br>
<br>
<p><span class="codeSubhead">INPUT Element</span>  <span class="italic_10px">(Works fully in Firefox 1.5/2.0 AND IE6)</span></p>
<input type="text" id="testInputText" size="15" value="input text"><br>
<input type="button" value="INPUT FadeOut" onClick="fader('testInputText', 'hide')">
<input type="button" value="INPUT FadeIn" onClick="fader('testInputText', 'show')"><br>
<br>
<p><span class="codeSubhead">SELECT Element</span>  <span class="italic_10px">(Works fully in Firefox 1.5/2.0, IE6 doesn't fade out, just sets visibility to hidden)</span></p>
<select id="testSelect"><option>option1</option><option>option2</option></select><br>
<input type="button" value="SELECT FadeOut" onClick="fader('testSelect', 'hide')">
<input type="button" value="SELECT FadeIn" onClick="fader('testSelect', 'show')"><br>
<br>
<p><span class="codeSubhead">TEXTAREA Element</span>  <span class="italic_10px">(Works fully in IE6, Firefox 1.5/2.0 doesn't do anything at all)</span></p>
<textarea name="testTextarea" id="testSelectText" cols="20" rows="2">Some text inside this textarea</textarea><br>
<input type="button" value="TEXTAREA FadeOut" onClick="fader('testTextarea', 'hide')">
<input type="button" value="TEXTAREA FadeIn" onClick="fader('testTextarea', 'show')">

</body>
</html>

my subaru wrx

subaru links

home improvement

friendly linkage

copyright © 2002-2008 Justin Tubbs email the webmaster