davidvandenbor/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Html includes with standard javascript

An example of how you can include "snippets" of HTML into other HTML pages. This might come in handy for things like including headers, footers, menu's or sidebars to multiple pages of a website or application. For instance, you can embed this into 20 or 30 webpages: a single top bar navigation menu which was saved as a reusable piece of code in a seperate text or HTML file. It takes just a couple of lines of javascript to do this.


As a bonus, I've also added a few lines of code that sticks an ".active" css class on the menu item with the name as the currently loaded page. It does this by checking the URL that's actively present in the address bar of your browser.
See it in action

See a working version online that you can download (ZIP) or edit live in Plunker:
https://plnkr.co/edit/gist:999ee44cb21e045c1043eb5f61c9419b

  
## html-include-with-javascript.png

      
    Raw
  

              html-include-with-javascript.png
            
          
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body id="page-one">

  <!-- The empty <nav> below is where the menu is imported -->
  <nav id="menu"></nav>

  <main>
    <h1>Page 1</h1>
  </main>

  <!-- the link to the javascript file containing the import code -->
  <script src="scripts.js"></script>
</body>

</html>

## menu.html
<label>Menu</label>
<a href="index.html">Home</a>
<a href="page-2.html">Page 2</a>
<a href="page-3.html">Page 3</a>
<a href="page-4.html">Page 4</a>

## page-2.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- The empty <nav> below is where the menu is imported -->
  <nav id="menu"></nav>

  <main>
    <h1>Page 2</h1>
  </main>

  <!-- the link to the javascript file containing the import code -->
  <script src="scripts.js"></script>
</body>

</html>

## page-3.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- The empty <nav> below is where the menu is imported -->
  <nav id="menu"></nav>

  <main>
    <h1>Page 3</h1>
  </main>

  <!-- the link to the javascript file containing the import code -->
  <script src="scripts.js"></script>
</body>

</html>

## page-4.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- The empty <nav> below is where the menu is imported -->
  <nav id="menu"></nav>

  <main>
    <h1>Page 4</h1>
  </main>

  <!-- the link to the javascript file containing the import code -->
  <script src="scripts.js"></script>
</body>

</html>

## scripts.js
/*
HTML includes via fetch()
  This only works if you visit the site in
  the browser by using the Live view function, which
  uses IP adresses, like http://.......
  or if you open the site in the browser after uploading
  to the Hanze server (also http://........)
  So, it doesn't work if you open the file from your
  laptop in the browser (users/document/ect....)
 */

/*
Example: This loads menu.html into the HTML element <nav>
=====================================================
*/
fetch("menu.html")
	.then((response) => {
		return response.text();
	})
	.then((data) => {
		document.querySelector("nav").innerHTML = data;
	});
/*

Example (not used): loads footer.html into the HTML element <footer>
=====================================================
*/
fetch("footer.html")
	.then((response) => {
		return response.text();
	})
	.then((data) => {
		document.querySelector("footer").innerHTML = data;
	});

/*
BONUS!!! Stick an ".active" class
on the menu link of the current page!!!
In this case, it looks for all the links (a)
in the container with the ID of "menu"
=====================================================
*/
function setActive() {
	linkObj = document.querySelectorAll("#menu a");
	for (i = 0; i < linkObj.length; i++) {
		if (document.location.href.indexOf(linkObj[i].href) >= 0) {
			linkObj[i].classList.add("active");
		}
	}
}
window.onload = function () {
	setTimeout(function () {
		setActive();
	}, 500);
};

## style.css
body {
   font-family: Arial, sans-serif;
   margin: 0;
   animation-name: fadeIn;
   animation-duration: 1s;
}

@-webkit-keyframes fadeIn {
   from {
      transform: translateY(-30px)
   }

   to {
      transform: translateY(0px)
   }
}

#page-one {
   background: orange;
}

h1 {
   font-size: 8vw;
   text-align: center;
   font-weight: normal;
}

/** ------------------------------------------- //
*  @group:  MENU
*/

nav {
   display: flex;
   justify-content: flex-end;
   margin: 0;
   padding: 0;
   width: 100%;
   background: #f0f0f0;
   border: 1px solid #ccc;
   border-right: none;
   overflow: hidden;
   transition: all .5s ease;
}

