CODEWITHSUNDEEP
javascript
Ihfaz
Ihfaz

Reputation: 25

Modify JavaScript for mobile view

the following script hides the header on my website when executed through button click.

    <script>
    function openTab(evt, drinkId) {
        tabcontent = document.getElementsByClassName("tabcontent");
        var i, tabcontent, tablinks;
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            document.getElementById("sticky-header").style.display = "block";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(drinkId).style.display = "block";
        document.getElementById("sticky-header").style.display = "none";
        evt.currentTarget.className += " active";
    }
</script>

I want to hide the header only for screens above 768px and show it for devices below. I am new to JS and so I modified it to this:

<script>
function tabMedia(x) {
  if (x.matches) { // If media query matches
    function openTab(evt, drinkId) {
        tabcontent = document.getElementsByClassName("tabcontent");
        var i, tabcontent, tablinks;
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            document.getElementById("sticky-header").style.display = "block";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(drinkId).style.display = "block";
        document.getElementById("sticky-header").style.display = "none";
        evt.currentTarget.className += " active";
    }
  } else {
    function openTab(evt, drinkId) {
        tabcontent = document.getElementsByClassName("tabcontent");
        var i, tabcontent, tablinks;
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
            document.getElementById("sticky-header").style.display = "block";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(drinkId).style.display = "block";
        evt.currentTarget.className += " active";
    }
  }
}
var x = window.matchMedia("(min-width: 768px)")
tabMedia(x)
x.addListener(tabMedia)
</script>

Please let me know how I can achieve it. Thanks!

Upvotes: 0

Views: 41

Answers (1)

Kostas
Kostas

Reputation: 1903

<script>
function openTab(evt, drinkId) {
  tabcontent = document.getElementsByClassName("tabcontent");
  var i, tabcontent, tablinks;
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(drinkId).style.display = "block";

  // hide #sticky-header on screens bigger than 768 pixels
  if (window.innerWidth > 768) {
    document.getElementById("sticky-header").style.display = "none";
  } else {
    document.getElementById("sticky-header").style.display = "block";
  }

  evt.currentTarget.className += " active";
}
</script>

Upvotes: 1

Related Questions