CODEWITHSUNDEEP
javascriptcssresponsive-designmedia-queries
slevin
slevin

Reputation: 3888

css no longer responsive after changed with javascript

I have a website that has responsive css using media queries.

There is a div, called "map"

For width 500px and above there is the map inside the container

//html stucture
//header, menu

<div id="conteiner">
   //texts , images, forms, etc
   <div id="map"></div>
   <input type="button" id="showpage"...
   <input type="button" id="showmap"...
</div>

//footer

@media screen and (max-width: 500px) {
//other divs style here
#map {width:100%; text-align:center; position:relative; padding-left:0.1%; padding-right:0.1%; padding-bottom:60%;}
#showpage #showmap {display:none;}
}

For width 500px and below, map goes "fullscreen" by simply setting everything display:none except the map and the showpage button.

@media screen and (min-width: 500px) {
//other divs style here, set to display none
#map {width:100%; heigth:100%; text-align:center; position:relative; margin:0; padding:0;}
#showpage {display:block; position: absolute;}// floats over map
#showmap {display : none;}
}

So far, OK, if I resize the browser I see the map go fullscreen, and back inside the container div when the browser's width is over 500 or not. So everything is responsive.

The problem :

When the map is fullscreen, (browser below 500px) I use the showmap/showpage buttons so the user can switch from the fullscreen map to the page and back to the map.

Showmap button is visible when the user sees the page, and can click it to see the fullscreen map again.

The buttons use javascript to set/unset style.display:none for the divs.

If the user clicks the buttons the css is no longer responsive. If i click the showpage button to "turn off" fullscreen map, I see the page. Then I resize the browser to get bigger, but the map never re-appears inside the container div

I guess when the javascript changes the css, the changes are permanent

How do I fix this?

Thanks

Upvotes: 0

Views: 115

Answers (1)

Pointy
Pointy

Reputation: 413712

Instead of directly hiding elements by affecting the "style" in the DOM, you can add/remove a class.

In your CSS (somewhere; probably before the media query stuff):

.hidden { display: none; }

Then in your JavaScript code:

function whatever() {
  // ...
  var theDiv = document.getElementById("something");
  if (time_to_hide( theDiv )) {
    theDiv.className += " hidden";
  }
  else {
    theDiv.className = theDiv.className.replace(/\bhidden\b/g, "");
  }
  // ...
}

Now you can leverage normal CSS rules for how different rules override each other. If your "hidden" rule is towards the top of the CSS file, then anything in the media queries will override it. (In this case it probably doesn't matter, because you just want "hidden" to mean that the element isn't shown.)

Because you don't change the style in the DOM, when the "hidden" class is not present then the old rules apply exactly as they would have before the class was added.

Upvotes: 2

Related Questions