Problem in creating menus using javascript


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Problem in creating menus using javascript

  1. #1
    Join Date
    Apr 2005
    Posts
    15

    Problem in creating menus using javascript

    Hi,

    I am trying to make menus using javascript.

    But its not working properly .

    When i am executing it in the browser it gives the foloowing error when calling methods like this:

    mnuSamples.position(0,(aWidth/2),100);
    mnuSamples.write();.....

    I m not able to understand this behaviour.So kindly help me find out the bug in my code..

    Below is the code.

    Code:
    <HTML>
    <HEAD>
    
    <TITLE> Classy Menus </TITLE>
    
    <style>
    .menu a{
    	color: white;
    	text-decoration: none;
    }
    .menu a:hover{
    	color: yellow;
    }
    .menuBar{
    	background-color: rgb(50,50,130);
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 15;
    	z-index: 1;
    	padding: 4px;
    }
    .menuTrigger{
    	font: 10pt Verdana, sans-serif;
    	color: white;
    	background-color: rgb(50,50,130);
    	position: absolute;
    	top: 0;
    	padding: 4px;
    	width: 100;
    	height: 15;
    	z-index: 2;
    	cursor: pointer;
    	cursor: hand;
    }
    .menu{
    	font: 8pt Verdana, sans-serif;
    	color: white;
    	background-color: rgb(50,50,130);
    	position: absolute;
    	top: 23;
    	padding: 4px;
    	width: 100;
    	visibility: hidden;
    	z-index: 2;
    }
    </style>
    
    <script LANGUAGE="JavaScript">
    
    var mnuSelected = '';
    
    function menuItem(text, link)
    {
          this.text = text;
          this.link = link;
    }
    
    function menuTrigger(name, text)
    {
          this.name = name;
          this.text = text;
    }
    
    function menu()
    {
          var itemArray = new Array();
          var args = menu.arguments;
          this.name = args[0];
          this.trigger = args[1];
          for(i=2; i<args.length; i++){
             itemArray[i-2] = args[i];
          }
          this.menuItems = itemArray;
          this.write = writeMenu;
          this.position = positionMenu;
       }
    
     function positionMenu(top,left,width){
          this.top = top;
          this.left = left;
          this.width = width;
       }
    
    function writeMenu(){
          var menuText = '<div id="';
          menuText += this.trigger.name;
          menuText += '" class="trigger" style="top: ';
          menuText += this.top;
          menuText += '; left: ';
          menuText += this.left;
          menuText += ';"';
          menuText += 'onMouseOver="showMenu(\'';
          menuText += this.name;
          menuText += '\')" 
          onMouseOut="hideMenu(mnuSelected)">';
          menuText += '<table border="0" width="' + 
             this.width + '">';
          menuText += '<tr><th>' + this.trigger.text + 
             '</th></tr></table></div>';
          menuText += '<div id="';
          menuText += this.name;
          menuText += '" class="menu" style="top: ';
          menuText += (this.top+23);
          menuText += ';left: ';
          menuText += this.left;
          menuText += ';" ';
          menuText += 'onMouseOver="showMenu(mnuSelected)" ';
          menuText += 'onMouseOut="hideMenu(mnuSelected)">';
          menuText += '<table border="0" width="' + 
            this.width + '">';
          for(i=0; i<this.menuItems.length; i++){
             menuText += '<tr>';
             menuText += '<td 
            onMouseOver="this.style.backgroundColor = \'red\'" 
            onMouseOut="this.style.backgroundColor = \'\'">';
             menuText += '<a href="' + this.menuItems[i].link + '">';
             menuText += this.menuItems[i].text + '</a></td>';
             menuText += '</tr>';
          }
          menuText += '</table></div>';
          document.write(menuText);
          
       }
    
    
       function showMenu(menu){
          hideMenu(mnuSelected);
          document.getElementById(menu).style.visibility = 'visible';
          mnuSelected = menu;
       }
       function hideMenu(menu){
          if(mnuSelected!='')
             document.getElementById(menu).style.visibility = 'hidden';
       }
    
    </script>
    </HEAD>
    
    <BODY>
    
    	<div id = "menuBar" class = "menuBar"> </div>
    	
    	<script type = "text/javascript">
    	
    		if(document.all)
    		{
    			 aWidth = document.body.clientWidth;
    			 document.getElementById('menuBar').style.width = aWidth;
    		}
    		else
    		{
    			 aWidth = innerWidth;
    			 document.getElementById('menuBar').style.width = aWidth-8;
    		}  
    
    		
    		var mnuAbout = new menu('mnuAbout',	new menuTrigger('trgAbout','About me'), new menuItem('About1','#'),	new menuItem('About2','#'),	new menuItem('About3','#'));	
    		mnuAbout.position(0,(aWidth/2-200),100);
    		mnuAbout.write();
    
    		var mnuServices = new menu('mnuServices',new menuTrigger('trgServices','Services'),new menuItem('Services1','#'),new menuItem('Services2','#'),new menuItem('Services3','#'));
    	      mnuServices.position(0,(aWidth/2-100),100);
    		  mnuServices.write();
       
          var mnuSamples = new menu('mnuSamples',new menuTrigger('trgSamples','Samples'),new menuItem('Samples1','#'),new menuItem('Samples2','#'),new menuItem('Samples3','#'));
          mnuSamples.position(0,(aWidth/2),100);
          mnuSamples.write();
    
    	
    	</script>
    
    </BODY>
    </HTML>

    Thanks ,
    Jignesh

  2. #2
    Join Date
    Dec 2004
    Posts
    717
    There are many double quotes("") included in your JavaScripts.
    Remove those double quotes..

    Here is some fixes.. But I have no times to do more. You will get errors on mouseover or mouseout.

    <html>

    <head>
    <base href="file:///C:/classy_menus.htm">
    <title>Classy Menus</title>
    <style>
    .menu a{
    color: white;
    text-decoration: none;
    }
    .menu a:hover{
    color: yellow;
    }
    .menuBar{
    background-color: rgb(50,50,130);
    position: absolute;
    top: 0;
    left: 0;
    height: 15;
    z-index: 1;
    padding: 4px;
    }
    .menuTrigger{
    font: 10pt Verdana, sans-serif;
    color: white;
    background-color: rgb(50,50,130);
    position: absolute;
    top: 0;
    padding: 4px;
    width: 100;
    height: 15;
    z-index: 2;
    cursor: pointer;
    cursor: hand;
    }
    .menu{
    font: 8pt Verdana, sans-serif;
    color: white;
    background-color: rgb(50,50,130);
    position: absolute;
    top: 23;
    padding: 4px;
    width: 100;
    visibility: hidden;
    z-index: 2;
    }
    </style>

    <script LANGUAGE="JavaScript">

    var mnuSelected = '';

    function menuItem(text, link)
    {
    this.text = text;
    this.link = link;
    }

    function menuTrigger(name, text)
    {
    this.name = name;
    this.text = text;
    }

    function menu()
    {
    var itemArray = new Array();
    var args = menu.arguments;
    this.name = args[0];
    this.trigger = args[1];
    for(i=2; i<args.length; i++){
    itemArray[i-2] = args[i];
    }
    this.menuItems = itemArray;
    this.write = writeMenu;
    this.position = positionMenu;
    }

    function positionMenu(top,left,width){
    this.top = top;
    this.left = left;
    this.width = width;
    }

    function writeMenu(){


    var menuText = '<div id=';
    menuText += this.trigger.name;
    menuText += ' class=trigger style=\'top: ';
    menuText += this.top;
    menuText += '; left: ';
    menuText += this.left;
    menuText += '\'';
    menuText += ' onMouseOver=showMenu(\'';
    menuText += this.name;
    menuText += '\') onMouseOut=hideMenu(\'' + mnuSelected + '\')';
    menuText += ' >';
    menuText += '<table border=0 width=' + this.width + '>';
    menuText += '<tr><th>' + this.trigger.text + '</th></tr></table>';



    menuText += '<div id=';
    menuText += this.name;
    menuText += ' class=menu style=\'top: ';
    menuText += (this.top+23);
    menuText += ';left: ';
    menuText += this.left;
    menuText += ';\' ';
    //menuText += 'onMouseOver=showMenu(\'' + mnuSelected + '\') ';
    //menuText += 'onMouseOut=hideMenu(\'' + mnuSelected + '\')
    menuText += '>';

    menuText += '<table border=0 width=' + this.width + '>';



    for(i=0; i<this.menuItems.length; i++){
    menuText += '<tr>';
    menuText += '<td onMouseOver=\'this.style.backgroundColor = red\' onMouseOut=\'this.style.backgroundColor = blue\'>'; menuText += '<a href=' + this.menuItems[i].link + '>';
    menuText += this.menuItems[i].text + '</a></td>';
    menuText += '</tr>';
    }
    menuText += '</table>';



    menuText += '</div>';

    //alert(menuText);

    document.write(menuText);

    }


    function showMenu(menu){
    hideMenu(mnuSelected);
    //alert(mnuSelected);

    document.getElementById(menu).style.visibility = 'visible';
    mnuSelected = menu;
    }
    function hideMenu(menu){
    if(mnuSelected!='')
    document.getElementById(menu).style.visibility = 'hidden';
    }

    </script>
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    </head>

    <body>

    <div id="menuBar" class="menuBar">
    </div>

    <script type = "text/javascript">

    if(document.all)
    {
    aWidth = document.body.clientWidth;
    document.getElementById('menuBar').style.width = aWidth;
    }
    else
    {
    aWidth = innerWidth;
    document.getElementById('menuBar').style.width = aWidth-8;
    }


    var mnuAbout = new menu('mnuAbout', new menuTrigger('trgAbout','About me'), new menuItem('About1','#'), new menuItem('About2','#'), new menuItem('About3','#'));
    mnuAbout.position (0,(aWidth/2-200),100);
    mnuAbout.write();


    var mnuServices = new menu('mnuServices',new menuTrigger('trgServices','Services'),new menuItem('Services1','#'),new menuItem('Services2','#'),new menuItem('Services3','#'));
    mnuServices.position (0,(aWidth/2-100),100);
    mnuServices.write();


    var mnuSamples = new menu('mnuSamples',new menuTrigger('trgSamples','Samples'),new menuItem('Samples1','#'),new menuItem('Samples2','#'),new menuItem('Samples3','#'));
    mnuSamples.position (0,(aWidth/2),100);
    mnuSamples.write();


    </script>

    </body>

    </html>
    You should use Alert('') syntax to debug JavaScripts coding.
    Actually, There are a lot of JavaScript coding for menu and menu generators. :-)
    Best Regards,
    Michael Sync
    http://michaelsync.net

    The more you share,The more you get

Similar Threads

  1. Problem in javascript
    By fakeeyed in forum Java
    Replies: 6
    Last Post: 07-02-2006, 04:04 PM
  2. Replies: 1
    Last Post: 03-01-2001, 03:23 AM
  3. nested javascript menus
    By lposeidon in forum Architecture and Design
    Replies: 0
    Last Post: 02-21-2001, 10:36 AM
  4. Replies: 0
    Last Post: 10-03-2000, 04:57 PM
  5. InsertRow Problem under Javascript
    By Peacemaker in forum Java
    Replies: 0
    Last Post: 07-06-2000, 11:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center