JavaScript - Need Help With Displaying A Submenu

I need some help with a drop down menu. I am working on a site with a left menu that slides out, and I've converted it to the top to drop down. So far, it is working ok, but the submenu items need to be below the parent, preferably left aligned. I have played with it a bit and so far can't seem to achieve what I want. See below where I'm clicking Resources and the menu is way too high and over to the right. Thanks in advance for any help. : )



Code:

//** Dynamic Drive Equal Columns Height script v1.01 (Nov 2nd, 06)
//** http://www.dynamicdrive.com/style/bl...height-script/

var ddequalcolumns=new Object()
//Input IDs (id attr) of columns to equalize. Script will check if each corresponding column actually exists:
ddequalcolumns.columnswatch=["sidebar-a", "content"]

ddequalcolumns.setHeights=function(reset){
var tallest=0
var resetit=(typeof reset=="string")? true : false
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null){
if (resetit)
document.getElementById(this.columnswatch[i]).style.height="auto"
if (document.getElementById(this.columnswatch[i]).offsetHeight>tallest)
tallest=document.getElementById(this.columnswatch[i]).offsetHeight
}
}
if (tallest>0){
for (var i=0; i<this.columnswatch.length; i++){
if (document.getElementById(this.columnswatch[i])!=null)
document.getElementById(this.columnswatch[i]).style.height=tallest+"px"
}
}
}

ddequalcolumns.resetHeights=function(){
this.setHeights("reset")
}

ddequalcolumns.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

