Randomly add class to two divs

Question

I have a two column red/black grid 50/50% and height 100% and had a script to randomize the appearance of both when loading the page, so left or right. I changed the code behind the two column grid a bit going from relative position and float left of right to a fixed and absolute position. This has to do because of the scrolling behavior when in mobile this way it works nicer.

The code below worked fine when using floating it adds a class left or right that makes the red side choose a random side and the black automatically follows, because it is relative to each other. Using absolute and fixed position changes that it has to add to both sides a class left or right to work. Someone know how to add this so when red is left, black is right and visa versa.

 // Random red & black // window.addEventListener('load', function() { // This is a ternary operator, which is just a shorthand way to // do an if/else statement. This basically says, if the random number // is less than .5, assign "left" to the scenario variable. // if it is greater (or equal to), assign "right" to the variable. var scenario = Math.random() < .5 ? "left" : "right"; document.querySelector(".red", ).classList.add("" + scenario); }); 

 .left { left: 0; } .right { right: 0; } .red, .black { width: 50%; height: 100%; } .black { position: absolute; background-color: black; } .red { position: fixed; background-color: red; } 

 <div class="red"></div> <div class="black"></div> 

Answer 1

Here is your solution:

 // Random red & black // window.addEventListener('load', function() { // This is a ternary operator, which is just a shorthand way to // do an if/else statement. This basically says, if the random number // is less than .5, assign "left" to the scenario variable. // if it is greater (or equal to), assign "right" to the variable. var scenario = Math.random() < .5 ? "left" : "right"; var scenario2 = scenario == "left" ? "right" : "left"; document.querySelector(".red", ).classList.add("" + scenario); document.querySelector(".black", ).classList.add("" + scenario2); }); 

 .left { left: 0;} .right { right: 0;} .red, .black { width: 50%; height: 100%; } .black { position: absolute; background-color: black; } .red { position: fixed; background-color: red; } 

 <div class="red"></div> <div class="black"></div> 

Answer 2

You should avoid absolute positioning in this case because you don't want overlapping here (it's not appropriate here). You can replace your CSS and JavaScript code just to apply single class for reversing. Demo:

 // Random red & black window.addEventListener('load', function() { if (Math.random() < .5) document.body.classList.add("reversed"); }); 

 body { margin: 0; /* set height to be minimum of 100% of screen hieght */ min-height: 100vh; } body > div { width: 50%; } .red { background-color: red; position: fixed; left: 0; top: 0; bottom: 0; } .black { background-color: black; margin-left: 50%; min-height: 100vh; } body.reversed > .red { left: 50%; } body.reversed > .black { margin-left: 0; } 

 <div class="red"></div> <div class="black"></div> 

Answer 3

This is more of a hack than an answer.

You add padding-left:50% to .black and you give .red a higher z-index value to compensate for the difference in position settings.

finally I added body {overflow:hidden} - body happens to be the container in this case - to tidy things up.

 // Random red & black // window.addEventListener('load', function() { // This is a ternary operator, which is just a shorthand way to // do an if/else statement. This basically says, if the random number // is less than .5, assign "left" to the scenario variable. // if it is greater (or equal to), assign "right" to the variable. var scenario = Math.random() < .5 ? "left" : "right"; document.querySelector(".red", ).classList.add("" + scenario); }); 

 body { margin: 0 auto; padding: 0; overflow: hidden } .left { left: 0; } .right { right: 0; } .red, .black { width: 50%; height: 100%; } .black { position: absolute; background-color: black; padding-left: 50% } .red { position: fixed; background-color: red; z-index: 2 } 

 <div class="red"></div> <div class="black"></div>