JavaScript - Html Menu Using Js Menu Appears On Top Of Loading Screen

This is a class assignment and I can't get it to run. I can't figure out what's wrong. This is most of the script. One part isn't finished yet, but I was still expecting functionality to test.

I need to have it load in IE but I can't get it to. Nothing shows up.
In Firefox I get the right look but when I click "Run" I don't get a prompt at all.

It's not very long.

var finalCost;
var originalPrice;
var markedPrice;
var delivery;
var tradeIn;
var deliveryCharge;
var tradeCredit;
var discountedPrice;

function driverModule_click() // <<< DO NOT CHANGE THIS LINE
{ // <<< DO NOT CHANGE THIS LINE

//==================================================================================================
// Module Name: <--- Enter the driver module name from your logic solution.
//==================================================================================================

//==================================================================================================
// Place your code here
//==================================================================================================
markedPrice = Number( prompt("Please enter the marked price of the bed.", "") );
delivery = prompt("Does the customer need the new bed delivered (Y or N)?", "");
tradeIn = prompt("Does the customer have a trade in (Y or N)?", "");

if(markedPrice > 100) {
discountedPrice = markedPrice * .15;
} else if(finalScore > 90) {
discountedPrice = markedPrice * .14;
}

if(delivery == "Y" || delivery == "y") {
deliveryCharge = 20;
} else {
deliveryCharge = 0;
}

if(tradeIn == "Y" || hasExtraCredit == "y") {
tradeCredit = 5;
} else {
tradeCredit = 0;
}

finalCost = discountedPrice + deliveryCharge - tradeCredit;

labelout.value = labelout.value + "The cost to you for the bed is " + finalCost + "\n";
labelout.value = labelout.value + "The original price was " + markedPrice + "\n";

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

I have the div box

Code:

<div id="ajax_loader"><center><img src="/css/ajax-loader.gif"  alt=""/></center></div>

Quote:
#filter
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height: 900px;;
overflow:visible;
background-color:#000;
z-index:900000;
opacity:0.5;
filter: alpha(opacity=50);
}




#ajax_loader{

display: none;
position: absolute;
top: 50%;
left: 50%;

z-index:900001;
overflow: visible;
height:40px;
width:60px;
background-color:white;

vertical-align:middle;
padding-top:10px;
border:1px solid black;
}


The problem when the page loads then my content height is around 2000px.
So the animations loads on the center of screen but on the upper portion of page which is visible when the page loads.


bUt my submit button is at the bottom of page so when i click submit the ani,atiosn stays at the top .


I want the animation to load on the screen which is currently visible not which is at the startup

I'm creating a menu using html, css and a javascript, I found a tutorial to follow online. What I am trying to achieve is when the mouse hovers over the menu items, each item will have a different colour background. the problem is that i can do this but it only works with one colour and not different colours.

this is the html:

Code:

<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
  <ul>
    <li><a href="2-1.php">Cani</a>
        <ul>
          <li><a href="2-1-1.php">Domestic dogs</a></li>
          <li><a href="2-1-2.php">Wolves</a></li>
        </ul>
    </li>
    <li><a href="2-2.php">Felidae</a>
        <ul>
          <li><a href="2-2-1.php">Domestic cats</a></li>
          <li><a href="2-2-2.php">Wild cats</a></li>
        </ul>
    </li>
  </ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>

the css is as follows:

Code:

div#s1 {
width: 200px;          /* menu width */
}

div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0;             /* no padding */
margin:0;              /* no margin for IE either */
}

div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}

div#s1 ul li a {
display: block;         /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px;           /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
margin-left: 20px;     /* indent level 1 */
}

div#s1 ul ul ul li a {
margin-left: 40px;     /* indent level 2 */
}

div#s1 ul ul ul ul li a {
margin-left: 60px;     /* indent level 3 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
display: none;         /* collapse */
}

div#s1 li.open ul {
display: block;        /* expand */
}

div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}

div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}

div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}

div#s1 li.active a {
background-position: 0px -20px;
color: red;            /* highlight text */
}

div#s1 li.active li a {
background-position: 0px 0px;
color: white;          /* fix lower levels */
}

div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}

and finally the javascript:

Code:

var menu_active_class = "active";
var menu_leaf_class = "leaf";
var menu_open_class = "open";
var menu_closed_class = "closed";

