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 7 of 7
  1. #1
    qnc
    qnc is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple menu from an external *.js page

    Hi I'm new to JavaScript so I'll try and explain what I want to do, if I'm not clear please ask more questions and I'll try and be clearer.

    This Javascript looks very exciting by the way.

    I want to have a simple menu on every page of my website and so have been attempting to make an external page called menu.js and call it on every page that I want:

    the menu.js code currently is:

    Code:
    // MENU BAR
    document.write ("Useful pages: <a href="http://example.com">Home / </a><a href="http://example.com/a.html">Page A/ </a><a href="http://example.com/b.html">Page B / </a><a href="http://example.com/c.html"> Page C </a>.");

    Then on any of the webpages in my site I am using

    Code:
    <script src="menu.js"></script>
    But it is not working so I am confused as to what I am doing wrong for the simple first step.



    Once I have it working so that it does display on the page how do I play with the style of it to make the text smaller, centred or anything else I can think of? Do I do this on the menu.js page or on the html page that it is displaying in?

    Also it would be good to do it so that the page it was on wasn't shown in the menu so for instance

    Code:
    // MENU BAR PAGE A misses out page A link
    If Page title is PAGE A... document.write ("Useful pages: <a href="http://example.com">Home / </a><a href="http://example.com/b.html">Page B / </a><a href="http://example.com/c.html"> Page C </a>.");
    
    // MENU BAR PAGE B  misses out page B link
    If Page title is PAGE A... document.write ("Useful pages: <a href="http://example.com">Home / </a><a href="http://example.com/a.html">Page A / </a><a href="http://example.com/c.html"> Page C </a>.");
    
    // MENU BAR PAGE C  misses out page C link
    If Page title is PAGE A... document.write ("Useful pages: <a href="http://example.com">Home / </a><a href="http://example.com/a.html">Page A / </a><a href="http://example.com/b.html"> Page B </a>.");
    or some more efficient way of doing that..

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I want to have a simple menu on every page of my website
    While this is not the way to do it, I'll tell you why it's not working:
    You can not have double quotes inside of double quotes.
    Use single quotes to contain the menu OR escape all the inside quotes

    Code:
    document.write ('Useful pages<br /><a href="http://example.com">Home</a><br /><a href="http://example.com/a.html">Page A</a><br /><a href="http://example.com/b.html">Page B</a><br /><a href="http://example.com/c.html">Page C</a>');
    What it might look like:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    This is the title<br />
    --- Menu -----------------------------<br />
    <script src="menu.js"></script><br />
    --------------------------------------
    <p>And this is the main page</p>
    </body>
    </html>
    FYI: When writing JS code Do not use document.write (). JavaScript and HTML DOM Reference
    Last edited by sunfighter; 06-06-2014 at 08:03 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    and here's what menu.js might look like:
    Code:
    (function (){
    
    var pages={home:{ "link":"http://example.com",
    				"text":"Home / "
    				},
    			a:{ "link":"http://example.com/a.html",
    				"text":"Page A / "
    				},
    			b:{ "link":"http://example.com/b.html",
    				"text":"Page B / "
    				},
    			c:{ "link":"http://example.com/c.html",
    				"text":"Page C / "
    				}
    			};
    
    var thediv = document.createElement("div");
    thediv.appendChild(document.createTextNode("Useful pages: "));
    thediv.id="navbar";
    for (i in pages){
    if(pages[i].link == location.href){
    continue;
    }
    
    var lnk =document.createElement("a");
    
    lnk.href=pages[i].link;
    lnk.appendChild(document.createTextNode(pages[i].text));
    lnk.className="navlink";
    thediv.appendChild(lnk);
    };
    document.body.insertBefore(thediv, document.body.firstChild);
    })();
    to style it you would then probably use a stylesheet, which you would attach to each page where the menu will appear and use CSS - the div containing the links has the id "navbar" and the links have a class name "navlink"

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Ideally you would place the <script> tag just before the </body> tag where almost all JavaScript belongs and place a tag with an id at the spot in the page where you want the menu inserted.

    The only two scripts that can't go just before the </body> tag are:

    Code:
    if (top.location !== self.location) top.location = self.location; // framebreaker
    document.getElementsByTagName('html')[0].className += ' js'; // replaces noscript with CSS
    These two are the only ones that need to run before the page starts to load and so go just after the <head> tag instead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    qnc
    qnc is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys I went with this simplified version in the end. The last "else" is a default if no page is specified.

    Thanks for all your help.

    Code:
    /*
    PAGE SPECIFIC MENUS
    code by qnc 
    10/Jul/2014
    */
    
    // get end url details
    
    var url = window.location.pathname;
    var url_id = url.substring(url.lastIndexOf('/') + 1);
    
    // set page links
    
    var home = "Home";
    var h_result = home.link("http://www.iooseq.com");
    
    var or = "Orders";
    var or_result = or.link("orders.html");
    
    var st = "Stock";
    var st_result = st.link("stock.html");
    
    var arc =  "Archive";
    var a_result = arc.link("archive.html");
    
    var cl = "Chem List";
    var c_result = cl.link("chem-list.html");
    
    // set page specific menu and home
    
    document.getElementById("menu").innerHTML += " Other Pages: ";
    document.getElementById("menu").innerHTML += h_result;
    
    // page specific options
    
    if (url_id == "orders.html") {
    
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += st_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += a_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += c_result ;
    } 
    
    else if (url_id == "stock.html") {
    
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += or_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += a_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += c_result ;
    } 
    
    else if (url_id == "archive.html") {
    
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += or_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += st_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += c_result ;
    } 
    
    else if (url_id == "chem-list.html") {
    
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += or_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += st_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += a_result ;
    } 
    
    else {
    
    document.getElementById("menu").innerHTML = " Menu: ";
    document.getElementById("menu").innerHTML += h_result;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += or_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += st_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += a_result ;
    document.getElementById("menu").innerHTML += " / ";
    document.getElementById("menu").innerHTML += c_result ;
    } 
    
    // end code

  • #6
    qnc
    qnc is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For "correctness" I changed:

    Code:
    document.getElementById("menu").innerHTML += " Other Pages: ";
    to

    Code:
    document.getElementById("menu").innerHTML = " Other Pages: ";
    and just to provide completeness to this topic, the code for the html pages is:

    Code:
    <!-- PAGE SPECIFIC MENU BAR -->
    <p id="menu" class="small"></p>
    <script src="menu.js"></script>
    Thanks once again guys. Starting to get JS a bit!

  • #7
    qnc
    qnc is offline
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and I used the following css to style the menu <p>

    Code:
    body {text-align: center;}
    p {width: 60%; margin-left: 20%; margin-right: 20%;}
    a {text-decoration: none;}
    a:hover {text-decoration: none; color: red;}
    .small {font-size:80%}


  •  

    Posting Permissions

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