0

I am working on my first website that is on my computer and I am not planning to put it on the internet. However, I want to reuse nav and footer on other pages.

No php. No frames. Javascript? Are there anyways to use HTML?

skyneon
  • 73
  • 1
  • 1
  • 5
  • 1
    possible duplicate of [Pure HTML + JavaScript client side templating](http://stackoverflow.com/questions/4073375/pure-html-javascript-client-side-templating) – Matt Ball Nov 18 '12 at 17:26
  • Why not install MAMP/WAMP/LAMP (for Mac, Windows or Linux) and just use PHP, you likely will need it anyway at some point? (i.e. are you avoiding PHP because it's 'hard' or because you've decided you want to do it differently) – Rich Bradshaw Nov 18 '12 at 20:51
  • I am just working on my site for offline use. So I wanted to reuse nav as simple as possible. – skyneon Dec 17 '12 at 13:12

2 Answers2

0

Modest will do this.

It's especially easy if you're not putting it on the internet, just put jquery and modest-preview.js in the section and you can start using it right away:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="modest-preview.js"></script>
    <include>myNav</include>
  </head>
  <body>
    <myNav/>
  </body>
</html>

myNav.xml HTML | CSS | JavaScript | jQuery

GoalBased
  • 1,810
  • 1
  • 14
  • 12
0

I know is a bit old but Ive found a way to achieve this.

You can load a portion of code into yout html by using ajax and leave the rest of your page without changes in order to use the same nav.

Code:

lets say I have this code in this file:

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">NAVBAR</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class=" active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#about">Rebout</a>
                </li>
            </ul>
        </div>
    </nav>
    <main id="main">
    </main>
    <script src="thirdParty/jquery-1.12.0.min.js"></script>
    <script src="thirdParty/jquery.ba-hashchange.min.js"></script>
    <script src="js/partialViewLoad.js"></script>
    <script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

I will have two more files that will work as htmls partial views: 'partialViews/main.html' and 'partialViews/about.html'. (put some html into those files)

I use the plugin jquery.ba-hashchange.min for refreshing the html.

And at least I have the script used to load the partial views:

loadPartialView.js

$(function () {
    $(window).hashchange(function () {
        if (location.hash.indexOf('#/') > -1) {
            loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
        }
    });
    $(window).hashchange();
});

function loadPartial(partialName) {
    partialName = partialName || 'main';
    $.get('/partialViews/' + partialName + '.html').done(function (html) {
        $('#main').html(html);
    });
}

$(document).ready(function() { loadPartial(); });

When you click on the links in the ul the hash location will change and this will trigger a jquery callback that we ve created. in that moment we load our partial views.

I recommend you to use a server and a more robust language to accomplish this. But this solution will work, is easy to implement and will work even on a server.

tavo
  • 41
  • 2