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?
Share Improve this question edited Nov 17, 2016 at 10:22 Naveed Ramzan 3,5933 gold badges26 silver badges31 bronze badges asked Nov 17, 2016 at 10:05 SigurjónSigurjón 231 silver badge5 bronze badges 2- Can/do you use jQuery? I think it will be easier with that – Fred Commented Nov 17, 2016 at 10:08
- on some pages I can but not all. so im trying to avoid it. – Sigurjón Commented Nov 17, 2016 at 10:12
7 Answers
Reset to default 6<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();
}
Using PHP
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;
}
Here is pure Javascript, no jQuery needed
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