0

Here's the thing:

  1. got multiple divs which are on window.onload hidden via CSS
  2. upon window.onload JS in set intervals make random div shown for some amount of time
  3. every time some of these random divs becomes shown it pushes other divs (which are always shown) down below and when it becomes hidden it will push the other divs of class .wanna-stay-where-I-am back on original position
  4. I tried to apply for both classes combinations of properties: position:relative, white-space: pre-wrap;, overflow:hidden or even wrap those to superordinal divs with fixed heigth, f.e. 50 to 50 %, but still can't figure this out for life..

var todo = null;
var div_number;
var used_numbers;

window.onload = (event) => {
  div_number = 1;
  used_numbers = new Array();

  if (todo == null) {
    todo = setInterval(showQuotes, 3000);
  }
}

function showQuotes() {
  used_numbers.splice(0, used_numbers.length);
  $('.bad-pusher').hide();
  for (var inc = 0; inc < div_number; inc++) {
    var random = get_random_number();
    $('.bad-pusher:eq(' + random + ')').show();
  }
  $('.bad-pusher').delay(4000).fadeOut(1000);
}

function get_random_number() {
  var number = randomFromTo(0, 100);
  if ($.inArray(number, used_numbers) != -1) {
    return get_random_number();
  } else {
    used_numbers.push(number);
    return number;
  }
}

function randomFromTo(from, to) {
  return Math.floor(Math.random() * (to - from + 1) + from);
}
.bad-pusher {
    float:left;
    font-size:17px;
    max-width: max-content;
    max-height: content;
    border:1px solid #6A6A6A;
    color:#6A6A6A;
    margin:0.3%;
    padding:0px 10px;
    transition: 0.2s;
    display: none;
    white-space: pre-wrap; 
}

.wanna-stay-where-I-am {
    float:left;
    font-size:30px;
    font-weight: 200;
    max-width: content;
    max-height: content;
    border:1px solid #0074FF;
    color:#0074FF;
    margin:.3%;
    padding:2px 10px;
    transition: 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="bad-pusher">I am pushing others down</div>

<div id="100" class="bad-pusher">I am pushing others down</div>

<div class="wanna-stay-where-I-am">Hey stop pushing me down</div>

QUESTION: How to amend the code so the class .bad-pusher won't have any positioning impacts on class .wanna-stay-where-I-am and so the content on page will remain fixed even on .show() and .hide() changes which are underway on page load via JS.

Sorry if that's messy, tried to clarify that the best I can. Anyone?

miii
  • 21
  • 5
  • 1
    Try `visibility:hidden` instead of `display:none` – Jeremy Thille Jun 09 '21 at 11:29
  • `show` and `hide` methods of jQuery will work the exact way as display property works in css. Which is, the entire div will be hidden (width and height will be 0). hence when you apply the show, the height and width will change back to its original value, hence the remaining div's will be pushed down. – Abin Thaha Jun 09 '21 at 11:31
  • Use the `visibility` property instead of the display. Which will keep the original div's space, and the other div's won't be pushed or moved. – Abin Thaha Jun 09 '21 at 11:32
  • thanks, but issue is I need to keep show and hide methods because all divs of classes .bad-pusher need to push each other (sometimes more divs are shown) and at the same time I don't want those to push other divs of class .wanna-stay-where-I-am. Any ideas on this? – miii Jun 09 '21 at 11:42
  • Does this answer your question? [Equivalent of jQuery .hide() to set visibility: hidden](https://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden) – jeffjenx Jun 09 '21 at 12:29
  • Partially yes Jeff but using visibility:hidden would imply other consequences in my case. Solved the problem different way by changing order of these classes in HTML code in the way so they don't push each other since elements influenced by .hide and .show are ordered to stay below the other elements. That solved my issue. Thanks anyway. – miii Jun 10 '21 at 13:33

0 Answers0