I created a PHP file (static_designs.php) which contains codes for the header. This php calls a javascript file (sidebar-open-close.js) using <script src="sidebar_open-close.js"></script>
. Now I have a page (mainpage.php) that includes static_designs.php using include 'static_designs/static_designs.php';
Note that in the static_designs
directory is where my javascript and php.
This is the Directory Levels:
- /mainpage.php
- /static_designs/static_designs.php
- /static_designs/sidebar_open-close.js
Here are the codes:
static_designs.php
<div class="w3-display-left custom-left-item ">
<button class="w3-button w3-white w3-large" onclick="w3_open()">☰</button>
</div>
<div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Services</a>
<a href="#" class="w3-bar-item w3-button">Packages</a>
</div>
sidebar_open-close.js
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
mainpage.php
<?php
include 'static_designs/static_designs.php';
include 'static_designs/footer.php';
?>
Note: Footer is not a problem here.
When I try to run static_designs.php, the sidebar works (closes and opens), but when I run mainpage.php, the format/css looks the same, but the javascript doesn't seem to work (pressing the menu button doesn't do anything).
The reason why I want to choose the method "include" php files is that the header and the footer will be the same for many pages. So, my question is, is there a way to resolve this or a different method that is more recommended to include a header and a footer without having to copy paste it to every page?