//the default page that is displayed if URL ends in /
var menu_default_page = "index.php";
var menu_url;

//main function
//menu_id : id of the element containing the navigation
function menu_main(menu_id) {
 var url = location.href;
 if (url.lastIndexOf("/") == (url.length-1)) {
   url = url+menu_default_page;
 }
 if (url.lastIndexOf("?") >= 0) {
   url = url.substring(0, url.lastIndexOf("?"));
 }
 if (url.lastIndexOf("#") >= 0) {
   url = url.substring(0, url.lastIndexOf("#"));
 }
 menu_url = url;

 var main = document.getElementById(menu_id);
 if (!main) alert("No element with id '"+ menu_id +"' found");
 menu_traverse(main);
 }

 /* Walks down the subtree and on the way back
 sets properties.
 returns bit set
         1: set = element is a node, unset = element is a leaf
         2: set = element contains the active node
         4: set = element is the active A node
*/
function menu_traverse(element) {
var props  = 0;

// walk down
for (var i=0; i<element.childNodes.length; i++) {
  var child = element.childNodes[i];
  props |= menu_traverse(child); // aggregate bits
}

// on the way back now
switch (element.tagName) {
  case "UL":
    props |= 1;
    break;

  case "LI":
    var c1 = (props & 1) ? 
               ((props & (2|4)) ? menu_open_class : menu_closed_class)
             : menu_leaf_class; 
    element.className = element.className ? element.className+" "+c1 : c1;
    if (props & 4) {
      if (!(props & 2)) element.className += " "+menu_active_class;
      props |= 2;
      props &= 1 | 2; // reset bit 4
    }
    break;

  case "A":
    if (props & 2) break; // once is enough
    var href = element.getAttribute("href");
    if (menu_isSameUrl(menu_url, href)) props |= 4;
    break;
  }

  return props;
}

//matches two URIs when href is the last part of url
//.. and . are correctly resolved
function menu_isSameUrl(url, href) {
var a = url.split(/[?\/]/i);
var b = href.split(/[?\/]/i);
var i = a.length - 1;
var j = b.length - 1;
while ((i >= 0) && (j >= 0)) {
  if (b[j] == "..") { j-=2; continue; }
  if (a[i] == "..") { i-=2; continue; }
  if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  if (! (a[i] == b[j])) return false;
  i--;
  j--;
 }
 return true;
}

New to this forum but hope this will explain my problem, any help is much appreciated!

thanks!!

Jesper

Hi,

I am an asp.net developer and I wanted to display user popup (kind of) which freezes the screen so that user won't click anything else on the screen. There are some predefined controls in asp.net, but I wanted do this using Javascript.

Where can I find a sample with code?

Thanks

I am having trouble with a sub-menu of the 1st item only and can not seem to figure it out. All the others are fine. Any help is appreciated. Here is the code:

var NoOffFirstLineMenus=7; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='black'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='black'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="arial,comic sans ms,technical" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='center'; // Item text position 'left', 'center' or 'right'
var MenuCentered='center'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=05; // Menu offset x coordinate
var StartLeft=05; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}


// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);
// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"

Menu1=new Array("Home","","",3);
Menu1_1=new Array("The Ayllu","The Ayllu.htm","",0,20,150);
Menu1_2=new Array("Acknow","Acknowledgement.htm","",0);
Menu1_3=new Array("Prayer","Prayer.htm","",0);

Menu2=new Array("About Us","","",4);
Menu2_1=new Array("Debra","bio.htm","",0,20,150);
Menu2_2=new Array("Seamus","Seamus.htm","",0);
Menu2_3=new Array("Locations","location.htm","",0);
Menu2_4=new Array("Contact Us","contact.htm","",0);

Menu3=new Array("Services","","",7);
Menu3_1=new Array("Shamanic Healing","http://www.Ayllu.us/Shamanic Healing.htm","",0,20,150);
Menu3_2=new Array("Shamanic Counseling","http://www.Ayllu.us/Shamanic Counseling.htm","",0);
Menu3_3=new Array("Sacred Ceremonies","http://www.Ayllu.us/Sacred Ceremonies.htm","",0);
Menu3_4=new Array("Sacred Body Work","http://www.Ayllu.us/sbw.htm","",0);
Menu3_5=new Array("Full Moon Crystal Bowl","http://www.Ayllu.us/fm.htm","",0);
Menu3_6=new Array("Sound Healing","http://www.Ayllu.us/Sound Healing.htm","",0);
Menu3_7=new Array("LaHo-Chi","http://www.Ayllu.us/lahochi.htm","",0);

