Inspiring

Answered

working in Dreamweaver, not in Chrome

Forum|Forum|8 years ago
May 20, 2017
3 replies
1155 views

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?

This topic has been closed for replies.

Correct answer osgood_

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.

M

madobe1127Author

Inspiring

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).

O

osgood_Correct answer

Legend

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.

O

osgood_

Legend

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.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

M

madobe1127Author

Inspiring

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded