Random javascript div select

Question

I want to random javascript select below latest-sales div tags but my code picks in order. I'm very new to javascript what should I do? I search and search and apply some steps on Google but I could not be successful. Can someone give me an explanation and solution?

Thanks for your help.

<style>
.latest-sales {
    background: #fff;
    width: 280px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: none;
}
.latest-sales.active {
    display: block;
    animation-name: latest-animation;
    animation-duration: .5s;
}
@keyframes latest-animation {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>

<div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Antalya</strong> lokasyonundan, <strong>10K Spotify Dinlenme</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>İstanbul</strong> lokasyonundan, <strong>100 Türk Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>3</strong> dakika önce <strong>İzmir</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Ankara</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Almanya</strong> lokasyonundan, <strong>100 Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Fransa</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>1</strong> dakika önce <strong>İsviçre</strong> lokasyonundan, <strong>500 Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>2</strong> dakika önce <strong>Adana</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>5</strong> dakika önce <strong>Malatya</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          
        <div class="latest-sales">
        <strong>Yeni sipariş alındı</strong><br>
        <strong>1</strong> dakika önce <strong>Tekirdağ</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
        </div>          


<script>
function sleep(ms) { return new Promise(resolve => { timeout = setTimeout(resolve, ms) }); } async function latest() { var latest = document.getElementsByClassName("latest-sales"); var i; for (i = 0; i < latest.length; i++) { await sleep(5000); latest[i].classList.add("active"); await sleep(8000); latest[i].classList.remove("active"); await sleep(5000); } } latest();
</script>[screenshot][1]

I do not see anything that is class="random" in your html that I could click on, nor any items that are class="menu-cover" from which a random pick should be made ... ? — Hagen von Eitzen
– Hagen von Eitzen, Commented Jul 27, 2019 at 10:42
.show().css("display", "none") shows the element and hides it again ! — Ali Sheikhpour
– Ali Sheikhpour, Commented Jul 27, 2019 at 10:51
This code shows a notification popup at the bottom left. For example, from this location, sold as example piece. — Muhammed Yalçınkaya
– Muhammed Yalçınkaya, Commented Jul 27, 2019 at 10:53

KooiInc · Accepted Answer · 2019-07-28 05:42:21Z

You can create an Array of the divs and shuffle them (about shuffling). Use setTimeout to show one of the (shuffled) divs periodically. Something like:

(() => {
  // shuffle array of div.latest-sales
  const shuffleDivs = () => 
    shuffle(Array.from(document.querySelectorAll("div.latest-sales")));
  // hide the active element
  const hideActive = el => 
    el && el.classList.remove("active");
  // hide active element and activate [el]
  const showMessage = el => {
    hideActive(document.querySelector(".active"));
    el.classList.add("active");
  };
  // initialize
  let divsShuffled = shuffleDivs();
  let current = 0;
  
  // start showing a random div.latest-sales
  // every 5 seconds.
  showRandomMessage();

  function showRandomMessage() {
    showMessage(divsShuffled[current]);
    current += 1;
    
    // reshuffle and reset if all elements are used
    if (current == divsShuffled.length - 1) {
      divsShuffled = shuffleDivs();
      current = 0;
    }

    // show next div after 5 seconds
    setTimeout(showRandomMessage, 5000);
  }

  function shuffle(array) {
    let i = array.length;
    while (i--) {
      const ri = Math.floor(Math.random() * (i + 1));
      [array[i], array[ri]] = [array[ri], array[i]];
    }
    return array;
  }
})();

.latest-sales {
    background: #fff;
    width: 280px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: none;
}
.latest-sales.active {
    display: block;
    animation-name: latest-animation;
    animation-duration: .5s;
}
@keyframes latest-animation {
  from {opacity: 0;}
  to {opacity: 1;}
}

<div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Antalya</strong> lokasyonundan, <strong>10K Spotify Dinlenme</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>İstanbul</strong> lokasyonundan, <strong>100 Türk Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>3</strong> dakika önce <strong>İzmir</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Ankara</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Almanya</strong> lokasyonundan, <strong>100 Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Fransa</strong> lokasyonundan, <strong>500 Takipçi</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>1</strong> dakika önce <strong>İsviçre</strong> lokasyonundan, <strong>500 Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>2</strong> dakika önce <strong>Adana</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>5</strong> dakika önce <strong>Malatya</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>          
  <div class="latest-sales">
  <strong>Yeni sipariş alındı</strong><br>
  <strong>1</strong> dakika önce <strong>Tekirdağ</strong> lokasyonundan, <strong>2K Beğeni</strong> siparişi alındı.
  </div>

Hi, thanks for this soluiton I try its looks great but notifications overlap over and over and edges are thick black. I raised the seconds, but it didn't improve.
Hi @MuhammedYalçınkayak,glad I could help. The things you mention look like unrelated css and/or browser problems. What do you mean with 'overlap'?

Collectives™ on Stack Overflow

Random javascript div select

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related