ddequalcolumns.dotask(window, function(){ddequalcolumns.setHeights()}, "load")
ddequalcolumns.dotask(window, function(){if (typeof ddequalcolumns.timer!="undefined") clearTimeout(ddequalcolumns.timer); ddequalcolumns.timer=setTimeout("ddequalcolumns.resetHeights()", 200)}, "resize")



 /************************************************************************************************************
 (C) www.dhtmlgoodies.com, November 2005
 
 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. 
 
 Terms of use:
 You are free to use this script as long as the copyright message is kept intact. However, you may not
 redistribute, sell or repost it without our permission.
 
 Thank you!
 
 www.dhtmlgoodies.com
 Alf Magne Kalleland
 
 ************************************************************************************************************/

 var timeBeforeAutoHide = 700; // Microseconds to wait before auto hiding menu(1000 = 1 second)
 var slideSpeed_out = 10; // Steps to move sub menu at a time ( higher = faster)
 var slideSpeed_in = 10;
  
 
 var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
 var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
 
 var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
 var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
 
 var xOffsetSubMenu = 0;  // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
 
 var slideDirection = 'right'; // Slide to left or right ?
 
 /* Don't change anything below here */
 
 var activeSubMenuId = false;
 var activeMainMenuItem = false;
 var currentZIndex = 1000;  
 var autoHideTimer = 0;
 var submenuObjArray = new Array();
 var okToSlideInSub = new Array();
 var subPositioned = new Array();
 

 function stopAutoHide()
 {
  autoHideTimer = -1;
 }
 
 function initAutoHide()
 {
  autoHideTimer = 0;
  if(autoHideTimer>=0)autoHide();
 }
 
 function autoHide()
 {
  
  if(autoHideTimer>timeBeforeAutoHide)
  {
   
   if(activeMainMenuItem){
    activeMainMenuItem.className='';
    activeMainMenuItem = false;
   }
   
   if(activeSubMenuId){
    var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
    showSub();
   }
  }else{
   if(autoHideTimer>=0){
    autoHideTimer+=50;
    setTimeout('autoHide()',50);
   }
  }
 } 
 
 function getTopPos(inputObj)
 {  
   var returnValue = inputObj.offsetTop;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
   return returnValue;
 }
 
 function getLeftPos(inputObj)
 {
   var returnValue = inputObj.offsetLeft;
   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
   return returnValue;
 }
 
 function showSub()
 {
  var subObj = false;
  if(this && this.tagName){
   var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
   okToSlideInSub[numericId] = false;
   var subObj = document.getElementById('subMenuDiv' + numericId);
   if(activeMainMenuItem)activeMainMenuItem.className='';
   if(subObj){
    if(!subPositioned[numericId]){
     if(slideDirection=='right'){
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
     }else{
      subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
      
     }
     submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
     subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
     subPositioned[numericId] = true;
    }    
    subObj.style.visibility = 'visible';
    subObj.style.zIndex = currentZIndex;
    currentZIndex++; 
    this.className='activeMainMenuItem';
    activeMainMenuItem = this;
   }
  }else{
   var numericId = activeSubMenuId;
  }
  if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
  if(numericId!=activeSubMenuId && this && subObj){
   subObj.style.width = '0px'; 
   slideMenu(numericId,slideSpeed_out);
   activeSubMenuId = numericId;
  }else{
   if(numericId!=activeSubMenuId)activeSubMenuId = false;
  }
  if(showSubOnMouseOver)stopAutoHide();
 }
 
 function slideMenu(menuIndex,speed){
  var obj = submenuObjArray[menuIndex]['divObj'];
  var obj2 = submenuObjArray[menuIndex]['ulObj'];
  var width = obj.offsetWidth + speed;
  if(speed<0){
   if(width<0)width = 0;
   obj.style.width = width + 'px';
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }
   if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
    obj.style.visibility = 'hidden';
    obj.style.width = '0px';
    if(activeSubMenuId==menuIndex)activeSubMenuId=false;
   }
   
  }else{
   if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
   if(slideDirection=='left'){
    obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
    obj2.style.left = '0px';
   }else{
    obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
   }  
   
   obj.style.width = width + 'px';
   if(width<submenuObjArray[menuIndex]['width']){
    setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
   }else{
    okToSlideInSub[menuIndex] = true;
   }
  }
 }
 function resetPosition()
 {
  subPositioned.length = 0;
 }
   
 function initLeftMenu()
 {
  var isMSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  var browserVersion = parseInt(navigator.userAgent.replace(/.*?MSIE ([0-9]+?)[^0-9].*/g,'$1'));
  if(!browserVersion)browserVersion=1;
  
  var menuObj = document.getElementById('dhtmlgoodies_menu'); 
  var mainMenuItemArray = new Array();
  
  var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
  while(mainMenuItem){
   if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
    mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
    var aTag = mainMenuItem.getElementsByTagName('A')[0];
    if(showSubOnMouseOver)
     aTag.onmouseover = showSub; 
    else
     aTag.onclick = showSub; 
   }
   mainMenuItem = mainMenuItem.nextSibling;
  }  
  
  var lis = menuObj.getElementsByTagName('A');
  for(var no=0;no<lis.length;no++){
   if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
   lis[no].onmouseout = initAutoHide;
   lis[no].onmousemove = stopAutoHide;
  }
    
  for(var no=0;no<mainMenuItemArray.length;no++){
   var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
   if(sub){
    mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
    var div = document.createElement('DIV');
    div.className='dhtmlgoodies_subMenu';
    document.body.appendChild(div);
    div.appendChild(sub);
    if(slideDirection=='right'){
     div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
    }else{
     div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
    }
    div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
    div.id = 'subMenuDiv' + (no+1);
    sub.id = 'submenuUl' + (no+1);
    sub.style.position = 'relative'; 

    if(navigator.userAgent.indexOf('Opera')>=0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
    }
    sub.style.left = 1 - sub.offsetWidth + 'px'; 
    
    
    
    if(browserVersion<7 && isMSIE)div.style.width = '1px'; 
     
    if(navigator.userAgent.indexOf('Opera')<0){
     submenuObjArray[no+1] = new Array();
     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
     submenuObjArray[no+1]['divObj'] = div;
     submenuObjArray[no+1]['ulObj'] = sub;
     submenuObjArray[no+1]['width'] = sub.offsetWidth;
     
     
     
     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
     if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
    } 

    if(!document.all)div.style.width = '1px';   
     
   }   
  }
  
  menuObj.style.visibility = 'visible';  
  window.onresize = resetPosition;
 }
 
 
 window.onload = initLeftMenu;

Ok, first let me explain what I try to do.

I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

So, here is the code I have so far:
Code:

<div id="topnav">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">Over Meves</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Historie</a></li>
                    <li><a href="#" class="suba">Onze mensen</a></li>
                    <li><a href="#" class="suba">Werkzijze</a></li>
                </ul>
            </li>
            <li>
                <a href="vervolg3.html">Disciplines</a>
                <ul class="submenu">
                    <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                    <li><a href="#" class="suba">Elektrotechniek</a></li>
                    <li><a href="#" class="suba">Sanitaire techniek</a></li>
                    <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                    <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                    <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Expertise</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                    <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                    <li><a href="#" class="suba">Milieu & Energie</a></li> 
                    <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                    <li><a href="#" class="suba">EPA & EPC</a></li> 
                    <li><a href="#" class="suba">Legionella beheersing</a></li>
                </ul>          	
            </li>
            <li>
                <a href="#">Contact</a>
                <ul class="submenu">
                    <li><a href="#" class="suba">Adres & route</a></li> 
                    <li><a href="#" class="suba">Werken bij</a></li>
                </ul>
            </li>
        </ul>
    </div>

