Instantiation problem ( I think) with dynamic menu

[doccee2006]

I'm creating a very simple popup menu for a client's page. The menus are written into an existing <div> and the positioning and visibility are switched with the js functions. The menus are being created correctly, but the hrefs won't work directly, although I've used a document.write to verify and validate the code within the menu, and right-clicking on a link and selecting open link will work. Also, the MouseOver on the menu will keep it in place, but the MouseOut doesn't hide it. MouseOver and MouseOut work correctly on the other areas of the page. I don't know if this is a z-index problem, or a DOM issue. Any help will be appreciated. Here's the info:

Test page is online at:

http://patientpal.com/test.htm

(only 2 menus are active right now, head and neck and they work from the illustration or the sidebar.)

Here's the js file:

var onImg;
var imgID, pic;
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+'" onClick="goTo(\''+labels+'\');" class="choice">'+labels+'</a><br>';
menu_content+='</td></tr>';
}
menu_content+='</table></a>';

// 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 strings for the menu content are sent in a separate js file so the client can edit easily:

<!--

menu1='mouth.htm,nose.htm,ear.htm';
labels1='MOUTH,NOSE,EAR';

menu2='cervical_spine.htm,throat.htm';
labels2='SPINE,THROAT';

//-->

Here's the stylesheet for the menus:

.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;
}


Hopefully that will be enough information. Thanks in advance!

Doc

 

[BabyJeffy]

Maybe it's just this that needs to be changed:

function goTo(loc){
    document.location=loc;
}

But I think this is also incorrect:

menu_content+='<a href="'+menu[i]+'" onClick="goTo(\''+[b]menu[/b][i]+'\');" class="choice">'+labels[i]+'</a><br>';

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[doccee2006]

Jeff:

Thanks for your comments, but the problem still isn't solved.

You're right, of course, about the quotes in The goTo function, and my including an element from the wrong array in the call to the goTo function. This function was simply added as a test, since the hrefs alone aren't working.

I've also corrected line 23 to write </div> instead of </a>. (I've tried both and forgot to rest that the last time.)

Now withthe changes made, here's a document.write of the menu's HTML content:

<div onMouseOver="show('65','250','1','head_illus','head_illus_over.gif');" onMouseOut="hide('head_illus','head_illus.gif');"><table cellpadding=0 cellspacing=0 border=0 style="border-collapse:collapse;" class="menu"><tr><td class="choice"><a href="mouth.htm" onClick="goTo('mouth.htm');" class="choice">MOUTH</a><br></td></tr><tr><td class="choice"><a href="nose.htm" onClick="goTo('nose.htm');" class="choice">NOSE</a><br></td></tr><tr><td class="choice"><a href="ear.htm" onClick="goTo('ear.htm');" class="choice">EAR</a><br></td></tr></table></div>

This validates correctly, and it appears it should work, but the links simply don't do anything unless you right click on them.

Any other ideas? Thanks again.

 

[BabyJeffy]

Try putting a return false; after the call to goTo() in the onclicks.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[doccee2006]

Jeff:

Well, that's closer... now it flashes the link in the status bar on the mouse click. Still won't go anywhere, though and the mouseout event still won't work on the popups.

Sorry about neglecting the code tags in my previous posts. I should have noticed the TGML before.

BTW, I took a look at your site and your blog. Kiwis are some my favorite people. I'm planning a trip to Dunedin next summer to return a visit from soome good friends there.

Thanks,
Doc

 

[BillyRayPreachersSon]

Doc,

Can you post a URL to the non-working page?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[doccee2006]

Dan,

Same one as in the original post:

http://patientpal.com/test.htm

Thanks,
Doc

 

[doccee2006]

Anyone having any luck with this?

 

[BillyRayPreachersSon]

Does your goTo function ever get called? Try putting an alert in it.

Also, why bother with the goTo function anyway? Your menus are made up of anchor elements with an onclick that simply cancels the anchor, and uses JS to go to the same location? Why bother with this extra layer of complexity? I suggest removing the onclicks and just using the built-in functionality of the anchors.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[doccee2006]

Dan,

Thaks for your reply.

The gotTo function and the onclicks were only added as a test when the anchors didn't work. I agree, they shouldn't be necessary, and in fact, they have been removed again from my local files, and the only difference it makes is that the status bar doesn't do anything at all when the links are clicked. The status bar doesn't show the hrefs on rollover, either. Interestingly, while I was experimenting, I changed the onClick to an onMouseOver and that works. Not that I want to call the pages with a mousover, of course.

This one realy has me stumped so far. I'm a PHP and Perl programer with some Javascript experience, so I'm probably missing something obvious somewhere, but I can't see the reason this isn't working.

 

[doccee2006]

By the way, I uploaded the files again without the onClicks:

http://patientpal.com/test.htm

 

[BillyRayPreachersSon]

One thing you should do - whether it fixes this or not:

Remove the HTML comments from your CSS. They are not valid, AFAIK, and can cause some browsers to ignore the CSS.

Other than than, I can't help feeling it's something to do with z-indexes. I'd sit down and make sure that all your menus are definately after all the images in source order, or at least have higher z-indexes (relative to other content at the same level as them that may be blocking them).

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[doccee2006]

Dan,

Thanks again. I assume that your advice about HTML comments in the CSS is in reference to those inside the style tags in the header of the document. I've included some around the text in menus.js file:

<!--

menu1='mouth.htm,nose.htm,ear.htm';
labels1='MOUTH,NOSE,EAR';

menu2='cervical_spine.htm,throat.htm';
labels2='SPINE,THROAT';

//-->

and as a Javascript programmer, I'm sure you know why I have those there, although there's some discussion these days about the necessity of those. But, back to the ones in the document head:

Those in the head of the HTM page were actually written by Dreamweaver when the client laid out the page, but I can tell you that they're valid enough, and they're there because very old browsers and some text-based browsers will actually print out the contents of style tags. I had this problem when I first started experimenting with CSS, using IE 4.0 (I think). As with those for JS code, there's some minor controversy about whether we should bother with them anymore, but they shouldn't have any detrimental effect. I'll remove them and see if it makes any difference, but I thought you might like to have the information for future reference.

Meanwhile, like you, I keep coming back to thinking it must be a z-index issue, although you'd think if that was the case, the menus wouldn't display. That's what I'll be trying next.

I sincerely appreciate the input from both you and Jeff. If and when I come up with a solution, I'll be sure to post it here.

Thanks,
Doc

 

[doccee2006]

Um... as an afterthought, I should probably admit, too, that since this whole thing depends on CSS support to function, text-based browsers and any others without CSS support aren't going to even display it correctly, much less run the scripts. So, given that, maybe the coment tags aren't worthwhile in cases like this.

Anyway, back to the drawing board...