Javascript Media "Query" function not running

Question

I can't seem my Function to actually run I managed to get it to Implement but the issue was you had to reload the script which I don't want I wanted it to run whenever someone resizes the site window.

But when I get to 900px, it doesn't actually show the content and the function's not working correctly, The Reason for this function is that I have tabbed content that on a bigger screen should only have there visibility reduced so so the spacing is correct but on mobile its taking a full 12 columns so it needs to start hiding the content with its spacing all together else I end up with

item1
item2
item3
etc

Let me know if any further material needs to be provided.

window.onresize = function() {

  if (window.innerWidth <= 900) {
    function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("wedo-tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        tabcontent[i].style.opacity = "0";
      }
      tablinks = document.getElementsByClassName("wedo-tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      document.getElementById(cityName).style.opacity = "1";
      evt.currentTarget.className += " active";
    }

    document.getElementById("defaultOpen").click();
  }
}

<div class=" wedo-tab mg-top-m">

  <button id="defaultOpen" class="wedo-tablinks" onclick="openCity(event, '1')">01</button>
  <img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
  <button class="wedo-tablinks" onclick="openCity(event, '2')">02</button>
  <img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
  <button class="wedo-tablinks" onclick="openCity(event, '3')">03</button>
  <img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
  <button class="wedo-tablinks" onclick="openCity(event, '4')">04</button>
  <img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
  <button class="wedo-tablinks" onclick="openCity(event, '5')">05</button>


</div>
<div class="row ab-contents">

  <div id="1" class="col-lg-2 col-sm-12 wedo-tabcontent">
    <h4>BRIEF</h4>
    <p>It all starts with coffee. We want to sit down with you and get to know your brand and what makes it tick. We want you to explain your brief so that our team can get cracking on finding the right solution</p>
  </div>

  <div id="2" class="col-lg-2 col-sm-12  wedo-tabcontent">
    <h4>BRIEF</h4>
    <p>It all starts with coffee. We want to sit down with you and get to know your brand and what makes it tick. We want you to explain your brief so that our team can get cracking on finding the right solution</p>
  </div>

  <div id="3" class="col-lg-2 col-sm-12  wedo-tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
  <div id="4" class="col-lg-2 col-sm-12  wedo-tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
  <div id="5" class="col-lg-2 col-sm-12  wedo-tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

You're not calling the function. It's also not recommended to declare functions in code blocks, do it in the body of the function instead. — Teemu
– Teemu, Commented May 11, 2020 at 7:38
I made you a snippet. Next time please make such a thing and include relevant CSS too — mplungjan
– mplungjan, Commented May 11, 2020 at 7:55
Thank you for the advice @Teemu & I shall make note to do so — Azurry
– Azurry, Commented May 11, 2020 at 8:28

brk · Accepted Answer · 2020-05-11 07:45:33Z

openCity was never called. Take that function out of resize event listener and call it on window.resize. Also the function accepts evt, cityName so have to pass those two parameter too

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("wedo-tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    tabcontent[i].style.opacity = "0";
  }
  tablinks = document.getElementsByClassName("wedo-tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  document.getElementById(cityName).style.opacity = "1";
  evt.currentTarget.className += " active";
}
window.onresize = function() {

  if (window.innerWidth <= 900) {
    setTimeout(function() {
      openCity(var1, var2)
    }, 2000)
    document.getElementById("defaultOpen").click();
  }
}

Ah I think I get it So instead of trying to have the function run on the Resize event rather have ti call the funciton on the resize event
I actually just realized something this works but however when the Im above 900 It also triggers this function and not the other function where I have Just the opacity set and not the display, as If width > 900 Just the opacity should be set not the display but if width < 900 display and opacity should be set

Collectives™ on Stack Overflow

Javascript Media "Query" function not running

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related