The javascript:
Code:

<script type="text/javascript">
var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
	if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav > ul > li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $("ul.submenu > li > a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
	   $('a').each(function () {
		var currentURL = document.location.href;
		var thisURL = $(this).attr('href');
		if (currentURL = thisURL) {
			$(this).parents('ul.submenu').css('display', 'block');	
		}
	//	else {
		//	$(this).parents('ul.submenu').css('display', 'none');	
	//	}
	   }); 
});
</script>

And the css:
Code:

#topnav ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}
#topnav ul li 
{
	float: left;
	margin: 0;
	padding: 0;
}
#topnav ul li a
{
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
}
#topnav ul li a:link
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:visited
{
	color: #FFF;
	text-decoration: none;
}
#topnav ul li a:hover
{
	color: #FFF;
	text-decoration: underline;
}
#topnav ul li a.active
{
	text-decoration: underline;
	color: #FFF;
}
/*#topnav ul li:hover .submenu
{
	display:block;
}*/
#topnav ul li ul.submenu
{
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
}
#topnav ul li ul.submenu a
{
	display: inline;
	color: #00537F;
	padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
	border-right-width: 1px; 
	border-right-style: solid;
	border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
	border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
	color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
	color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu li.active
{
	text-decoration: underline;
	color: #00537F;
}
#topnav ul li ul.submenu a.active
{
	text-decoration: underline;
	color: #00537F;
}

Hope I explained it clear.

Thanks for any help.

I have a navigation menu with one level of submenu, and the code that I have allowes me when I click on the parent, the submenu opens (and remains open). When I click on a subitem, the page travels to that url, but the code that I have compares the document.location to the href of the menu items and display the submenu.
Now the active page is hightlighted, but the parent isn't (if the active page is a submenu).
So what I want is that when a subitem is active, also it's parent should be active, for example:

main_item_1
main_item_2
--sub_item_1
--sub_item_2

In this case when sub_item_2 is active, also main_item_2 should be.

I have tried to use parent(), parents(), but none worked the right way, or at least for me the way I want it.

So here is the code I use:
Code:

$('#topnav ul li ul.submenu li a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a').removeClass('active');
       $(this).addClass('active');
     }
   });
	   $('a').filter(function(){
			return this.href === document.location.href;
	   }).addClass('active')
	   $("ul.submenu > li > a").each(function () {
         var currentURL = decodeURIComponent(document.location.href);
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
	         $(this).parents("ul.submenu").css('display', 'block');
         }
       });
       $('#topnav > ul > li > a').each(function(){
      var currURL = decodeURIComponent(document.location.href);
	  var myHref= $(this).attr('href');
      if (currURL.match(myHref)) {
			$(this).addClass('active');
                        //$('a', $('.active').parents("li:last")).addClass('active');		                   
             	        $(this).parent().find("ul.submenu").css('display', 'block');
	  }
	});

The middle group code is for the subitem, so the code to make the parent also active should be there I think.

When I add the following line to the middle group (after the $(this).parents part):
Code:

$(this).parents("#topnav ul li").addClass('parent');

I am able to make the background of the top parent different, because the parent class changes the background color, but should also change the color of the menu text (parent), but .... not only the most top li has the parent class, also the li which is around the active subitem, which should only be the parent.

Please help.

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

Hello,

for some reason this code isnt showing anything:

Code:

<span id = "message" style="color:black; font-size:12pt; font-family:arial,verdana,sans-serif"></span>
<script type = "text/javascript">

var targetURL="#";
var countdownfrom = 10;
var currentsecond = countdownfrom +1;
function countredirect() {
if (currentsecond !=1 ){
currentsecond -=1;
var mess = "You will be redirected to Points2shop in " + currentsecond + " seconds.";
document.getElementById("message").innerHTML = mess;
}
else{
window.location=targetURL;
}
setTimeout("countredirect()",1000);
}

countredirect();

</script>

ive tried:

Code:

<form name="message">
<span id = "message" style="color:black; font-size:12pt; font-family:arial,verdana,sans-serif"></span>
</form>
<script type = "text/javascript">

var targetURL="#";
var countdownfrom = 10;
var currentsecond = countdownfrom +1;
function countredirect() {
if (currentsecond !=1 ){
currentsecond -=1;
var mess = "You will be redirected to Points2shop in " + currentsecond + " seconds.";
document.getElementById("message").innerHTML = mess;
}
else{
window.location=targetURL;
}
setTimeout("countredirect()",1000);
}

countredirect();

</script>

Anyone know why?

Thanks

