Switch menu on an included page

[kbrooks]

1) Script Title: Switch Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...switchmenu.htm

3) Describe problem:
I set up a menu using the switch menu and it works wonderfully. I preview it in IE...looks fine, works great.

My intent was to use it on a main page inside a table, by using it as an included page. It puts the page in that cell just fine, although menu is expanded completely. But when I preview it in the browser, it doesn't display at all. I get a box with a red x, and underneath it says
[includes/includes/include_left.htm]

Is it possible to use this script like I'm attempting to do? I assume it's because the script resides in the head section and I believe only the body section is included on the main page. Is there any way around this?

It's for an internal intranet so I can't provide a URL.

[ddadmin]

So you're basically asking if it's possible to include the Switch Menu script on your pages via an external file (ie: using SSI or PHP include())? I don't see why not. The code of Step 2 would be put inside the external file, with the include line added to your pages where you wish the menu to appear. The code of Step 1 on the other hand consist of CSS and JavaScript code, so you'll save each as external files on their own (ie: .css and .js), and then referenced on each of your pages.

[kbrooks]

Ohhhhhh, thank you! I didn't know what I was doing, but tried saving all of step 1 in a .js file. I didn't look close enough to see that there is css in there as well.

What syntax do I use to call it? I had put something in to call the .js yesterday....it didn't work, probably because I needed the .css too...but I didn't save it so I can't tell you for sure what I used.

Thanks for your help!

[kbrooks]

Here's what I tried, but it doesn't work. I get a syntax error when I preview and just nothing at all when I look at in browser.

I made 2 .js files and a .css file and saved them in my main folder:

switchmenu_head.js
<!-- hide script from old browsers


/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate


// end hiding script from old browsers -->


switchmenu_head.css
<style type="text/css">
.menutitle{
cursorointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>


switchmenu_wheremenu.jss (It actually goes to sub14 but I took those out for simplicity
<div class="menutitle" onclick="SwitchMenu('sub1')">
<p>
<font face="Franklin Gothic Demi">Calendars</font></div>
<span class="submenu" id="sub1">
- <a href="http://mis/Calendars/CME_Calendar/CME_Calendar.htm" target="_parent">CME Calendar</a><br>
- <a href="http://mis/Calendars/Dr_Call_Calendar/Drs_Call_Calendar.htm" target="_parent">Doctors On Call Calendar</a><br>
- <a href="http://mis/Forms/Clinic%20Templates/Monthly Clinic Schedule 2008.doc" target="_parent">Monthly Clinic Calendar 2008</a><br>
</span>

Now, on the page itself, this is my head section, calling both the css and js (I hope):
<head>

<style type="text/css" media="screen">
@import url (switchmenu_head.css);
</style>

<SCRIPT SRC="switchmenu_head.js">
</SCRIPT>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>RMC Intranet</title>
<meta name="Microsoft Theme" content="none">
</head>

And where I want the menu to appear within the body:
<SCRIPT SRC="switchmenu_wheremenu.js">
</SCRIPT>
<font face="Franklin Gothic Demi">Links</font></div>

[ddadmin]

Two things. Firstly, inside switchmenu_head.css, the surrounding STYLE tags inside this file need to be removed. Secondly, the HTML for the menu cannot be added inside a .js file as you have done:

<SCRIPT SRC="switchmenu_wheremenu.js">
</SCRIPT>

Only valid JavaScript can be saved as external .js files. You'll need to put HTML code inside a regular text file, save it as something like "menu.htm", then included onto your page via server side inclusion, such as SSI (server side includes), assuming your pages are SSI enabled:

<!--#include virtual="/menu.htm"-->

If your pages are PHP, then use PHP's include() function instead, and so on.