We Keep Coding

How to add another HTML page to .innerHTML

Here's my code for a section of my page that i want to change
let existinguser = document.querySelector('#existing-user');
let table= document.querySelector('#table-contents');
existinguser.addEventListener('click', () => {
table.innerHTML = '';
});
since innerHTML only accepts string, how do i display content from another page
eg. new_page.html using .innerHTML
I dont't know if this will be required but here are the #existing-user snippets
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<div class="card-body">Existing User's requests</div>
<div class="card-footer d-flex align-items-center justify-content-between">
<a class="small text-white stretched-link" href="#" id="existing-user">View Details</a>
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>

You should use iframe for adding html pages

You can do hacky stuff. You can use Javascript to fetch another html.
fetch('new_page.html').then(res=>res.text()) and add the response to the innerHTML.

Use jQuery .load(url) or any other method of Ajax in general.
$(".container").load("https://jsonplaceholder.typicode.com/");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>next content is loaded from another html page</h1>
<div class="container" style="background:#eee"></div>
<h1>previous content was loaded from another html page</h1>

When I click an anchor on a navbar it takes me there, but part of the content is hidden by the navbar itself

So I saw some templates online that when you click on an anchor on the navbar, the page takes you to that section, and the divisions are perfectly aligned, meaning that what you see at the top of the page (obviously while ignoring the navbar), is the top of the division.
I tried to do this, but when I tried, some of the content is put behind the navbar, does anyone know how to fix this?
What I did to "solve" this problem was add padding to the section blocks, but it would look a lot better if it was perfectly aligned.
This is the template: https://startbootstrap.com/theme/freelancer
The HTML and JavaScript of the template is shown below (I can't upload the CSS because of the character limit), can someone please tell me which section of the code is doing this?
This is part of the HTML:
**<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column">
<!-- Masthead Avatar Image-->
<img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />
<!-- Masthead Heading-->
<h1 class="masthead-heading text-uppercase mb-0">Start Bootstrap</h1>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- Masthead Subheading-->
<p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>
</div>
</header>
<!-- About Section-->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content-->
<div class="row">
<div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
<div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
</div>
<!-- About Section Button-->
<div class="text-center mt-4">
<a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
<i class="fas fa-download me-2"></i>
Free Download!
</a>
</div>
</div>
</section>**
And this is the JavaScript
/*!
* Start Bootstrap - Freelancer v7.0.3 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
//
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
offset: 72,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
Here is a picture of the template, as we can see, the divisions are very clear because of their background color:
When I click on the portfolio on the navbar, it moves it down, at the top of the selected division:
When I do that on my HTML file, it takes me down to the selected section, but the top of that section is hidden by the navbar itself. Here is a picture of the section:
And here is a picture after I click on the anchor in the navbar, as we can see, it did take me to that section, but the title is hidden by the navbar itself, this does not happen in the template.
To solve this I simply added padding to the section, but it still does not look as good as the template

What you want is to create an offset for the size of fixed header.
Here are some solutions:
https://css-tricks.com/hash-tag-links-padding/
https://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/

it happened because the next page has no paddings from top so that is set by default as 0 you can add padding either from top of the content or you can also give bottom to your nave.
you can try it
.toppd{
padding-top : 30px;
}
add this class to your first <section> or <div> of your page

You should use css z-index in this case.
navbar {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
negative value means it will be put behind. You can index many divs and other elements as you want with positiv number. This piece of CSS can send the navbar back.

How to pass data to header without reload using javascript or jquery

I have 2 headers. Header 2 is loaded at the bottom of header 1. Header 1 consist of navigation tabs. I want to display upon clicking on #navbar > li > a
I want it to capture the text and pass it to header 2. But header 2 doesn't seem to reload since it is header thus data is not received I guess. How to pass data to header 2 and ask header 2 update value of $PageTitle.
header.php
<?php
$DefaultWebsiteTitle = "Planetarium Negara";
$WebsiteTitle = '';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
<?php
if(isset($WebsiteTitle) && !empty($WebsiteTitle)){
echo $WebsiteTitle;
}
else{
echo $DefaultWebsiteTitle;
}
?>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css\bootstrap\bootstrap.css">
<script src="js\bootstrap\bootstrap.bundle.js"></script>
<script src="js\jquery\jquery-3.3.1.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-sm">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="image\planetarium_logo.jpg" alt="logo"
style="width:50px; height:50px;">
</a>
<!-- Links -->
<ul id="navbar" class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="TicketSale">Ticket Sale</a>
</li>
<li class="nav-item">
<a class="nav-link" href="TicketClaim">Ticket Claim</a>
</li>
<li class="nav-item">
<a class="nav-link" href="TicketRefund">Ticket Refund</a>
</li>
<li class="nav-item">
<a class="nav-link" href="CustomerSurvey">Customer Survey</a>
</li>
</ul>
</nav>
</div>
<?php include('header2.php');?>
<div id="content" class="container-fluid">
header2.php
<?php
var_dump($_POST['PageTitle']);
$PageTitle = $_POST['PageTitle'];
$DefaultPageTitle = 'Planetarium Negara'
?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<?php
if(isset($PageTitle)&&!empty($PageTitle)){
echo $PageTitle;
}else{
echo $DefaultPageTitle;
}
?>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
time
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
logout
</div>
</div>
</div>
header.js
$(document).ready(function(){
$('#content').load('TicketClaim.php');
});
$('#navbar > li > a').click(function(){
var page = $(this).attr('href');
$('#content').load(page+".php");
return false;
});

If I got your point .. you can use .load() to pass a values to php but while you're using $PageTitle = $_POST['PageTitle']; so you can use .post() method .. see the next code
$(document).ready(function(){
// try it directly onload
$.post("TicketClaim.php" , {PageTitle : 'This Is The New Title'} , function(data){
$('#content').html(data);
});
$('#navbar > li > a').click(function(e){
e.preventDefault(); // prevent redirect
var page = $(this).attr('href').trim(); // get the page name
var pagetitle = $(this).text(); // change this line with the title you want. I don't know from where you got the titles but here I just assumes thats the text of the anchor
$.post(page+".php" , {PageTitle : pagetitle} , function(data){
$('#content').html(data);
});
});
});

You just need to change the text node of the div that initially contains the title. To do that, just add an id to the "Page Title" div and then use jQuery to change it:
<!-- Content omitted -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="page-title">
Initial Title <!-- This is set by PHP initially -->
</div>
And the JavaScript:
$('#navbar > li > a').click(function(){
var page = $(this).attr('href');
var text = $(this).text();
// Here the text is changed before the page load
// $('#page-title').html(text);
$('#content').load(page+".php", function() {
// The text is changed after the page is loaded.
$('#page-title').html(text);
});
return false;
});

same navbar with unique heading loaded

I want to create a website which will carry out the same navbar on each webpage. I Have managed to create the same navbar all over using simple jquery techniques. My navbar has a sidebar element with bootstrap styling incorporated. to the right of the sidebar, I have to generate unique heading which corresponds to the webpage click on the navbar. I would like to know is it a way out to create different headings using javascript or jquery.
nav.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-4 sidebar1">
<div class="logo">
<img src="images/group_logo.jpg" class="img-responsive align-middle" alt="Logo">
<hr align="left" width="200px;">
</div>
<br>
<div class="left-navigation">
<ul class="list">
<!--<h5><strong>Actionlist</strong></h5>-->
<li><i class="glyphicon glyphicon-th-large"></i>Dashboard</li>
<li><i class="glyphicon glyphicon-certificate"></i>Seating</li>
<li><i class="glyphicon glyphicon-book"></i>Report</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-8 main-content">
<!--Main content code to be written here -->
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
Dashboard
</h1>
<hr align="left" width="100%">
<!-- Create action buttons -->
</div>
</div>
</div>
In index.html I have the below code under body tag to load the container. How can I create the unique heading for different HTML pages?
<div id="nav-placeholder"></div>
<script>
$.get("nav.html", function(data) {
$("#nav-placeholder").replaceWith(data);
});
</script>

You can use the filename to set the header once the page is loaded.
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span id="nav-placeholder">Dashboard</span>
</h1>
And then use the script like this -
<script>
$(document).ready(function() {
var navPlaceholder= "";
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
switch(filename) {
case "seaing.html":
navPlaceholder = "Seating";
break;
case "report.html":
navPlaceholder = "Report";
break;
default:
navPlaceholder = "Dashboard";
break;
}
$("#nav-placeholder").replaceWith(navPlaceholder);
});
</script>

Untested, but this should give you the idea and steer you in the right direction.
Store the link in a variable;
Store the title of the link in a variable;
Demonstration:
<script>
$('.left-navigation a').on('click', function(){
var getUrl = $(this).attr('href'),
getTitle = $(this).text();
/* Log variable to console - remove for production */
console.log('The Url:',getUrl);
console.log('The Title:',getTitle);
$.get(getUrl, function(data) {
$("#nav-placeholder").replaceWith(data);
$('#page-title').text(getTitle); /* Update the page title */
});
});
</script>
To target the right element in order to update the page title, update your html structure as follows:
<h1><i class="glyphicon glyphicon-menu-hamburger"></i> <span id="page-title">Dashboard</span></h1>
We don't want the script to remove the glyphicon icon nested within your h1 element, so we wrap the text that needs to update in an element we can target specifically (#page-title).

