Results 1 to 5 of 5

Thread: Switch menu on an included page

  1. #1
    Join Date
    Sep 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch menu on an included page

    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.
    Last edited by ddadmin; 04-23-2008 at 07:33 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  3. #3
    Join Date
    Sep 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Sep 2004
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by kbrooks; 04-23-2008 at 05:24 PM. Reason: Too wordy

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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:

    Code:
    <!--#include virtual="/menu.htm"-->
    If your pages are PHP, then use PHP's include() function instead, and so on.

Bookmarks

Posting Permissions

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