1

I have written the sidebar of my page in an HTML file. I want to include the same sidebar in all my HTML pages. How can I include the sidebar HTML file into, say, my Dashboard.html file so that the sidebar will be visible?

If it is not possible, can you please provide alternate solutions?

Rose
  • 11
  • 1
  • 2

3 Answers3

1

You can do this in angular js as shown save side bar in .html file

assume your side bar dashboard.html

<ul>
    <li><a> Home</a></li>
    <li><a> About</a></li>
    <li><a> Contact</a></li>
    <li><a> Careers</a></li>
</ul>

by using angular directive ngInclude 

<div ng-include="'dashboard.html'"></div>
Surendra
  • 198
  • 2
  • 13
1

There several ways to do so. I recommend using JQuery:

Let's suppose you have the html code of your side bar in sidebar.html file.

Then, in any of the html files you want to include, you should create a div for containing it and load the sidbar.html content in it:

<html> 
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- ...or whereever you have jquery stored -->
    <script> 
    $(function(){
      $("#sidebar").load("sidebar.html"); 
    });
    </script> 
  </head> 

  <body> 
     <!-- other content here -->
     <div id="sidebar"></div>
     <!-- other content here -->
  </body> 
</html>
MarcM
  • 2,173
  • 22
  • 32
  • This suggestion is same as Vinod's. Please check my comment there. – Rose Oct 18 '16 at 11:58
  • Your syntax error issue with Thymeleaf is not related to html include technique. Double check carefully your code. Or share it with us so that we can take a look. – MarcM Oct 18 '16 at 12:02
0

You are unable to include HTML page inside another HTML directly. But we can achieve this by using Jquery Load function. See the example,

<html> 
<head> 
    <script src="/path/to/jquery.js"></script> 
    <script> 
    $(function(){
      $("#sidebar").load("sidebar.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="sidebar"></div>
  </body> 
</html>
Vinod VT
  • 6,946
  • 11
  • 51
  • 75
  • I'm using Thymeleaf in my page. Using this throws "Uncaught SyntaxError: Unexpected identifier" for the line in the dashboard.html file. – Rose Oct 18 '16 at 11:52