JavaScript - Onmouseover/out Visibility Effects

I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

it's so "Are you married?" "Yes" "No" (no is default checked)
when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
any help much appreciated.

Thanks!

hi all,

i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks!

code for the combo box: PHP Code:
select name="country" size="1" id="country" 
style="position:absolute; left:451px; top:260px; width:176px; 
color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; 
z-index:13" onChange="PhoneMask();">
<option value="1">United States</option>
<option value="2">Australia</option>
<option value="3">China</option>
<option value="4">Mexico</option>
<option value="5">United Kingdom</option>
</select> 


code for the different labels i want to display: PHP Code:
/*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/

<div id="phoneLabelUS" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
*Telephone Number </b></font><font style="font-size:12px" 
face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span>
</b></font></div>

<div id="phoneLabelAU" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" 
align="left"><font style="font-size:12px" color="#FF0000" 
face="Arial"><b>*Telephone Number </b></font><font 
style="font-size:12px" face="Arial"><b><span class="style9">
(xx-xxxx-xxxx)</span></b></font></div>

<div id="phoneLabelOTHER" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
Telephone Number</b></font></div>

/*------------------------------------------------------------------------------------*/ 


here is my PhoneMask() function: PHP Code:
function PhoneMask() {

    if (document.getElementById("country").value == "1") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 51;
        document.getElementById("phoneLabelUS").style.visibility = 'visible'; }
    elseif (document.getElementById("country").value == "2") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 51;
        document.getElementById("phoneLabelAU").style.visibility = 'visible';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
    else { 
        document.getElementById("phoneLabelOTHER").style.zIndex = 51;
        document.getElementById("phoneLabelOTHER").style.visibility = 'visible';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
        
} 

Hi there! I would REALLY appreciate any help!

I've got a script that toggles the visibility of a div on "dashboard.html":

Code:

$(document).ready(function(){

        $("#add_networks_wrapper, .remove_box").hide();
	$(".toggle_add_networks").show();
	
	$('.toggle_add_networks').click(function(){
	$("#add_networks_wrapper, .remove_box").slideToggle();
	});

});

On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.

What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.

Any help would be very appreciated!

I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this.
how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.

thanks

How can i change div visibility if for example index.php?site=news&show=angels http://mmwebstudio.eu/prace/2/ i have tryed to use:
Quote:
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
but i cannot use position absolute for my news( height of main div wont be spread) pls help

I have a question: how can you use a drop down box to show another drop down box? Here is my code below.
Code:

<html>
	<head>
<script type="text/javascript">
"use strict";
	function showlist()
	{
		var list=document.getElementById("id1");
		var newlist=list.options[list.selectedIndex].value;
		if (newlist==="Opt1")
		{
			document.getElementById("one").style.visibility="visible";
			document.getElementById("two").style.visibility="hidden";
		}
		if (newlist==="Opt2")
		{
			document.getElementById("two").style.visibility="visible";
			document.getElementById("one").style.visibility="hidden";
		}
	}
</script>
<style type="text/css">
	select.a{visibility:hidden;}
</style>
	</head>
	<body>
<select id="chooseboxtoshow">
	<option value="Opt1">Option 1</option>
	<option value="Opt2">Option 2</option>
</select><br />
<select display="none" id="one" class="a">
	<option value="1a">Option 1a</option>
	<option value="1b">Option 2a</option>
</select><br />
<select display="none" id="two" class="a">
	<option value="2a">Option 1b</option>
	<option value="2b">Option 2b</option>
</select><br />
<input type="button" value="Show new list" onclick="showlist()">
	</body>
</html>

Does anyone have ideas on how I can do it? Thanks!

this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this?


Code:

// SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

