Hide header/footer when url contains a certain parameter

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.com?inapp=true

What is the most efficient way to this with java script and css?

Answers:

Answer
<script>
    $(document).ready(function(){
        var url = window.location.href;
        if(url.search('inapp=true') === true){
            $('header').css('display', 'none');
        }
    });
</script>
Answer

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>

Answer

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();
}
Answer

Using PHP

url is www.mypage.com?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.

Answer

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;
}
Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.