nav a:first-of-type {
   margin-right: auto
}

nav a {
   text-decoration: none;
   color: #616161;
   padding: 10px 10px;
   text-align: center;
   border-left: 1px solid #fff;
   border-right: 1px solid #ccc;
   /* width: 100%; */
}

nav a:hover {
   background: rgb(255, 212, 120);
}

.active {
   transition: all .5s ease;
   background: rgb(255, 89, 0);
   color: white;
}

nav label {
   display: none
}

/* responsive vanaf hier */

@media (max-width:500px) {

   nav label {
      display: block;
      font-size: 20px;
      cursor: pointer;
      text-align: center;
      padding: 10px 5px 35px 25px;
   }

   nav,
   nav a {
      display: block;
      font-size: 40px;
      max-height: 40px
   }

   nav:hover {
      transition: all .5s ease;
      cursor: pointer;
      padding-bottom: 50px;
      overflow: hidden;
      max-height: 470px;
   }
}

/* @end MENU -----------  */
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body id="page-one">

	<!-- The empty <nav> below is where the menu is imported -->
	<nav id="menu"></nav>

	<main>
	<h1>Page 1</h1>
	</main>

	<!-- the link to the javascript file containing the import code -->
	<script src="scripts.js"></script>
	</body>

	</html>
	/*
	HTML includes via fetch()
	This only works if you visit the site in
	the browser by using the Live view function, which
	uses IP adresses, like http://.......
	or if you open the site in the browser after uploading
	to the Hanze server (also http://........)
	So, it doesn't work if you open the file from your
	laptop in the browser (users/document/ect....)
	*/

	/*
	Example: This loads menu.html into the HTML element <nav>
	=====================================================
	*/
	fetch("menu.html")
	.then((response) => {
	return response.text();
	})
	.then((data) => {
	document.querySelector("nav").innerHTML = data;
	});
	/*

	Example (not used): loads footer.html into the HTML element <footer>
	=====================================================
	*/
	fetch("footer.html")
	.then((response) => {
	return response.text();
	})
	.then((data) => {
	document.querySelector("footer").innerHTML = data;
	});

	/*
	BONUS!!! Stick an ".active" class
	on the menu link of the current page!!!
	In this case, it looks for all the links (a)
	in the container with the ID of "menu"
	=====================================================
	*/
	function setActive() {
	linkObj = document.querySelectorAll("#menu a");
	for (i = 0; i < linkObj.length; i++) {
	if (document.location.href.indexOf(linkObj[i].href) >= 0) {
	linkObj[i].classList.add("active");
	}
	}
	}
	window.onload = function () {
	setTimeout(function () {
	setActive();
	}, 500);
	};
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	animation-name: fadeIn;
	animation-duration: 1s;
	}

	@-webkit-keyframes fadeIn {
	from {
	transform: translateY(-30px)
	}

	to {
	transform: translateY(0px)
	}
	}

	#page-one {
	background: orange;
	}

	h1 {
	font-size: 8vw;
	text-align: center;
	font-weight: normal;
	}

	/** ------------------------------------------- //
	* @group: MENU
	*/

	nav {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	width: 100%;
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-right: none;
	overflow: hidden;
	transition: all .5s ease;
	}

	nav a:first-of-type {
	margin-right: auto
	}

	nav a {
	text-decoration: none;
	color: #616161;
	padding: 10px 10px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #ccc;
	/* width: 100%; */
	}

	nav a:hover {
	background: rgb(255, 212, 120);
	}

	.active {
	transition: all .5s ease;
	background: rgb(255, 89, 0);
	color: white;
	}

	nav label {
	display: none
	}

	/* responsive vanaf hier */

	@media (max-width:500px) {

	nav label {
	display: block;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	padding: 10px 5px 35px 25px;
	}

	nav,
	nav a {
	display: block;
	font-size: 40px;
	max-height: 40px
	}

	nav:hover {
	transition: all .5s ease;
	cursor: pointer;
	padding-bottom: 50px;
	overflow: hidden;
	max-height: 470px;
	}
	}

	/* @end MENU ----------- */