I'm not sure if java is the best way to go with this, I'm pretty inexperienced with java, but I have a workable knowledge of html, and couldn't see a way to do it that way... so here goes:

For my job I work with a ton of different deadlines all the time. What I want to do is to make a webpage that displays the date N days ago, and N days into the future. So something like 7 days ago, 30 days ago, 60 days ago 75 days ago, 30 days from now, 60 days from now, 75 days from now. etc. I've found brief snippets for how to display today's date, but i'm having trouble with the calculations. Then I also need one that displays 18 years ago, I'm not sure if the change from days to years makes any kind of difference, but I suppose it's easy enough to convert years to days anyway....

How would I go about doing that?

Thank you!!!

Hi,

I am trying to display some xml elements that are formatted like this:

Code:

<line>
<route>
<dirs>1.	Head west on Calzada Roosevelt</dirs>
<time>4.6 km - about 15 mins</time>
<dirs>2.	Continue on Carretera Interamericana/Pan American Hwy</dirs>
<time>15 km - about 12 mins</time>
<dirs>3.	Look for turnoff at San Lucas and follow signs from there</dirs>
<time>13.5 km - about 15 mins</time>
</route>
</line>

using this js:

Code:

for (var a = 0; a < lines.length; a++) {
routeInfo = lines[a].getElementsByTagName("route");
               for (var p = 0; p < routeInfo.length; p++) {
                  var time = GXml.value(routeInfo[p].getElementsByTagName("time")[0]);
                  var dirs = GXml.value(routeInfo[p].getElementsByTagName("dirs")[0]);

    way+='<b>'+dirs+'</b>'+'<br>'+time+'<br>';

("way" eventually gets passed as the text to display)

Which works OK (as you can see here if you select from Guatemala City to Antigua), but the problem is that it only shows the first set of directions, ie
Code:

<dirs>1.	Head west on Calzada Roosevelt</dirs>
<time>4.6 km - about 15 mins</time>

I can see that this is because of the [0] in the getElementsByTagName - if I change it to 1 or 2 it shows the 2nd or 3rd set of directions. But I want it to show all of them... and I thought that being in a loop it would, but I'm obviously missing something. Any ideas? Thanks in advance.

I can't seem to get my innerHTML to display my content.

This works fine, if I was to put it all in one line.
Code:

document.getElementById('addedText').innerHTML =  '<table><tr><td>'+"My text goes here"+'</tr></td></table>';

If I was to break it up, which I wanted then nothing seem to show up.
Code:

   document.getElementById('addedText').innerHTML = '<table><tr><td>';
   document.getElementById('addedText').innerHTML = "My text goes here";
   document.getElementById('addedText').innerHTML = '</tr></td></table>';

Here's my code
Code:

<html>
<head>
<script type="text/javascript"> 
function display() {
   document.getElementById('addedText').innerHTML = '<table border=1><tr><td>';
   document.getElementById('addedText').innerHTML = "My text goes here";
   document.getElementById('addedText').innerHTML = '</tr></td></table>';
}
</script>
</head>

<body onload="display()">
<div id="addedText"></div>
</body>
</html>

thanks

I thought I knew how, but I'm unclear how to get this function to display: "document.getElementById("txtHint").innerHTML=xmlhttp.responseText;" inside the div. Will you show me please?

Code:

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      var div = document.createElement('div');
      div.setAttribute('id', 'txtHint');
      div.setAttribute("style","background-color:red;");
      div.style.width = '300px';
      div.style.height = '100px';
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      //var txt='hello world!';
      document.getElementsByTagName('body')[0].appendChild(div);
      document.getElementById('textHint').innerHTML=txt;
    }
  }

Hello all,

I need your help. I know what I'm trying to do, just having a difficult time getting started. I want to display the user-name of an individual when they login. I know how this can be doing using php, but what about javascript?

Ex:

username: __________
password: __________

After Login:

Welcome ['username']

I hope that makes sense.

Thanks in advance

Hi,
I've got this bit if JavaScript that loads a Flash applet. It also has a noscript tag in case the user has JavaScript turned off.
Works great in all browsers I've tried, but it doesn't work at all in IE8 (nor IE7 emulated). Even the noscript content isn't showing up.
W3C validator shows no issues.
No little exclamation point warning in IE's bottom-left corner.
I've even tried lowering the browser security with no change -- but that wouldn't have been a good solution if it had worked anyway; I can't tell my visitors to lower their browser security.

Any ideas of suggestions?
Thanks for any help!

You can see the page he
http://www.girlscoutsmoheartland.org/test/vcattest.html
If you look at the source, that's all there is to it. No undisplayed server-side scripting.
And here's the code if you don't want to visit the page:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.myvirtualpaper.com/js/miniflipper.js"></script>
</head>
 
