On-air script

Joined
Jul 4, 2023
Messages
366
Reaction score
41
0 - 00 to 1 - 01 - 1 minute
1 - 01 to 2 - 02 - 2 minutes
...
58 to 59 - 60 minutes - 1 hour
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
another issue, all of those links, are blocked, you need to change accessibility to those links in your google drive for e.g.

JavaScript:
dj.src = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';

Share files from Google Drive
would the github link work?
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
Check it out, maybe this code will be an inspiration for further experiments with text animation on the web page. ;)

HTML:
<div class="up-and-down-container">
  <div></div>
  <div>O</div>
  <div>f</div>
  <div>f</div>
  <div>-</div>
  <div>a</div>
  <div>i</div>
  <div>r</div>
  <div></div>
</div>

<style>
  /* for presentation purpose */
  body {
    display: grid;
    height: 100vh;
    place-items: center;
    background-color: black;
    overflow: hidden;
  }
  /* /for presentation purpose */


  /* code for animation */
  .up-and-down-container {
    display: flex;
    gap: 0.5rem;
  }
  .up-and-down-container div {
    --animation-timing: cubic-bezier(.755, .05, .855, .06);
  }
  .up-and-down-container div {
    width: 2rem;
    height: 2rem;
    font: 500 2rem/1 arial;
    text-align: center;
    border-radius: 50%;
    background-color: limegreen;
    animation: up-and-down 2s var(--animation-timing) infinite alternate;
    animation-delay: var(--delay);
  }
  @keyframes up-and-down {
    to {
      transform: translateY(500%);
      background-color: orangered;
      scale: 1;
    }
  }
  .up-and-down-container div:nth-child(1) {
    --delay: calc(sin(50) * 1s);
  }
  .up-and-down-container div:nth-child(2) {
    --delay: calc(sin(50) * 2s);
    background-color: greenyellow;
    scale: 1.4; 
  }
  .up-and-down-container div:nth-child(3) {
    --delay: calc(sin(50) * 3s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(4) {
    --delay: calc(sin(50) * 4s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(5) {
    --delay: calc(sin(50) * 5s);
  }
  .up-and-down-container div:nth-child(6) {
    --delay: calc(sin(50) * 6s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(7) {
    --delay: calc(sin(50) * 7s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(8) {
    --delay: calc(sin(50) * 8s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(9) {
    --delay: calc(sin(50) * 9s);
  }
</style>
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
Check it out, maybe this code will be an inspiration for further experiments with text animation on the web page. ;)

HTML:
<div class="up-and-down-container">
  <div></div>
  <div>O</div>
  <div>f</div>
  <div>f</div>
  <div>-</div>
  <div>a</div>
  <div>i</div>
  <div>r</div>
  <div></div>
</div>

<style>
  /* for presentation purpose */
  body {
    display: grid;
    height: 100vh;
    place-items: center;
    background-color: black;
    overflow: hidden;
  }
  /* /for presentation purpose */


  /* code for animation */
  .up-and-down-container {
    display: flex;
    gap: 0.5rem;
  }
  .up-and-down-container div {
    --animation-timing: cubic-bezier(.755, .05, .855, .06);
  }
  .up-and-down-container div {
    width: 2rem;
    height: 2rem;
    font: 500 2rem/1 arial;
    text-align: center;
    border-radius: 50%;
    background-color: limegreen;
    animation: up-and-down 2s var(--animation-timing) infinite alternate;
    animation-delay: var(--delay);
  }
  @keyframes up-and-down {
    to {
      transform: translateY(500%);
      background-color: orangered;
      scale: 1;
    }
  }
  .up-and-down-container div:nth-child(1) {
    --delay: calc(sin(50) * 1s);
  }
  .up-and-down-container div:nth-child(2) {
    --delay: calc(sin(50) * 2s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(3) {
    --delay: calc(sin(50) * 3s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(4) {
    --delay: calc(sin(50) * 4s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(5) {
    --delay: calc(sin(50) * 5s);
  }
  .up-and-down-container div:nth-child(6) {
    --delay: calc(sin(50) * 6s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(7) {
    --delay: calc(sin(50) * 7s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(8) {
    --delay: calc(sin(50) * 8s);
    background-color: greenyellow;
    scale: 1.4;
  }
  .up-and-down-container div:nth-child(9) {
    --delay: calc(sin(50) * 9s);
  }
</style>
thanks for the heads up, but i'v another problem

i'v set monday for 13:00--13:59 59mns 0hours but the image didn't change
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
for 1 hour - 13:00 -- 13:59

it's enough write

JavaScript:
if (hr == 13)
    dj.src = 'djimages/kayley.jpg'
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
I have checked on https://coolvibes-reloaded.com

JavaScript:
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
        break;
        if ((hr === 21) { // 21:00 - 21:59 - 59 minutes - 0 hour
          dj.src = 'djimages/billy.jpg';
        break;
        if ((hr === 13) { // 13:00 - 13:59 - 59 minutes - 0 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        break;
      case 2: // Tuesday

the code above is incorrect

write like this
JavaScript:
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
       
        if ((hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';

        if ((hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';

        break;
      case 2: // Tuesday

13:00 and 13:59 it's like 00 + 59 = 60. Zero it's count too (as 1 minute).

watch.png
 
Last edited:
Joined
Jun 14, 2018
Messages
101
Reaction score
1
I have checked on https://coolvibes-reloaded.com

JavaScript:
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
        break;
        if ((hr === 21) { // 21:00 - 21:59 - 59 minutes - 0 hour
          dj.src = 'djimages/billy.jpg';
        break;
        if ((hr === 13) { // 13:00 - 13:59 - 59 minutes - 0 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        break;
      case 2: // Tuesday

the code above is incorrect

write like this
JavaScript:
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
     
        if ((hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';

        if ((hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';

        break;
      case 2: // Tuesday

13:00 and 13:59 it's like 00 + 59 = 60. Zero it's count too (as 1 minute).

View attachment 2574
it's past 21 but the image just ain't showing? why?
 
Last edited:
Joined
Jul 4, 2023
Messages
366
Reaction score
41
I have missed one "(" , sorry for that

JavaScript:
      case 1: // Monday
        if (hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
      
        if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';

        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';

        break;
      case 2: // Tuesday
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
I have missed one "(" , sorry for that

JavaScript:
      case 1: // Monday
        if (hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
     
        if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';

        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';

        break;
      case 2: // Tuesday
sorry but could you re-check my script please no images are showing up on the timings
there supposed to show up?

Code:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                            
          mn = nd.getMinutes();
   
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if ((hr === 8) { // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
       
        if ((hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
      dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';

        if ((hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';

        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/kayley.jpg';
          

          if ((hr === 13) { // 13:00 - 13:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Tuesday at 1 PM<br>Auto<br>With Bunny';
          
          if ((hr === 17) { // 17:00 - 17:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/off-air.jpg';
          

        if ((hr === 15) { // 15:00 - 15:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          
          if ((hr === 16) { // 16:00 - 16:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
          
        }
        break;
      case 5: // Friday
                if (hr === 13 || hr === 14) // 13:00 - 14:59 - 1 hours - 59 minutes
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        break;
      case 6: // Saturday
        if (hr === 2 && mn >=03) { // 2:03 - 2:59 - 56 minutes
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }
        break;
      case 0: // Sunday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }
        break;
      default:
        dj.src = 'djimages/strawbs.jpg';
        tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
like i said, my mistake, double opening parenthesis, this is incorrect

try this

JavaScript:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                          
          mn = nd.getMinutes();
 
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if (hr === 8) // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
     
        if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }

        if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';
        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/kayley.jpg';
         
        if (hr === 13) { // 13:00 - 13:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Tuesday at 1 PM<br>Auto<br>With Bunny';
        }
         
        if (hr === 17) // 17:00 - 17:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';        
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/off-air.jpg';        

        if (hr === 15) // 15:00 - 15:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';        
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
           
        if (hr === 16) { // 16:00 - 16:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }          
        break;
      case 5: // Friday
        if (hr === 13 || hr === 14) { // 13:00 - 14:59 - 1 hours - 59 minutes
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }          
        break;
      case 6: // Saturday
        if (hr === 2 || hr === 3) { // 2:00 - 3:59 - 2 hours
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }          
        break;
      case 0: // Sunday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }          
        break;
      default:
        dj.src = 'djimages/strawbs.jpg';
        tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
like i said, my mistake, double opening parenthesis, this is incorrect

try this

JavaScript:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                         
          mn = nd.getMinutes();
 
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if (hr === 8) // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
    
        if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }

        if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';
        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/kayley.jpg';
        
        if (hr === 13) { // 13:00 - 13:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Tuesday at 1 PM<br>Auto<br>With Bunny';
        }
        
        if (hr === 17) // 17:00 - 17:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';       
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/off-air.jpg';       

        if (hr === 15) // 15:00 - 15:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';       
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
          
        if (hr === 16) { // 16:00 - 16:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }         
        break;
      case 5: // Friday
        if (hr === 13 || hr === 14) { // 13:00 - 14:59 - 1 hours - 59 minutes
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }         
        break;
      case 6: // Saturday
        if (hr === 2 || hr === 3) { // 2:00 - 3:59 - 2 hours
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }         
        break;
      case 0: // Sunday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }         
        break;
      default:
        dj.src = 'djimages/strawbs.jpg';
        tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
rite, this script is very very wierd image is not changing, i'v tried refreshing my browser on laptop
still off air, tried my phones 2 browsers chrome and firefox still off-air what am i doing wrong?
 
Joined
Jun 14, 2018
Messages
101
Reaction score
1
like i said, my mistake, double opening parenthesis, this is incorrect

try this

JavaScript:
(function(d) {
  function onair() {
    const dj = d.querySelector('#dj'),
          tx = document.createElement('div'),
          nd = new Date(),
          dy = nd.getDay(),
          hr = nd.getHours(),                        
          mn = nd.getMinutes();
 
    tx.style.color = 'white';
    dj.insertAdjacentElement('afterend', tx);

    switch (dy) {
      case 1: // Monday
        if (hr === 8) // 8:00 - 8:59 - 60 minutes - 1 hour
          dj.src = 'djimages/kayley.jpg';
   
        if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }

        if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/billy.jpg';
        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/kayley.jpg';
       
        if (hr === 13) { // 13:00 - 13:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Tuesday at 1 PM<br>Auto<br>With Bunny';
        }
       
        if (hr === 17) // 17:00 - 17:59 - 59 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';      
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'djimages/off-air.jpg';      

        if (hr === 15) // 15:00 - 15:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';      
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
         
        if (hr === 16) { // 16:00 - 16:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Monday at 1 PM<br>Auto<br>With Bunny';
        }        
        break;
      case 5: // Friday
        if (hr === 13 || hr === 14) { // 13:00 - 14:59 - 1 hours - 59 minutes
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }        
        break;
      case 6: // Saturday
        if (hr === 2 || hr === 3) { // 2:00 - 3:59 - 2 hours
          dj.src = 'djimages/djbunny.jpg';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }        
        break;
      case 0: // Sunday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'djimages/strawbs.jpg';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }        
        break;
      default:
        dj.src = 'djimages/strawbs.jpg';
        tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
rite, this script is very very wierd image is not changing, i'v tried refreshing my browser on laptop
still off air, tried my phones 2 browsers chrome and firefox still off-air what am i doing wrong?
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
it's on my computer 17:37

and I see on you website (correct image)

djbunny.png


according to
JavaScript:
      case 2: // Tuesday
        ...
    
        if (hr === 17) // 17:00 - 17:59 - 60 minutes - 1 hour
          dj.src = 'djimages/djbunny.jpg';   
        break;
 
Last edited:
Joined
Jul 4, 2023
Messages
366
Reaction score
41
On your computer try to refresh your web page by pressing CTRL key and F5 in the same time (CTRL + F5)
 
Joined
Jul 4, 2023
Messages
366
Reaction score
41
Try this

JavaScript:
(function(d) {
    function onair() {
        const dj = d.querySelector('#dj'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),
            mn = nd.getMinutes();
        let txt = null;

        switch (dy) {
        case 1: // Monday
            if (hr === 8) // 8:00 - 8:59 - 60 minutes - 1 hour
                dj.src = 'djimages/kayley.jpg';

            if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
                dj.src = 'djimages/djbunny.jpg';
                txt = 'Monday at 1 PM<br>Auto<br>With Bunny';
            }

            if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
                dj.src = 'djimages/billy.jpg';
            break;
        case 2: // Tuesday
            if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
                dj.src = 'djimages/kayley.jpg';

            if (hr === 13) { // 13:00 - 13:59 - 60 minutes - 1 hour
                dj.src = 'djimages/djbunny.jpg';
                txt = 'Tuesday at 1 PM<br>Auto<br>With Bunny';
            }

            if (hr === 17) // 17:00 - 17:59 - 60 minutes - 1 hour
                dj.src = 'djimages/djbunny.jpg';
            break;
        case 3: // Wednesday
            if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
                dj.src = 'djimages/off-air.jpg';

            if (hr === 15) // 15:00 - 15:59 - 60 minutes - 1 hour
                dj.src = 'djimages/djbunny.jpg';
            break;
        case 4: // Thursday
            if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
                dj.src = 'djimages/strawbs.jpg';

            if (hr === 16) { // 16:00 - 16:59 - 60 minutes - 1 hour
                dj.src = 'djimages/djbunny.jpg';
                txt = 'Monday at 1 PM<br>Auto<br>With Bunny';
            }
            break;
        case 5: // Friday
            if (hr === 13 || hr === 14) { // 13:00 - 14:59 - 2 hours
                dj.src = 'djimages/djbunny.jpg';
                txt = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
            }
            break;
        case 6: // Saturday
            if (hr === 2 || hr === 3) { // 2:00 - 3:59 - 2 hours
                dj.src = 'djimages/djbunny.jpg';
                txt = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
            }
            break;
        case 0: // Sunday
            if (hr === 21) // 21:00 - 21:59 - 60 minutes - 1 hour
                dj.src = 'djimages/strawbs.jpg';
            break;
        default:
            dj.src = 'djimages/strawbs.jpg';
            break;
        }

        if (txt) {
            if (document.querySelector('#who-on-air-txt'))
                document.querySelector('#who-on-air-txt').innerHTML = txt;
            else {
                tx = document.createElement('div');
                tx.style.color = 'white';
                tx.id = 'who-on-air-txt';
                tx.innerHTML = txt;
                dj.insertAdjacentElement('afterend', tx);
            }
        }
    }

    setInterval(function() { onair(); }, 1000);
})(document);

don't forget after re-loaded file showdj.js use on your computer CTRL+F5 ;)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,770
Messages
2,569,586
Members
45,085
Latest member
cryptooseoagencies

Latest Threads

Top