Display the page title in the header when it is a separate html file included in multiple pages

Question

I have created a top bar with a sidemenu in order to navigate through multiple pages. I would like to display the page title in this top bar according to the page where it is loaded. This is my top bar:

function openNav() {
    document.getElementById("mySidepanel").style.width = "280px";
}

function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";
}

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
     this.classList.toggle("active");
     var dropdownContent = this.nextElementSibling;
     if (dropdownContent.style.display === "block") {
         dropdownContent.style.display = "none";
     } else {
         dropdownContent.style.display = "block";
     }
 });
}

body,html{
 padding:0;margin:0;
 background-color:#F4F4F4;
}

#wrapper-header{
 color:white;
    font-size: 28px;
 float:left;
 width:105%;
 height:65px;
 background-color:#2E2D30;
}

#main-header{
 position:relative;
 width:1200px;
 left:50%;
 margin-left:-580px;
 height:auto;
}

.page-title{
 position: absolute;
    height: 20px;
    left: 25%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.sidepanel {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 font-family: 'Times New Roman', Times, serif;
 overflow-x: hidden;
 padding-top: 60px;
 transition: 0.5s; 
  }
  
  .sidepanel a, .dropdown-btn {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 border: none;
    background: none;
 transition: 0.3s;
 outline: none;
 font-family: 'Times New Roman', Times, serif;
  }
  
  .sidepanel a:hover, .dropdown-btn:hover {
 color: #f1f1f1;
  }
  
  .sidepanel .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
  }
  
  .openbtn {
 font-size: 20px;
 cursor: pointer;
 background-color: #2E2D30;
 color: white;
 padding: 10px 15px;
 border: none;
 transform: scale(1.6);
  }
  
  .openbtn:hover {
 background-color: rgb(53, 53, 53);
  }

.dropdown-container {
 display: none;
 background-color: #262626;
 padding-left: 8px;
 font-family: 'Times New Roman', Times, serif;
  }
  
  .fa-caret-down {
 margin-left: 18px;
 float: right;
 padding-right: 2px;
  }

<div id="wrapper-header">
 <div id="main-header" class="object">
  <button class="openbtn" onclick="openNav()">&#9776;</button>
  <div class="page-title">PAGE TITLE</div>
    </div>
</div>

<!-- NAVBAR -->

<div id="mySidepanel" class="sidepanel">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="#">Recientes</a>
 <button class="dropdown-btn">Para empezar
     <i class="fa fa-caret-down"></i>
    </button>
 <div class="dropdown-container">
  <a href="#">Nivel 1-5</a>
     <a href="#">Nivel 6-10</a>
  <a href="#">Nivel 11-15</a>
 </div>
 <a href="#">Arreglos</a>
</div>

So basically it would be to display the page title in the element with the class "page-title". I am avoiding to use php so far because it is a static web page and I am hosting it locally. That is why I am including the html file in multiple pages using jquery instead of php or any other server side method.

Radwan Abu-Odeh · Answer 1 · 2020-01-02T14:13:22.233

0

Refer to this answer, it is solving the same case ( Which is reusing an html file inside other files ).

You can do it easily with jQuery

Updated Answer

just add this function to your page:

function setPageName(pageName) {
  var title = $('.page-title');
  title.text(pageName);
}

and make sure you run it after you load the other html file into this page. [Repl.it Link]

edited Jan 02 '20 at 14:13

answered Jan 02 '20 at 12:28

Radwan Abu-Odeh

1,897
9
16

That answer explains how to include a separated html file into several pages. I am already doing that with jQuery. What I asked is how to display the page-title within that common html file. That title should change according to the page where it is being displayed. – petoma Jan 02 '20 at 12:37
I have tried but it is not working. I have tried adding that to both the header code, and the index.html with the page-title that is intended to fetch and display in the top bar. I also doubt what to do in the
where I have the PAGE TITLE text, do I have to remove the text and leave it blank?
– petoma Jan 02 '20 at 14:27
No you don't have to, it should work even if there is a text inside of it. – Radwan Abu-Odeh Jan 02 '20 at 14:28

Display the page title in the header when it is a separate html file included in multiple pages

1 Answers1

Updated Answer