(function() { // BeginSpryComponent
 
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
 alert("SpryDOMEffects.js requires SpryDOMUtils.js");
 return;
}

if (!Spry.Effect) Spry.Effect = {};

Spry.Effect.Animator = function(opts)
{
 Spry.Effect.Animator.Notifier.call(this);

 this.animatorID = Spry.Effect.Animator.nextID++;
 this.dropFrames = true;
 this.fps = 60; // frames per-second
 this.duration = 500; // msecs
 this.timer = 0;
 this.startTime = 0; // Used only when dropFrames is true.
 this.currentFrame = 0;
 this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
 this.stopped = false;

 Spry.Effect.Animator.copyProps(this, opts);

 this.interval = 1000 / this.fps;
 this.numFrames = (this.duration / 1000) * this.fps;

 if (this.onComplete)
 {
  var self = this;
  this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
 }
};

Spry.Effect.Animator.nextID = 1;

Spry.Effect.Animator.copyProps = function(dst, src)
{
 if (src)
 {
  for (prop in src)
   dst[prop] = src[prop];
 }
 return dst;
};

Spry.Effect.Animator.getElement = function(element)
{
 if (arguments.length > 1)
 {
  for (var i = 0, elements = [], length = arguments.length; i < length; i++)
   elements.push(Spry.Effect.Animator.getElement(arguments[i]));
  return elements;
 }
 if (typeof element == 'string')
  element = document.getElementById(element);
 return element;
};

Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Effect.Animator.Notifier = function()
{
 this.observers = [];
 this.suppressNotifications = 0;
};

Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
 if (!observer)
  return;

 // Make sure the observer isn't already on the list.

 var len = this.observers.length;
 for (var i = 0; i < len; i++)
 {
  if (this.observers[i] == observer)
   return;
 }
 this.observers[len] = observer;
};

Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
 if (!observer)
  return;

 for (var i = 0; i < this.observers.length; i++)
 {
  if (this.observers[i] == observer)
  {
   this.observers.splice(i, 1);
   break;
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
 if (!methodName)
  return;

 if (!this.suppressNotifications)
 {
  var len = this.observers.length;
  for (var i = 0; i < len; i++)
  {
   var obs = this.observers[i];
   if (obs)
   {
    if (typeof obs == "function")
     obs(methodName, this, data);
    else if (obs[methodName])
     obs[methodName](this, data);
   }
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
 if (--this.suppressNotifications < 0)
 {
  this.suppressNotifications = 0;
  Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
 }
};

Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
 ++this.suppressNotifications;
};

Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;

Spry.Effect.Animator.prototype.start = function()
{
 this.stopped = false;
 this.currentFrame = 0;
 this.startTime = (new Date()).getTime();

 this.notifyObservers("onAnimationStart");

 var self = this;
 this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};

Spry.Effect.Animator.prototype.stop = function()
{
 if (this.timer)
  clearTimeout(this.timer);
 this.timer = 0;
 this.stopped = true;

 this.notifyObservers("onAnimationStopped");
};

Spry.Effect.Animator.prototype.onStepAnimation = function()
{
 var obj = {};

 if (this.dropFrames)
 {
  obj.duration = this.duration;
  obj.elapsed = ((new Date).getTime()) - this.startTime;
  if (obj.elapsed > obj.duration)
   obj.elapsed = obj.duration;
 }
 else
 {
  obj.duration = this.numFrames;
  obj.elapsed = ++this.currentFrame;
 }

 obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)

 this.notifyObservers("onPreDraw", obj);
 this.draw(obj.elapsed, obj.duration, obj.easingConst);
 this.notifyObservers("onPostDraw", obj);

 if (!this.stopped)
 {
  if (obj.elapsed < obj.duration)
  {
   var self = this;
   this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
  }
  else
  {
   this.stop();
   this.notifyObservers("onAnimationComplete");
  }
 }
};

Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
 // The default draw method does nothing. It is assumed that
 // derived classes will provide their own implementation of this
 // method.

 debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};


///////////////////////////////////////////////////////////////////////////////

Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
 this.animationSets = [];

 Spry.Effect.Animator.call(this, opts);

 this.add(elements, styleStr);
};

Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;

Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
 // The first argument for the CSSAnimator can be
 // the id of an element, an element node, or an array of
 // elements and/or ids.

 elements = Spry.$$(elements);

 if (elements.length < 1)
  return;

 var animSet = { elements: elements, cssProps: []};

 this.animationSets.push(animSet);

 // Convert the styleStr into an object.

 var toObj = Spry.Utils.styleStringToObject(styleStr);
 for (var p in toObj)
 {
  var obj = new Object;
  var v = toObj[p];
  obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
  obj.units = v.replace(/[-\d+\.]/g, "");
  toObj[p] = obj;
 }

 for (var i = 0; i < elements.length; i++)
 {
  var obj = animSet.cssProps[i] = new Object;
  for (var p in toObj)
  {
   var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
   if (!pFuncs)
    pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];

   obj[p] = new Object;
   obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
   obj[p].to = toObj[p].value;
   obj[p].distance = obj[p].to - obj[p].from;
   obj[p].units = toObj[p].units;
  }
 }
};

Spry.Effect.CSSAnimator.prototype.start = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   if (!eleProps)
    eleProps = ele.spryCSSAnimatorProps = new Object;
 
   var obj = cssProps[i];
   for (var p in obj)
    eleProps[p] = this.animatorID;
  }
 }

 return Spry.Effect.Animator.prototype.start.call(this);
};

Spry.Effect.CSSAnimator.prototype.stop = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var obj = cssProps[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
     delete eleProps[p];
   }
  }
 }

 return Spry.Effect.Animator.prototype.stop.call(this);
};

Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var eleProps = ele.spryCSSAnimatorProps;
   var obj = cssProps[i];
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
    {
     var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
     if (!pFuncs)
      pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
 
     if (elapsed > duration)
      pFuncs.set(ele, p, obj[p].to + obj[p].units);
     else
      pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
    }
   }
  }
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs = {};

Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
 get: function(ele, prop)
 {
  return ele.style[prop];
 },

 set: function(ele, prop, val)
 {
  ele.style[prop] = val;
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
 get: function(ele, prop)
 {
  var val = 1;
  
  if (ele.style.opacity)
   val = ele.style.opacity;
  else if (ele.style.filter)
  {
   var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
   if (strVal)
    val = parseInt(strVal) / 100;
  }
  return val + "";
 },

 set: function(ele, prop, val)
 {
  ele.style.opacity = "" + val;
  ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
 }
};