<body>
Below this line should be either a Flash applet, or a link if JavaScript is unavailable:<br>
<noscript><a href="http://www.myvirtualpaper.com/doc/gs_missouri_heartland/girlscout2010catalog/">Click here to view all pages.</a></noscript>
<script type="text/javascript"> 
                var miniFlipperOptions = {'uid' : 'bfbe7aa59d'};
                MVP_printMiniflipper(miniFlipperOptions);
</script>
<br>
Above this line should be the mentioned item option.
</body>
</html>

I am creating a script to display some variable but it won't work. Did I do something wrong?

Code:

<script type="text/javascript">
/* <![CDATA[ */


var yotta = le24;
var zetta = le21;

document.write("<table border='1' width='100%'><tr><th>Prefix</th><th>Decimal Equivalent</th></tr>");
document.write("<tr><td>Yotta</td><td>" + yotta + "</td></tr>");
document.write("<tr><td>Zetta</td><td>" + zetta + "</td></tr>");
document.write("</table>");


/* ]]> */

</script>

Everything looks right, I think. Anyone see something wrong?

Thank you, I am a firefighter of 25 years.

I wrote a function (shown below) that is to take numbers from <div> tags add them up and display the value in a different <div> tag. It also prints the total in a hidden input tag to be sent when submitted.

All was working fine until today I noticed that the total was no longer showing up in either the <div> tag or the hidden input tag.

on change of any of the select menus correctly displays the expected value in its corresponding <div> tag

I have no Idea what might be causing this, so I need fresh eyes.
(My JavaScript skills are way below my php skills, I can't see anything wrong with what I have)

PHP Code:
// I am using a php function that spits out these 
// (one for each item listed in the  JS function:
<select name="body" onchange="document.getElementById('total_body').innerHTML = this.options[this.selectedIndex].getAttribute('cost_body');calcTotal();" id="frm">
    <option value="2" cost_body="0">2</option>
    <option value="3" cost_body="10">3</option>
    <option value="4" cost_body="20">4</option>
    <option value="5" cost_body="30">5</option>
    <option value="6" cost_body="40">6</option>
    <option value="7" cost_body="65">7</option>
</select>

//Which displays in:
<div id="total_body">0</div>

//AND Calls this JavaScript Function:

<script type="text/javascript"> 
function calcTotal(){
    var numVal1=parseInt(document.getElementById("total_body").innerHTML);
    var numVal2=parseInt(document.getElementById("total_agility").innerHTML);
    var numVal3=parseInt(document.getElementById("total_reaction").innerHTML);
    var numVal4=parseInt(document.getElementById("total_strength").innerHTML);
    var numVal5=parseInt(document.getElementById("total_charisma").innerHTML);
    var numVal6=parseInt(document.getElementById("total_intuition").innerHTML);
    var numVal7=parseInt(document.getElementById("total_logic").innerHTML);
    var numVal8=parseInt(document.getElementById("total_willpower").innerHTML);
    var numVal9=parseInt(document.getElementById("total_edge").innerHTML);
    var numVal10=parseInt(document.getElementById("total_magic").innerHTML);

    var totalValue = numVal1 + numVal2 + numVal3 + numVal4 + numVal5 + numVal6 + numVal7 + numVal8 + numVal9 + numVal10;

    document.getElementById("grand_total").innerHTML = totalValue;
    document.getElementById("point_total").value = totalValue;
}
</script>

//Which until today had been displaying in:
<div align="center" id="grand_total">0</div>

//AND 
<input type="hidden" name="point_total" value="" id="point_total"> 


Here is a page that shows what it is (not) doing. http://rpg.5150press.com/test.php

I am having a problem with my homework displaying an iframe using JavaScript.
My homework states:

Insert a script element that does the following:

part a. Insert the following multiline comment:
Display the daily schedule in an inline frame. Daily schedules are stored in the files
sunday.html through saturday.htm.

part b.
Insert a command to write the HTML code
<iframe src="weekday.htm'></iframe>

to the Web page, where weekday is the text string returned by the weekDay() function.

What I have so far:
<script type= "text/javascript">
/* Display part a */

document.write("<iframe src='weekday.htm'></iframe">;
</script>

My Question:
How do I display weekday.htm within my script on a specific day using the function weekDay() function.

below is my weekDay() function:
function weekDay(){
thisDate = new Date();
var thisWDay=thisDate.getDay();
var wdName = new Array("sunday", "monday", "tuesday", "wednesday",
"thursday", "friday", "saturday");
return wdName[thisWDay];
}