Menu4=new Array("Calendar","http://www.ayllu.us/calendar.htm","",0);

Menu5=new Array("Gallery","http://www.ayllu.us/gallery.html","",0);

Menu6=new Array("Articles","","",3);
Menu6_1=new Array("Test 1","http://www.Ayllu.us/blank.htm","",0,20,150);
Menu6_2=new Array("Test 2","http://www.Ayllu.us/blank.htm","",0);
Menu6_3=new Array("Test 3","http://www.Ayllu.us/blank.htm","",0);

Menu7=new Array("Links","http://www.ayllu.us/links.htm","",0);

Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work.
Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/)
To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now).

Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left.

Thanks for any help

I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it.

Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below).

<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br />
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br />
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>

</html>

So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it.

? how would i make it for a menu so you could press it and it would go down to click on a link.

Hello,

I'm trying to populate an HTML drop down list with data from an XML file but have failed miserably so far using examples I've found. Please help.

Thanks,

Richard

Not sure how easy this is, but I would like to have 4 checkboxes that effect the items shown in a drop down menu.

For example:
[x] School #1
[x] School #2
[ ] School #3

The drop down (select) box will only show the majors that are offered at the checked schools. I know this involves either hiding or showing the certain elements of the drop down menu, but I'm not well versed in JS.

Thanks in advance.

Hello! My first (but surely not last) post on this forum.

I made a drop box menu and I want to activate specific javascript functions when they are selected. I think this should be fairly easy to solve. I am very new at HTML and Javascript btw.

This is what I tried:

if (document.getElementById("selectense").value="present"){
document.getElementById("present").style.visibility="visible";
}


<span class="tensebox">
<select id="selectense">
<option onclick="showPresent()">Present</option>
<option onclick="showPC()">Present</option>
</select></span>



(and I have some text with the ID "present)

Hi there,

I am trying to create "sideways" sub menus off of my main vertical menu images.
(Something like this example: http://netweblogic.com/demos/ddm/vddm-nomoo.htm
but in the place of Menu Item 1, Menu Item 2, Menu Item 3 there would be roll over images.)

The main vertical menu items I have are rollover images.
I would like the sub menu to appear when you hover over the main menu item.

When I attempt this using the above example, all of my other CSS and JS does not work.

Any help on how to link my rollover menu images to the sub menu would be greatly appreciated! Thanks in advance!

Here is the code for my menu (I have only included 2 menu items here, if you need more info please let me know):


Code:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/buttons/teamandcorpsports.jpg','images/buttons/performancesports.jpg','images/buttons/flagsandbanners.jpg','images/buttons/home.jpg','images/buttons/catalogues.jpg','images/buttons/galleries.jpg','images/buttons/designown.jpg','images/buttons/dealerlogin.jpg','images/buttons/contactus.jpg','images/buttons/dealersignup.jpg')">

<div id="wrapper">
<div id="header">
<h1>&nbsp;</h1>
</div>


<!-- Main content -->
<div id="content">
<div style="text-align:center">
       <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" />
   </div>

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




<!-- Site navigation menu -->
<div id="navcontainer">
<ul>
<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('teamandcorpsports1','','images/buttons/teamandcorpsports.jpg',1)"><img src="images/buttons/teamandcorpsports1.jpg" alt="Team and Corporate Sports" name="teamandcorpsports1" width="224" height="37" border="0" id="teamandcorpsports1" /></a></li>

<li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('performancesports1','','images/buttons/performancesports.jpg',1)"><img src="images/buttons/performancesports1.jpg" alt="Performance Sports" name="performancesports1" width="224" height="37" border="0" id="performancesports1" /></a></li>

Here is my CSS code for the menu, not sure if this is where the issue is?

Code:

/* navigation menu */
#navcontainer ul {
margin: 0;
padding: 0; 
list-style-type: none; /* removes bullets */
background-image:url('background.jpg');
}

#navcontainer li {
margin: 0 0 0 0; /* separates list items */
}

#navcontainer a
{
display: block; /* achieves rollover */

width: 250px; /* list width */

text-decoration: none;

}

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!


Thank you for any help and/or advice in advance,
Best Regards,
Tim