I have a multi page webpage that has a header and footer on all pages, and I am creating an app than can view certain areas of the page, but I dont want to show the footer and header when I am browsing through the app.
When I access the page through the app the app adds a parameter to the url. like this:
www.mypage?inapp=true
What is the most efficient way to this with java script and css?
I have a multi page webpage that has a header and footer on all pages, and I am creating an app than can view certain areas of the page, but I dont want to show the footer and header when I am browsing through the app.
When I access the page through the app the app adds a parameter to the url. like this:
www.mypage.?inapp=true
What is the most efficient way to this with java script and css?
<script>
$(document).ready(function(){
var url = window.location.href;
if(url.search('inapp=true') === true){
$('header').css('display', 'none');
}
});
</script>
You can search the parameter in the url and hide the elements if he's present.
JavaScript solution test each param for more fontionnality
var url = "www.test.fr?inapp=true"; //replace with window.location.href
if(url.indexOf("?")!=-1)//parameters exists
{
var urlparameters = url.split("?")[1];
var parameters = urlparameters.split("&");//store all parameters in array
//loop on each parameter
parameters.forEach(function(item,index){
var parameterName=item.split("=")[0]; //parameter name
var parameterValue=item.split("=")[1];//parameter value
if(parameterName=="inapp" && parameterValue=="true")
{
console.log("hide header/footer");
//Hide header/footer elements
document.getElementsByTagName("header")[0].style.display="none";
document.getElementsByTagName("footer")[0].style.display="none";
}
});
}<header>header</header>
<footer>footer</footer>JavaScript solution for only test the inapp=true
var url = "www.test.fr?inapp=true"; //replace with window.location.href
if(url.indexOf("inapp=true")!=-1)//inap = true
{
document.getElementsByTagName("header")[0].style.display="none";
document.getElementsByTagName("footer")[0].style.display="none";
}<header>header</header>
<footer>footer</footer>If jQuery is ok:
var headerSelector = "#header"; // TODO: replace as needed
var footerSelector = "#footer"; // TODO: replace as needed
if(window.location.search.indexOf("inapp=true") !== -1) {
$(headerSelector).hide();
$(footerSelector).hide();
}
url is www.mypage.?inapp=true so if you need to hide header and footer when 'inapp' is true
<?php if($_GET['inapp'] != 'true') {?>
<header>...</header>
<?php } ?>
<body>....</body>
<?php if($_GET['inapp'] != 'true') {?>
<footer>...</footer>
<?php } ?>
here header and footer are not loading at all but if you wish to just hide header and footer add css to display hide when that particular query string is set.
I would remend adding a style tag with the necessary style within. This would not have the "flicker" effect when the header is first rendered and then hidden which happens when you only do this after the page was loaded.
This solution is used in a Squarespace template.
Here is my code in plain JS since JQuery is not always available and outdated.
<script type="text/javascript">
if(window.location.href.includes('inapp=true') === true){
var style = document.createElement('style');
style.innerHTML = `
#header {
display: none !important;
}
.page-section {
padding-top: 0px !important;
}
`;
document.head.appendChild(style);
}
</script>
Note: add this to the header.
You can use a PhP shorthand IF to set two different classes, depending on whether you pass a a parameter (?hide) or not:
<div class="<?php echo ($_SERVER['QUERY_STRING'] == "hide" ? 'hidden' : 'visible');?>"></div>
Then define some CSS:
.hidden{
display: none;
}
You can do it like this (don't forget to add your URL instead of 'Your URL' in if statement):
if(window.location.href == 'Your URL') {
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
}div {
margin: 10px;
width: 50px;
height: 50px;
background-color: green;
}<div id="header"></div>
<div id="footer"></div>Cheers