///////////////////////////////////////////////////////////////////////////////

Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
 var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
 Spry.Effect.Animator.copyProps(opts, options);

 var objs = [];
 for (var i = 0; i < this.length; i++)
 {
  var obj = objs[i] = new Object;
  obj.ele = this[i];
  obj.from = obj.ele[propName];
  obj.distance = to - obj.from;
 }

 var startTime = (new Date).getTime();

 var animateFunc = function()
 {
  var elapsedTime = ((new Date).getTime()) - startTime;

  if (elapsedTime > opts.duration)
  {
   for (var i = 0; i < objs.length; i++)
    objs[i].ele[propName] = to;
   if (opts.onComplete)
    opts.onComplete();
  }
  else
  {
   for (var i = 0; i < objs.length; i++)
   {
    var obj = objs[i];
    obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
   }
   setTimeout(animateFunc, opts.interval);
  }
 };

 setTimeout(animateFunc, opts.interval);
 return this;
};

Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
 var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
 a.start();
 return this;
};

})(); // EndSpryComponent

Hi Coders,

I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page.

The first effect changes the picture within a table - works fine
The second effect should change the text within another table. - does not work.

I am receiving the error message:
'document.text' is null or not an object.

Here is the code which lies on my image:

Code:

<td style="height: 101px; width: 20%" valign="top">
<img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td>

Here is the newchange() script:

Code:

<script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>

And I am sure that the table in which the text should appear has its Id and Name defined as "text"

Here is it:

Code:

<td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top">
<strong class="style10">Endavour has launched</strong></td>

But could not make it work error free.
Thanks for any comments.

Hi guys

I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added:

Code:

<script type="text/javascript">
$(document).ready(function () {	
	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here.

Any ideas on how I can fix this?

I need help with the script for multiple mouseOver Effects for my Menu Bar.

The script I have is:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="home1.jpg";
}
function mouseOut()
{
document.getElementById("b1").src ="home.jpg";
}
</script>
<A HREF="Index.html" rel="nofollow" target="_blank"><img src="home.jpg" id="b1" width="167" height="60" onmouseover="mouseOver()" onmouseout="mouseOut()"/></A>

However, that only does one mouseover effect. Can someone help me with this?

I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories.

i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want.

I'm working with the following images:

arrow1:
arrow2:
arrow3:

in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself)

the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1".

this is the code I'm working with, hope someone can help

Code:

<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"

second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>

<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>

Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?

The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out


http://www.sketchtravel.com/
http://www.foofighters.com/us/discography

thanks for your help

-rob

Happy Turkey Day!!

I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you

Link

Code:

<script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
  </script>

<img alt="Default Image" name="pic" src="default.gif"
 height="100" width="150" /><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
 href="your-page.html"><img alt="Button 1" name="a"
 src="upbutton1.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
 href="your-page.html"><img alt="Button 2" name="b"
 src="upbutton2.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
 href="your-page.html"><img alt="Button 3" name="c"
 src="upbutton3.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>

So, I have a list of items that need to have a new preset list item appear based on what day it is. I have the date script working (to test, change the first case to some random date and change the third case to todays date - 10192010 - It will fire that document.write). What I need the cases to do though, is set the visibility of certain list items.

This is just an example, there will be around 20 list items in the final project. As you can see in the first two cases, I've tried a couple different routes to no avail. Any help would be fantastic.

The Code (class references are irrelevant to this example, they belong to the final project):

Code:

<html>
<head>

<script type="text/javascript" language="JavaScript">
/*
Count up from any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/


function getToday(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900

var todaym=today.getMonth()
var todayd=today.getDate()
var simpledate=todaym+""+todayd+""+todayy


var firstItem=document.getElementById("listOne");
var secondItem=document.getElementById("listTwo");
var thirdItem=document.getElementById("listThree");


switch(simpledate){
	case "10192010":
		firstItem.style.visibility="visible";
		secondItem.style.visibility="hidden";
		thirdItem.style.visibility="hidden";
		break;
	case "10202010":
		document.getElementById("listOne").style.visibility="visible";
		document.getElementById("listTwo").style.visibility="visible";
		document.getElementById("listThree").style.visibility="hidden";
		break;
	case '10212010':
		document.write("This code works...why can't I change an elements style within this case block also?")
		break;
	default:
		document.write("Something is wrong")
}
}
//enter the count up date using the format year/month/day
getToday(2010,07,26)

</script>

</head>
<body>
	<div id="theList">
            <ul class="rounded">
                <li id="listOne" style="display:block;" class="arrow"><a href="#kliwComic-MvPDualBoot"><font size="1px">11/17/10 - </font>MvP: Dual Boot</a></li>
                <li id="listTwo" style="display:block;" class="arrow"><a href="#kliwComic-MvPTouchScreen"><font size="1px">11/18/10 - </font>MvP: Touch Screen</a></li>
                <li id="listThree" style="display:block;" class="arrow"><a href="#kliwComic-MvPVista"><font size="1px">11/19/10 - </font>MvP: Vista</a></li>
			</ul>
    </div>
            
            </body>
</html>

I'm a bit of a hack at this. Any input is greatly appreciated. Thanks again.