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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Sydney, Australia
    Posts
    281
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question HTML in Javascript

    i have a website that has a menu that is positioned absolutely on all the pages on my website. as i update my website i also want to update the menu but without having to go through the process of updating every page on my site. (it is currently at 15 pages and very annoying to update everypage everytime i add a new page.)

    is there a way that i can put that code into a javascript file and load that file so that all i have to do is edit the 1 page and all the pages are updated at the same time?

    i've heard that this is bad HTML practice but my webserver doesnt allow PHP or CGI or any other serverside programming unless i pay for it.

    i can provide the code if you want.

  • #2
    Super Moderator
    Join Date
    May 2002
    Posts
    1,041
    Thanks
    0
    Thanked 12 Times in 12 Posts
    Ofcourse you can...

    Place the contents that you want updated using javascript into a file with a .js extension...

    linkmenu.js for example...

    Then in each of the pages you want the menu to appear on input your .js file as such...

    Code:
    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript" SRC="linkmenu.js"></SCRIPT>
    Couple of things to remember:

    1. If your menu is html/css based you will need to use document.write() for your text and other html tags...

    2. Your positioning will be crucial... If your menu is at the top of your pages and require that an element be loaded before the menu is processed you will have to place the script tags after the loading of the element or you will get script errors...

    Personally I do not feel that this is a bad practice, but consider the impact you will have on your clients that do not have a javascript enabled browser or have javascript disabled on their internet browser...

    HTH,

    -sage-
    Last edited by sage45; 06-14-2004 at 03:33 AM.
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Sydney, Australia
    Posts
    281
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW if a user doesn't have javascript enabled on their browser i do have a menu page with all the links on it.

    if you go to our website http://melly-and-barney.i8.com, we currently like the setup and wish to leave it that way with the absolute positioning of the menu as it is. all we would like to do it put the HTML code for the menu in a separate file that can be linked to from everypage so that all i have to do is update the 1 file whenever a new page is added to the website.

    here is the HTML code we would like in the separate file:

    Code:
    <!-- Menu start --> 
    <span id="scrollmenu" style="position:absolute"> 
    <div id="cont"> 
     <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">Home</p> 
     <div class="submenu" id="sub1" style="display:none;"> 
      • <a href="index.html" title="Home">Home Page</a><br /> 
     </div> 
     
       <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('menu2','menuOver')" onmouseout="ChangeClass('menu2','menuOut')">Profiles</p> 
     <div class="submenu" id="sub2" style="display:none;"> 
      • <a href="barneyprofile.html" title="Barney Profile">Barney's Profile</a><br /> 
      • <a href="mellyprofile.html" title="Melly Profile">Melly's Profile</a><br /> 
     </div> 
     
     <p id="menu3" class="menuOut" onclick="SwitchMenu('sub3')" onmouseover="ChangeClass('menu3','menuOver')" onmouseout="ChangeClass('menu3','menuOut')">Photos</p>  
     <div class="submenu" id="sub3" style="display:none;"> 
      • <a href="barneyphoto.html" title="Barney Photo">Barney's Photos</a><br /> 
      • <a href="mellyphoto.html" title="Melly Photo">Melly's Photos</a><br /> 
     </div> 
     
     <p id="menu4" class="menuOut" onclick="SwitchMenu('sub4')" onmouseover="ChangeClass('menu4','menuOver')" onmouseout="ChangeClass('menu4','menuOut')">Poems</p> 
     <div class="submenu" id="sub4" style="display:none;"> 
      • <a href="beautywithin.html">Beauty Within</a><br/> 
      • <a href="couldfly.html">If I Could Fly</a><br/> 
      • <a href="follow.html">Follow</a><br/> 
      • <a href="freeme.html">Free Me</a><br/> 
      • <a href="goodnight.html">Good Night</a><br/> 
      • <a href="loveis.html">Love Is</a><br/> 
      • <a href="my world.html">My World</a><br/> 
      • <a href="untitled.html">Untitled</a><br/> 
     </div> 
      
     <p id="menu5" class="menuOut" onclick="SwitchMenu('sub5')" onmouseover="ChangeClass('menu5','menuOver')" onmouseout="ChangeClass('menu5','menuOut')">Fun Stuff</p> 
     <div class="submenu" id="sub5" style="display:none;"> 
      • <a href="games.html">Games</a><br/> 
      • <a href="toys.html">Toys</a><br/> 
     </div> 
     
       <p id="menu6" class="menuOut" onclick="SwitchMenu('sub6')" onmouseover="ChangeClass('menu6','menuOver')" onmouseout="ChangeClass('menu6','menuOut')">Other Stuff</p> 
     <div class="submenu" id="sub6" style="display:none;"> 
      • <a href="orderofservice.html">Order of Service</a><br/> 
     </div> 
    </div> 
    <!-- Menu end --> 
    </span>
    and here is the javascript code:

    Code:
    <script type="text/javascript"> 
    /*   
    Script made by Martial Boissonneault  2001-2003 http://getElementById.com/ 
    This script may be used and changed freely as long as this msg is intact 
    Visit http://getElementById.com/ for more free scripts and tutorials. 
    Script featured at SimplytheBest.net http://simplythebest.net/scripts/ 
    */ 
    // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ 
     
    function SwitchMenu(obj){ 
     if(document.getElementById){ 
     var el = document.getElementById(obj); 
     var ar = document.getElementById("cont").getElementsByTagName("DIV"); 
      if(el.style.display == "none"){ 
       for (var i=0; i<ar.length; i++){ 
        ar[i].style.display = "none"; 
       } 
       el.style.display = "block"; 
      }else{ 
       el.style.display = "none"; 
      } 
     } 
    } 
    function ChangeClass(menu, newClass) {  
      if (document.getElementById) {  
       document.getElementById(menu).className = newClass; 
      }  
    }  
    document.onselectstart = new Function("return true"); 
    </script>
    thanks in advance

  • #4
    Super Moderator
    Join Date
    May 2002
    Posts
    1,041
    Thanks
    0
    Thanked 12 Times in 12 Posts
    Okies, I have tested this in IE6 SP2 on Win2K and it works fine:

    menu.js:
    Code:
    document.write("<!-- Menu start -->");
    document.write("<span id=scrollmenu style=position:absolute>");
    document.write("<div id=cont>");
    document.write("<p id=menu1 class=menuOut onclick=SwitchMenu(\'sub1\') onmouseover=ChangeClass(\'menu1\',\'menuOver\') onmouseout=ChangeClass(\'menu1\',\'menuOut\')>Home</p>");
    document.write("<div class=submenu id=sub1 style=display:none;>");
    document.write(" <a href=index.html title=Home>Home Page</a><br />");
    document.write("</div>");
    document.write("<p id=menu2 class=menuOut onclick=SwitchMenu(\'sub2\') onmouseover=ChangeClass(\'menu2\',\'menuOver\') onmouseout=ChangeClass(\'menu2\',\'menuOut\')>Profiles</p>");
    document.write("<div class=submenu id=sub2 style=display:none;>");
    document.write(" <a href=barneyprofile.html title=Barney Profile>Barney\'s Profile</a><br />");
    document.write(" <a href=mellyprofile.html title=Melly Profile>Melly\'s Profile</a><br />");
    document.write("</div>");
    document.write("<p id=menu3 class=menuOut onclick=SwitchMenu(\'sub3\') onmouseover=ChangeClass(\'menu3\',\'menuOver\') onmouseout=ChangeClass(\'menu3\',\'menuOut\')>Photos</p>");
    document.write("<div class=submenu id=sub3 style=display:none;>");
    document.write(" <a href=barneyphoto.html title=Barney Photo>Barney\'s Photos</a><br />");
    document.write(" <a href=mellyphoto.html title=Melly Photo>Melly\'s Photos</a><br />");
    document.write("</div>");
    document.write("<p id=menu4 class=menuOut onclick=SwitchMenu(\'sub4\') onmouseover=ChangeClass(\'menu4\',\'menuOver\') onmouseout=ChangeClass(\'menu4\',\'menuOut\')>Poems</p>");
    document.write("<div class=submenu id=sub4 style=display:none;>");
    document.write(" <a href=beautywithin.html>Beauty Within</a><br/>");
    document.write(" <a href=couldfly.html>If I Could Fly</a><br/>");
    document.write(" <a href=follow.html>Follow</a><br/>");
    document.write(" <a href=freeme.html>Free Me</a><br/>");
    document.write(" <a href=goodnight.html>Good Night</a><br/>");
    document.write(" <a href=loveis.html>Love Is</a><br/>");
    document.write(" <a href=my world.html>My World</a><br/>");
    document.write(" <a href=untitled.html>Untitled</a><br/>");
    document.write("</div>");
    document.write("<p id=menu5 class=menuOut onclick=SwitchMenu(\'sub5\') onmouseover=ChangeClass(\'menu5\',\'menuOver\') onmouseout=ChangeClass(\'menu5\',\'menuOut\')>Fun Stuff</p>");
    document.write("<div class=submenu id=sub5 style=display:none;>");
    document.write(" <a href=games.html>Games</a><br/>");
    document.write(" <a href=toys.html>Toys</a><br/>");
    document.write("</div>");
    document.write("<p id=menu6 class=menuOut onclick=SwitchMenu(\'sub6\') onmouseover=ChangeClass(\'menu6\',\'menuOver\') onmouseout=ChangeClass(\'menu6\',\'menuOut\')>Other Stuff</p>");
    document.write("<div class=submenu id=sub6 style=display:none;>");
    document.write(" <a href=orderofservice.html>Order of Service</a><br/>");
    document.write("</div>");
    document.write("</div>");
    document.write("<!-- Menu end -->");
    document.write("</span>");
    mnuscript.js:
    Code:
    /*   
    Script made by Martial Boissonneault  2001-2003 http://getElementById.com/ 
    This script may be used and changed freely as long as this msg is intact 
    Visit http://getElementById.com/ for more free scripts and tutorials. 
    Script featured at SimplytheBest.net http://simplythebest.net/scripts/ 
    */ 
    // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ 
     
    function SwitchMenu(obj){ 
     if(document.getElementById){ 
     var el = document.getElementById(obj); 
     var ar = document.getElementById("cont").getElementsByTagName("DIV"); 
      if(el.style.display == "none"){ 
       for (var i=0; i<ar.length; i++){ 
        ar[i].style.display = "none"; 
       } 
       el.style.display = "block"; 
      }else{ 
       el.style.display = "none"; 
      } 
     } 
    } 
    function ChangeClass(menu, newClass) {  
      if (document.getElementById) {  
       document.getElementById(menu).className = newClass; 
      }  
    }  
    document.onselectstart = new Function("return true");
    testmenu.htm:
    Code:
    <HTML>
    <HEAD>
    <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 3.2 Final//EN"> 
    <TITLE>Testing Menu</TITLE>
    </HEAD>
    <BODY BGCOLOR="#FFFFFF">
    <script type="text/javascript" src="mnuscript.js"></script>
    <script type="text/javascript" src="menu.js"></script>
    </BODY>
    </HTML>


    HTH,

    -sage-
    Last edited by sage45; 06-18-2004 at 05:31 AM.
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Sydney, Australia
    Posts
    281
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats how i thought it would look like but when i tried that it didnt work for me. i'll just try that now and hopefully it will work for me as well

    thanks again


  •  

    Posting Permissions

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