Materilize side-nav always open, won't load collapsed

My side-nav should be loading collapsed and also showing a modal as in this fiddle:
Relevant code:
HTML:
<header class="text-center">
</header>
<div class="main_container">
<nav class="indigo darken-4">
<div class="nav-wrapper">
<h1>code.partners near you</h1>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Login with Github</li>
<li class="bold">Create a New Marker</li>
<li class="bold">Logout</li>
<i class="mdi-navigation-menu"></i>
</ul>
</div>
</nav>
<main>
{{!-- <div class="container text-center"> --}}
<div id="map_container">
<div id="map"></div>
<div id="message_box">
<ul id="messages"></ul>
<div id="messageInputBox">
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</div>
</div>
{{!-- </div> --}}
</main>
and my Javascript:
$(document).ready(function(){
console.log("interactive is linked and ready");
// Initialize collapse button
$(".button-collapse").sideNav({
menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
});//end document.ready
my Heroku page:
http://coding-partners.herokuapp.com/home
My fiddle: https://jsfiddle.net/clwarnock/h7md1q3u/8/
I'm trying to get my side-nav to act more as in the fiddle:
Start collapsed
Display a modal when open
Editing for Danny Buonocore
When the viewport is adjusted to a small device size, there's no hamburger menu to open it back up again. I think there's a conflict somewhere that I'm not seeing.

The sidebar is designed to automatically be expanded when the window is large enough. This is known as responsive web design. If you make your browser smaller, you will see that it won't be expanded on load.