0

I am in the process of creating a top bar with HTML and CSS. I've added CSS to make the code responsive with a flex element. It looks like this:

@media screen and (max-width: 820px) {
  nav.container {
    flex-grow: 3;
  }
}
<div class="topbar">

  <nav class="container">
    <div class="text1">Text</div>
  </nav>

  <nav class="container">
    <div class="text2">Text2</div>
  </nav>

  <nav class="container">
    <div class="text3">Text3</div>
  </nav>

  <nav class="container">
    <div class="text4">Text4</div>
    <div class="text5">Text5</div>
    <!--This is triggered by an external 
             Javascript code, it is sometimes visible and sometimes not visible. -->
  </nav>

</div>

The only thing I'm missing right now is a code, that disables the CSS code above when the div (Text5) is not visible.

Edit: I will need a function, that checks if the provided "div with the class text5" has "display: none;" and then toggles the CSS code i've provided off.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
m0t0rhektor
  • 3
  • 2
  • 2
    Does this answer your question? [How do I toggle an element's class in pure JavaScript?](https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript) – Ram Segev Jul 20 '21 at 09:02
  • I am a Javascript novice so I cant really start anything with the question you've provided me with. Thanks anyways. – m0t0rhektor Jul 20 '21 at 09:11
  • Could you share the js code so we can see how you hide it and maybe modify your js to affect the css ? It's easier to do if we know what triggers your div to get the display:none property – Sebastian Ciocarlan Jul 20 '21 at 09:39
  • I dont have access to the javascript code because my website is based on a shop system...(shopware 5). But i still have the ability to add external javascript. – m0t0rhektor Jul 20 '21 at 17:44

1 Answers1

0

Based on your edit you will have to do something like this.

//This function returns true if the display of all divs with classOfTheDiv is none
function checkIfIsHidden(classOfTheDiv){
     let divs =  document.getElementsByClass(idOfTheDiv);
     var allHidden = true;
     divs.forEach((div)=>{
         if(!(div.style.display === "none")){
         allHidden = false;
         }
     })
return allHidden;
}
//This function will activate the media query only if "text5" is not display none
function activateMediaQuery(){
    let mediaMatch = window.matchMedia("screen and (max-width: 820px)")
    if(!checkIfIsHidden("text5")){    
        mediaMatch.addListener(mediaQueryGenerator)
    }else{
        mediaMatch.removeListener(mediaQueryGenerator)
    }
}
//This function generates the media query. You will no longer need the css, so disable it. 
function mediaQueryGenerator(mediaMatch){
    if(mediaMatch.matches){
        var elements = document.querySelectorAll('.container');
        elements.forEach((element)=>{
            element.style.flexGrow = "3";
        })
    }
}

This is not the simplest nor the shortest way to do it, but IMO it's the easiest to understand. You will have to call the activateMediaQuery() function on the main thread of your JS code, and disable or comment your current media query. Edit: I've just noticed you don't have any ID. Im gonna assume you want all the divs with the same class ("text5") to get checked.

Sebastian Ciocarlan
  • 301
  • 2
  • 11