1

I'm working on a dynamic responsive ad which has various media rules to account for different possible ad sizes. Depending on the size of the page, different content will show.

I've set up some JS conditions which will apply different styles when there's no price, if a media rule which is showing a particular element is active.

This works fine, unless the page is resized after loading. When the page width is modified enough activate a different media rule, the JS styles from the old media rule still remain, which I don't want.

Here is a very simplified/generic example: 

var item = document.getElementById("item");
var itemPrice = document.getElementById("price");
var itemIntro = document.getElementById("intro");
var priceDisplayValue = itemPrice.style.display;
var introAlpha = window.getComputedStyle(itemIntro).getPropertyValue("opacity");

if ((introAlpha == "1") && priceDisplayValue == "none") {
  item.style.background = "#0099cc";
  itemIntro.style.fontSize = "3em";
}
.ad{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
  font-size: 2em;
  text-align: center;
  color: #333;
}

.item{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #AAA;
}

#intro {
  opacity: 0;
}

@media (min-width: 600px){
  #intro{
    opacity: 1;
  }
}
<div class="ad">
  <div class="item item1" id="item">
    <p class="intro" id="intro">Item1 intro text</p>
    <p class="price" id="price" style="display: none;">Price</p>
    <p class="details" id="details">Learn more</p>
  </div>

</div>

When the page is wider than 600px, if the price isn't displayed, the background color changes from gray to blue and the font size will increase.

I'm just trying to figure out how to reset the computed styles if the media rule changes and the original condition is no longer true.

Any insight is much appreciated.

Emma
  • 35
  • 6
  • 1
    Why not just set a class from the javascript and let the CSS deal with the rest? You shouldn't need JS that dynamically updates styles (or really, any JS at all) for this. – Bergi Jan 28 '19 at 22:56
  • The real project I'm working on is a dynamic ad which will have multiple items; some items will have prices and some won't, and the items without prices need to have different styles than the items with prices. So I need the JS to apply different styles depending on various conditions. For the most part, this is working the way I want it to; the only problem is that I want the styles to go back to normal when the conditions are no longer true. Note: in the real project there are more styles & conditions, I just put together a reduced example for simplicity. – Emma Jan 28 '19 at 23:08
  • "*the items without prices need to have different styles than the items with prices.*" - yes, so use `.has_price` and `.un_priced` CSS classes (and more, one for each condition). These classes do not need to change depending on the screen size. – Bergi Jan 29 '19 at 10:08
  • In a specific media rule, for items which do not contain a price, various styles need to change. When another media rule is entered, styles should revert back. If I add classes via JS, I still have the problem of the classes not going away when the window is resized: https://codepen.io/ohem/pen/LqRMxp – Emma Jan 29 '19 at 19:14
  • 1
    The classes don't go away, but the class styles will go away, if you declare them with the media rule. – Bergi Jan 29 '19 at 19:31
  • Ah, I see what you're saying. I'll explore this to see if it will work for my situation. – Emma Jan 29 '19 at 19:43
  • 1
    Okay, this actually can do the trick. Thanks & sorry I didn't quite get what you were saying at first. – Emma Jan 30 '19 at 00:40

0 Answers0