How to make navigation buttons appear on all pages?

Discussion in 'HTML' started by Talal Itani, Feb 5, 2007.

  1. Talal Itani

    Talal Itani Guest

    I am designing a web site and would like to know how to make my navigation
    buttons appear on every page of the site. Currently, I select the buttons
    and I paste them on every single page, but this is getting annoying, since I
    always have do changes to the buttons. I am using Web Page Maker V2. Thank
    you very much.

    Talal Itani, Feb 5, 2007
    1. Advertisements

  2. Talal Itani

    Chaddy2222 Guest

    The best way to do that is with a bit of server side programing, you
    can use PHP includes or SSI (Server side includes,) depending on what
    you have on your web server. You just place all your navigation in one
    file and then copy that include code on to all pages, once set-up you
    just change the one file and it adds the change to all pages, through
    pre-processing completed on the server.
    Hope that helps.
    Chaddy2222, Feb 5, 2007
    1. Advertisements

  3. Talal Itani

    Shija Guest

    If I understood, you need same buttons on every page.
    That is easiest to do with SSI.

    On every page where buttons should appear put include file. For example:

    <!--#include file="buttons.txt" -->

    Then, make a ordinary text file named buttons.txt, save it in the same
    directory as web pages and in that text file write a peace of code you
    would like to be on the pages. For example:

    <li><a href="index.asp">- Home Page </a></li>
    <li><a href="search.asp">- Search Pages </a></li>
    <li><a href="contact.asp">- Contact me </a></li>
    <li><a href="links.asp">- Links </a></li>

    Every time page is loaded, server will change line:
    <!--#include file="buttons.txt" --> with code in buttons.txt
    When you need to add, or change some buttons, just change code in
    buttons.txt, and this change will appear on every page.

    Of course, your server needs to support SSI, but I think most servers do.
    Shija, Feb 5, 2007
  4. Talal Itani

    Alfred Molon Guest

    Don't you have to use the ending *.shtml for that?
    Alfred Molon, Feb 5, 2007
  5. Chris F.A. Johnson, Feb 5, 2007
  6. No -- you can configure your server to perform SSI on any files you like
    -- you can differentiate by file name if you like, or by some other method
    (XBitHack is popular).

    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~
    Geek of ~ HTML/CSS/Javascript/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
    Toby A Inkster, Feb 5, 2007
  7. Talal Itani

    dorayme Guest

    I notice you have been given the best advice already. But I am
    curious because I managed for literally years using Search and
    Replace functions (over multiple pages), whole sites being decked
    out with changes in a few secs. True, it was longer uploading the
    changes to a web server - but not all that long for html files...
    I mention this because it annoys me that you might actually take
    the good advice and not go through the Luddite stage I went
    through. It seems slightly unfair. Like an undeserved leg up.
    What have you done to deserve it? I slaved away for years. Please
    pause and consider the low tech solution I am alluding to.
    dorayme, Feb 5, 2007
  8. Gazing into my crystal ball I observed dorayme
    Take heart! There's always the possibility that SSI is not available to
    the OP. BTW, I did the same thing for a long, long time.
    Adrienne Boswell, Feb 6, 2007
  9. Talal Itani

    Gwin Guest

    add to your .htaccess and you can do what you want for includes.

    AddType text/html .shtml .shtm .htm .html
    AddHandler server-parsed .shtml .shtm .htm .html
    AddType text/html .mobi

    the last i add to fuk em up a little.
    Gwin, Feb 6, 2007
  10. Talal Itani

    Talal Itani Guest

    Thanks for the very many suggestions. I think I will stick with what I have
    been doing. Which is, copy the buttons to the clipboard, then visit the 10
    or so pages, one at a time, and past the buttons. That is the current limit
    of my knowledge. Thanks to all the group members who participated.
    Talal Itani, Feb 6, 2007
  11. Talal Itani

    Gwin Guest

    Gwin, Feb 6, 2007
  12. Talal Itani

    dorayme Guest

    So why did you come here? Were you expecting answers so clear
    that you just go and make magic without any further questions? I
    did give you a hint about using low tech solution, Search and
    Replace, included in most editors. You should explore it, it will
    make your job very easy for a while. For 10 pages it does not
    matter either way but you certainly do not need more than S & R
    for the moment.
    dorayme, Feb 6, 2007
  13. Talal Itani

    BigDaddyBS Guest

    I too went through the "cut-and-paste" phase, and quickly went into a
    "JavaScript" phase before actually figuring out how to do SSI. There are
    plenty of JS examples on the web, but I'll see if I can quickly describe the
    way I did it. (I know it might not be the best, but it worked for me for
    years, and I still currently have sites out there using it.)

    1) create a text file containing the HTML of your buttons.
    (Whether your HTML uses a table, simple text buttons, or list, it doesn't
    2) At the top of the file, put a line "<!-- Begin" (no outer quotes... The
    comment tag ("<!--" hides the file from non-scripting browsers, and "Begin"
    is just for you, I believe)
    3) At the beginning of each line, put "document.write('" (no outer quotes)
    4) At the end of each line, put "');" (again, no outer quotes)
    5) At the end of the file, put "// End -->" (no outer ... get the idea? I
    think all that's really needed is the close comment "-->")
    6) Save the file with the extension ".js" (I suggest putting it in your root
    directory (

    NOTE: If there are any apostrophes within the button HTML, there's another
    step (creating variables and adding them into the lines) which isn't that
    difficult, but, hopefully, you have cleaner button HTML than I did. ;-)

    And you should also "escape" any close-tag slashes (e.g.: instead of "</p>"
    use "<\/p">) as it seems some browsers will take the first non-escaped "/"
    they run across as an end-tag for the JavaScript.

    Now, in each HTML file, where you wish for the navigation to go, put the

    <SCRIPT LANGUAGE="JavaScript" src="navigationfilename.js"

    This line, also, should probably be "hidden" from non-scripting browsers, by
    commenting it out "<!--" line "-->", though I have pages that work and it's

    Any CSS formatting in this file will translate, as in this case,
    document.write is done when loading the page. (The HTML between the
    apostrophes is written to your main-page HTML)

    Now, when you need to add buttons, all you have to edit is the .js file,
    cut-and-paste a copy of one of them where you wish the new one to go, and
    make your changes to the pasted text.

    Be aware that in non-scripting browsers or those with it turned off, the
    navigation will not be available. This is one of the reasons you see those
    text links in a "linkbar" or simply added at the bottom of pages. (With at
    least one link to ... say ... the Sitemap page, where links to every page
    are organized...)

    All I know is this method worked/works for me.

    Ok... I think I'm ready ... All you "experts" - Tell me if (I'm sure some of
    you guys simply assume "what") I did or described wrong, or provide further

    BigDaddyBS, Feb 6, 2007
  14. Talal Itani

    Talal Itani Guest

    Why did I come here? I came here expecting to find a magic answer, but I
    did not find one. I am not guilty. I tried. You tried. Thanks a bunch.
    Talal Itani, Feb 6, 2007
  15. Talal Itani

    Karl Groves Guest

    You got plenty of great answers, none of which suited you, apparently.

    Come back and give everyone a great big "Thank you" when, 6 months down the
    road you finally come to your senses that what you're doing is an
    inconvenient, time-consuming, management headache.
    Karl Groves, Feb 6, 2007
  16. Talal Itani

    Scott Bryce Guest

    If he only has 10 HTML pages, he is probably already doing fine. If in 6
    months his site has grown a lot, then it will be a management headache.
    Scott Bryce, Feb 6, 2007
  17. <snip code>

    Although JavaScript is very seductive for this application it is a *very
    bad* idea for many reasons. First and foremost if the use has JavaScript
    disabled your site cannot be navigated! (It is like giving someone a
    book sealed in a glass box, you can read the first page but cannot turn
    the page to read the book!) Secondly, search engines to not execute
    JavaScript so the search engine will not 'see' your links either and
    will not traverse you site and will not rank it well, interconnection
    with relevant data help in page ranking. Thirdly, since JavaScript would
    be interjecting the markup at 'runtime' it is easy to make markup errors
    and difficult to debug. Web Developers Bar with "Generated Source" helps
    but mistakes are hard to find...
    Jonathan N. Little, Feb 6, 2007
  18. Talal Itani

    dorayme Guest

    BigDaddy, this sounds like you missed out on the obvious step
    after cut and paste. The sequence is best not cut and paste, js,
    dorayme, Feb 6, 2007
  19. Talal Itani

    dorayme Guest

    Not so fast buster! One thing you do not do here is this: cut and
    run, never mind cut and paste. If you wander in, you take the
    fire, we all took the fire and you don't leave till you are as
    hard as flint. And, by the way, please don't top post.
    dorayme, Feb 7, 2007
  20. Talal Itani

    Ed Mullen Guest

    The apostrophes can also be dealt with with a backslash, e.g.:

    "can't" becomes


    I use the technique you describe on my site's menus. Yeah, I understand
    the issues surrounding javascript being turned off on the client side.
    But, using server-side solutions is not an option. For instance, I get
    175 Mb of hosting space included in my basic ISP's plan (Comcast). They
    don't provide any server-side solutions (PHP etc.) and it really doesn't
    make any sense for me to toss that freebie away and pay for hosting when
    my site(s) are simply a hobby and not a business. YMMV.

    Ed Mullen
    Erotic is using a feather. Kinky is using the whole chicken.
    Ed Mullen, Feb 7, 2007
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.