My goal is to create a website with multiple pages without having to recreate the toolbar for each page. To achieve this, I have created a separate HTML file and CSS file specifically for the toolbar.
On each page, I simply import the toolbar using the following code:
<html>
<head>
<title>Pink Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="Styles/HomeStyles.css">
<link rel="stylesheet" href="Styles/Toolbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("#toolbarHolder").load("toolbar.html");
});
</script>
</head>
<body>
<div id="toolbarHolder"></div>
<div id="welcomeScreen">
<img id="welcomeScreenImg" src="Images/welcome.jpg" alt="Pink Home">
<p id="welcomeScreenText">Allow us to help you make your home look better</p>
</div>
</body>
In my CSS file, the main standout feature is that the toolbar is fixed in position to stay on top of the screen while allowing other elements to appear below ithttps://i.stack.imgur.com/roIm7.jpg.
Everything functions correctly on the homepage, but on additional pages, I want the toolbar to remain at the top of the screen with other elements positioned below it.https://i.stack.imgur.com/ml7cd.png
I have attempted to address this issue by using JavaScript. My solution involves getting the height of the toolbarHolder div and setting a margin-top property for the searchBar element equal to that height. However, the toolbarHolder div has a height of zero, as shown in the code below:
<HTML>
<head>
<title>Kitchen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Styles/Toolbar.css">
<link rel="stylesheet" href="Styles/searchbar.css">
<link rel="stylesheet" href="Styles/kitchen.css">
<script type="text/javascript" src="JavaScript/toolbar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("#toolbarHolder").load("toolbar.html");
$("#searchbarHolder").load("searchbar.html");
});
$('#toolbarHolder').ready(function() {
var contentPlacement = $('#toolbar').position().bottom + $('#toolbar').height();
$('#searchbarHolder').css('margin-top',contentPlacement);
});
</script>
</head>
<body>
<div id="toolbarHolder"></div>
<div id="searchbarHolder"></div>
</body>
</html>
https://i.stack.imgur.com/TOnHu.png
I have also tried to obtain the height of the imported toolbar itself, resulting in an error due to JavaScript searching for the element before importing it.
Ultimately, my objective is to keep all other items positioned below the toolbar and not hidden behind it. As users scroll down, the toolbar should remain fixed at the top of the screen while other content moves underneath and disappears.