Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Links not working in dynamically generated menu

    I'm creating what should be a very simple popup menu script for a client, using a visibility switch on an existing div and writing the content to the div from a selected string, so the client can enter menu parameters easily. The menus are generating and positioning correctly, but the links generated aren't functioning properly. More details on what it's doing below.

    Here's the navigation.js file:

    Code:
    var onImg;
    var imgID, pic, loc;
    var toppos, leftpos, active, offpic;
    var menu_content='';
    
    function goTo(loc){
    	document.location=loc;
    }
    
    function show(toppos,leftpos,active,imgID,pic,offpic){
    	var active_menu=eval('menu'+active);
    	var active_labels=eval('labels'+active);
    	menu=(active_menu.split(","));
    	labels=(active_labels.split(","));
    	menu_content="<div onMouseOver=\"show('"+toppos+"','"+leftpos+"','"+active+"','"+imgID+"','"+pic+"');\" onMouseOut=\"hide('"+imgID+"','"+offpic+"');\">";
    	menu_content+='<table cellpadding=0 cellspacing=0 border=0 style="border-collapse:collapse;" class="menu">';
    	for (i in menu){
    		menu_content+='<tr><td class="choice">';
    		menu_content+='<a href="'+menu[i]+'" onClick="goTo(\''+menu[i]+'\'); return false;" class="choice">'+labels[i]+'</a><br>';
    		menu_content+='</td></tr>';
    	}
    	menu_content+='</table></div>';
    	
    //	document.write(menu_content);
    
    	document.getElementById('a_menu').style.top=toppos+'px';
    	document.getElementById('a_menu').style.left=leftpos+'px';
    	document.getElementById('a_menu').innerHTML=menu_content;
    	document.getElementById('a_menu').style.visibility='visible';
    	document.getElementById(imgID).src='assets/'+pic;
    	menu_content = '';
    }
    
    function hide(imgID,pic){
    		document.getElementById('a_menu').style.visibility='hidden';	
    		document.getElementById(imgID).src='assets/'+pic;
    }
    The menu strings are input by the client in another js file:

    Code:
    <!--
    
    menu1='mouth.htm,nose.htm,ear.htm';
    labels1='MOUTH,NOSE,EAR';
    
    menu2='cervical_spine.htm,throat.htm';
    labels2='SPINE,THROAT';
    
    //-->
    And here's the CSS for the layers:

    Code:
    .menu {
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    background-color:#555555;
    border-left:#777777 1px solid;
    border-top:#777777 1px solid;
    border-right:#777777 1px solid;
    border-bottom:#777777 1px solid;
    text-align:center;
    padding:0;
    width:100;
    line-height:13px;
    }
    .choice {
    width:100%;
    border-bottom:#777777 1px solid;
    border-right:#777777 1px solid
    }
    a {
    font-family:Arial,Helvetica,sans-serif;
    color:#0000FF;
    background-color:#FFFFFF;
    text-decoration:none
    }
    a:visited {
    font-family:Arial,Helvetica,sans-serif;
    color:#0000FF;
    background-color:#FFFFFF
    }
    a:hover {
    font-family:Arial,Helvetica,sans-serif;
    color:#FF0000;
    background-color:#FFFFFF
    }
    #a_menu {
    	visibility:hidden;
    	position:absolute;
    	background-color:#FFF;
    }
    There are 2 problems actually occurring. The links in the menus don't operate as they should, although I've used the document.write you can see commented out to validate the HTML code in the menus and it's fine. Clicking on a link, however, only flashes the link in the status bar and doesn't go anywhere. Oddly enough, right-clicking on a link and selecting the options from the menu does work.

    The second problem is that the mouseout from a menu should hide the menu and perform an image swap, which works correctly on the page menus, but not on the generated menus.

    The test page for this is online at http://patientpal.com/test.htm and only the HEAD and NECK menus are active at this time. Note that the menus and image rollover effects work from both the sidebar menu and the illustration.

    I'm a PHP and Perl programer, with a little bit of JavaScript exeperience, so I'm probably missing something obvious here. Any help will be greatly appreciated.

    Thanks,
    Doc
    Last edited by doccee; 01-27-2006 at 10:24 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    why do you have an onclick with location and an href? why not just the href?

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The onClick was added to see if it would work while the href wasn't. It does the same thing without it.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,516
    Thanks
    3
    Thanked 505 Times in 492 Posts
    being blunt this script is awfull

    but
    Code:
    function goTo(loc){
    alert(loc);
    //	document.location=loc;
    }
    
    function show(toppos,leftpos,active,imgID,pic,offpic){
    	var active_menu=eval('menu'+active);
    	var active_labels=eval('labels'+active);
    	menu=(active_menu.split(","));
    	labels=(active_labels.split(","));
    	menu_content="<div onmouseover=\"clearTimeout(TO);\" onmouseout=\"hide();\">";
    	menu_content+='<table cellpadding=0 cellspacing=0 border=0 style="border-collapse:collapse;" class="menu">';
    	for (i in menu){
    		menu_content+='<tr onClick="goTo(\''+menu[i]+'\');"><td class="choice">';
    		menu_content+='<a class="choice">'+labels[i]+'</a><br>';
    		menu_content+='</td></tr>';
    	}
    	menu_content+='</table></div>';
    
    //	document.write(menu_content);
        var mmmm=document.getElementById('a_menu')
    	mmmm.style.top=toppos+'px';
    	mmmm.style.left=leftpos+'px';
    	mmmm.innerHTML=menu_content;
    	mmmm.style.visibility='visible';
    	document.getElementById(imgID).src='assets/'+pic;
    	menu_content = '';
    }
    
    var TO;
    function hide(imgID,pic){
    	   TO=setTimeout('document.getElementById(\'a_menu\').style.visibility=\'hidden\';',200);
    if(imgID){
    		document.getElementById(imgID).src='assets/'+pic;
    }
    }
    there are many tooltip scripts available, google and have a look at some of those
    or have a look at my site and search for tooltip


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •