working in Dreamweaver, not in Chrome

Report · May 19, 2017

I have a website with a few working pages. I wanted to replace the nav bar on each page with a placeholder and load the code from a common file. The situation is that it works in the Live view of Dreamweaver, but doesn't work when I load the same code into Chrome. I am not sure if maybe the jquery thing doesn't work with Chrome in local files.

According to Stack Overflow I am supposed to do this:

(1) Place this in the <head> of my document:

<script src=/script

(2) Place the nav bar code in nav.html (this is using the W3.CSS framework)

<button class="w3-button w3-mobile" style="letter-spacing: 2px;">The Journey</button>

<a href="finding.html" class="w3-bar-item w3-button">It's like finding your way home</a>

</div>

<a href="#about" class="w3-bar-item w3-button w3-mobile">About</a>

<a href="#contact" class="w3-bar-item w3-button w3-mobile">Contact</a>

</div>

(3) put a placeholder in each web pages, such as index.html:

Add this script somewhere in the body (can this go anywhere?):

$(function(){

$("#nav-placeholder").load("nav.html");

});

</script>

Is this even the right way to do it?

Report · May 19, 2017

Just to make sure, index.html looks like

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
</body>
</html>

and nav.html looks like

<div class="w3-bar w3-padding w3-card-2 w3-blue-gray" style="letter-spacing:2px;">
   <a href="index.html" class="w3-bar-item w3-button w3-mobile">Home</a>
<div class="w3-dropdown-hover w3-mobile">
    <button class="w3-button w3-mobile" style="letter-spacing: 2px;">The Journey</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-2 w3-blue-gray" style="letter-spacing:2px;">
      <a href="finding.html" class="w3-bar-item w3-button">It's like finding your way home</a>
      <a href="finding.html" class="w3-bar-item w3-button">It's like finding your way home</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
</div>
<a href="#about" class="w3-bar-item w3-button w3-mobile">About</a>
<a href="#menu" class="w3-bar-item w3-button w3-mobile">Menu</a>
<a href="#contact" class="w3-bar-item w3-button w3-mobile">Contact</a>
</div>

If that is the case then there should not be a problem, it should work in all JavaScript enabled browsers.

Wappler, the only real Dreamweaver alternative.

Report · May 19, 2017

That's correct, that's what it looks like, but not working in Chrome. It works in Safari... *sort of*. Sizes of elements are pretty messed up in Safari, which may actually be more of a problem with W3.CSS or how I'm trying to use it. In Chrome, I did a hard refresh with clearing the cache. I'm looking into other problems I may have with file locations. Still experimenting.

Do you have an opinion on W3.CSS? Maybe I should switch to Bootstrap to avoid possible trouble.

Report · May 19, 2017

madobe1127 wrote
I have a website with a few working pages. I wanted to replace the nav bar on each page with a placeholder and load the code from a common file. The situation is that it works in the Live view of Dreamweaver, but doesn't work when I load the same code into Chrome. I am not sure if maybe the jquery thing doesn't work with Chrome in local files.

It's some kind of weird file permission which stops the file loading 'locally'. If you upload your files to a remote server and view it in Chrome it should work.

Having said that I'm not sure using 'load' for a navigation is the correct way to go. You should really be using 'server side include' files, it's a more robust way.

Using 'load' is ok for 'unimportant' elements on your page as if it fails it doesn't matter, whereas you really need the navigation to work under ALL circumstances.

Bootstrap has nothing to do with what you are trying to do.

Report · May 20, 2017

Osgood_ , interesting, yes just before you posted that I discovered this fact by searching stack exchange for similar problems. I will look up server side include files. Does that require me to run a webserver for local testing? Note I'm on a Mac, and I have used MAMP before (runs a local server with PHP, mySQL, and related tools).

Report · May 20, 2017

madobe1127 wrote
I will look up server side include files. Does that require me to run a webserver for local testing? Note I'm on a Mac, and I have used MAMP before (runs a local server with PHP, mySQL, and related tools).

If you have used MAMP before, which is what I use, then you are well set up and I would advise you go down that route as using php files opens up endless possibilities of what can be achieved.

In terms of bringing a sitewide navigation into a page its just a matter of inclucing the file (the file extension can be html, but I see no real reason to use .html files if you are using .php files

<?php include('includes/navigation.php'); ?>

I always locate my 'include' files in a folder named 'includes' hence the 'includes/navigation.php' in the bit of code above - that is it, job done and much more reliable.

working in Dreamweaver, not in Chrome

1 Correct answer