On-air script

S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
I know I've got this rite but could someone please
check it over for me please

JavaScript: 
(function( d ) {
   'use strict';
function onair(){
 
   var dj = d.querySelector('#dj'),
       nd = new Date(),
       dy = nd.getDay(),
       hr = nd.getHours(),                                 
       mn = nd.getMinutes();
else {
if(( dy === 1 && hr === 21 && mn <=00 )||
   ( dy === 1 && hr === 8 && mn <=15 )) {
     dj.src='images/billy.png';
 }
 else {
if(( dy === 2 && hr === 8 && mn <=00 )||
   ( dy === 2 && hr === 8 && mn <=15 )) {
     dj.src='images/kayley.png';
 }
 else {
if(( dy === 3 && hr === 8 && mn <=00 )||
   ( dy === 3 && hr === 8 && mn <=15 )) {
     dj.src='images/off-air.png';
 }
if ( dy === 4 && hr === 21 && mn <=12 ) {
     'Thursday at 9 PM<br>Request<br>With Strawbs'dj.src='images/strawbs.png';
 }
else {
if(( dy === 5 && hr === 13 && mn <=59 )||
   ( dy === 5 && hr === 14 && mn <=59 )) {
     'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
 }
else {
if(( dy === 6 && hr === 8 && mn <=14 )||
   ( dy === 6 && hr === 9 && mn <=15 )) {
     'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
 }
if
   ( dy === 7 && hr === 21 && mn <=00 )) {
     'Sundayday at 9 PM<br>Request<br>with Strawbs'dj.src='images/strawbs.png';
 }
 
else {
     dj.src='images/off-air.png';
 
    }
   }
  }
 }

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

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
Check this

HTML: 
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                 
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
    
    setInterval(function() { onair(); }, 1000);
  })(document); 
</script>
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
Check this

HTML: 
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                 
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
    
    setInterval(function() { onair(); }, 1000);
  })(document); 
</script>
Click to expand...
Thank you I'll update my js file
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
Check this

HTML: 
<img id="dj">
<div id="txt"></div>

<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                                
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
   
    setInterval(function() { onair(); }, 1000);
  })(document);
</script>
Click to expand...
you've given me html NOT js i wanted someone to check see if had my js rite?
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
JavaScript: 
(function(d) {
    function onair() {
      const dj = d.querySelector('#dj'), // <img id="dj">
            tx = d.querySelector('#txt'), // <div id="txt"></div>
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                            
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);

this html code only for demo purpose

HTML: 
<img id="dj">
<div id="txt"></div>
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
JavaScript: 
(function(d) {
    function onair() {
      const dj = d.querySelector('#dj'), // <img id="dj">
            tx = d.querySelector('#txt'), // <div id="txt"></div>
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                           
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=12) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=59) {
            dj.src = 'images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);

this html code only for demo purpose

HTML: 
<img id="dj">
<div id="txt"></div>
Click to expand...
this script isn't working as you see over here https://coolvibes-reloaded.com where it says off-air
the script isn't working


Code: 
<script>
  (function(d) {
    function onair() {
      const dj = d.querySelector('#dj'),
            tx = d.querySelector('#txt'),
            nd = new Date(),
            dy = nd.getDay(),
            hr = nd.getHours(),                               
            mn = nd.getMinutes();

      switch (dy) {
        case 1: // Monday
          if ((hr === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn <=00) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn <=00) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
  
    setInterval(function() { onair(); }, 1000);
  })(document);
</script>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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 === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
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 === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 8 && mn <=14) || (hr === 9 && mn <=15))
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);
Click to expand...
can i just ask, when it says if ((hr === 10 && mn <=00) || (hr === 23 && mn <=59)) 10:00 23:59 is that from 10am till 11:59?
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
00 meaning 0 any way ;)
Click to expand...
ok so the txt isn't showing up as of who's on air

see here
JavaScript: 
}
          break;
        case 5: // Friday
          if ((hr === 10 && mn <=0) || (hr === 23 && mn <=0))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
VBService said:
10am to 11:59pm (from 10 morning to midnight minus one minute)
Click to expand...
My mistake, it's late and my brain works slowly ;)

strawbs said:
((hr === 10 && mn <=0) || (hr === 23 && mn <=0))
Click to expand...
this === meaning exactly 10

for from10:00am to 23:59pm should be
JavaScript: 
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript: 
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
 
Last edited:
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
My mistake, it's late and my brain works slowly ;)


this === meaning exactly 10
for from10:00am to 23:59pm should be

JavaScript: 
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript: 
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
Click to expand...
rite i'v copied and pasted
case 5: // Friday
if (hr >= 10 && hr <= 23)
tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
break;
 
S

strawbs

Joined
Jun 14, 2018
Messages
101
Reaction score
1
VBService said:
My mistake, it's late and my brain works slowly ;)


this === meaning exactly 10

for from10:00am to 23:59pm should be
JavaScript: 
if (hr >= 10 && hr <= 23)

actually, minutes are irrelevant, because
10:00, 10:01, 10:10 still meaning hr is 10
23:00, 23:02, 23:59 still meaning hr is 23

JavaScript: 
        case 5: // Friday
          if (hr >= 10 && hr <= 23)
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
Click to expand...
why isn't this script working?


html

Code: 
<!DOCTYPE HTML>
<html lang="en">
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>Who is on air</title>

  <link rel="stylesheet" href="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/css/screen.css" media="screen">

</head>

<body>

  <noscript>
    <p>JavaScipt need to be enabled for this page to function correctly</p>
  </noscript>

  <h1>Who is on air</h1>

  <img id="dj" src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png" alt="Off-line">

  <script src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/scripts/showdj.js"></script>

</body>

</html>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

CSS:

Code: 
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
 noscript {
    font-weight: bold;
    text-align: center;
 }
 h1{
    text-align: center;
    color: white;
 }
#dj {
   display: block;
   width: 100%;
   max-width: 30em;
   height: auto;
   margin: auto;
   border:  1px solid #000;
   box-shadow: 0.4em 0.4em 0.4em rgba(0, 0, 0, 0.3);
 }
 #dj[src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }
 @keyframes fade {
  0% { opacity: 1; 
       border-radius: 0;
       max-width: 30em;
     }
 50% { opacity: 0.2;
       border-radius: 50%;
       max-width: 20em;
     }
100% { opacity: 1;
       border-radius: 0;
       max-width: 30em;
     }
 }

finally showdj.js

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 === 21 && mn <=59) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/billy.png';
          break;
        case 2: // Tuesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/kayley.png';
          break;
        case 3: // Wednesday
          if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png';
          break;
        case 4: // Thursday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
          }
          break;
        case 5: // Friday
          if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
            tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 6: // Saturday
          if ((hr === 2 && mn <=03) {
            https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/off-air.png'
            tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
          break;
        case 0: // Sunday
          if (hr === 21 && mn >=0) {
            dj.src = 'https://github.com/strawbs1989/coolvibes-reloaded/tree/main/images/strawbs.png';
            tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
          }
          break;
        default:
          dj.src='images/off-air.png';
          break;
      }
    }
 
    setInterval(function() { onair(); }, 1000);
  })(document);


this is what i'm seeing in black and no image

Who is on air
Off-line


sorry if i'm a pain lol but i have looked all over the dam script

website: https://coolvibes-reloaded.com
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
strawbs said:
</body> </html> <!-- partial --> <script src="./script.js"></script> </body> </html>
Click to expand...
You have </body></html> before <script> and again </body> </html>

See the difference
HTML: 
<!DOCTYPE HTML>
<html lang="en">
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>Who is on air</title>
    <link rel="stylesheet" href="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/css/screen.css" media="screen">
  </head>
  <body>
    <noscript>
      <p>JavaScipt need to be enabled for this page to function correctly</p>
    </noscript>

    <h1>Who is on air</h1>
    <img id="dj" src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png" alt="Off-line">
    <script src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/scripts/showdj.js"></script>
    <!-- partial -->
    <script  src="./script.js"></script>
  </body>
</html>

according to this

[attribute^=value]a[href^="https"]Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]a[href$=".pdf"]Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]a[href*="w3schools"]Selects every <a> element whose href attribute value contains the substring "w3schools"

you can change this
CSS: 
 #dj[src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/images/off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }

to this
CSS: 
 #dj[src$="off-air.png"] {
   animation: fade  4s ease-in-out infinite;
 }

another ... this meaning
JavaScript: 
case 6: // Saturday
  if ((hr === 2 && mn <=03)

only 2:00am, 2:01am, 2:02am, 2:03am. hr exactly 2 (===) and minutes in range from 0 to 3
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
strawbs said:
<script src="https://github.com/strawbs1989/coolvibes-reloaded/blob/main/scripts/showdj.js"></script>
Click to expand...
and the javascript code form the link above looks like 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 && mn <=0) {
          dj.src = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
        break;
      case 2: // Tuesday
        if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
          dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
        break;
      case 3: // Wednesday
        if ((hr === 8 && mn >=0) || (hr === 8 && mn <=15))
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
      case 4: // Thursday
        if (hr === 21 && mn >=0) {
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
        break;
      case 5: // Friday
        if ((hr === 13 && mn <=59) || (hr === 14 && mn <=59))
          tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
        break;
      case 6: // Saturday
        if ((hr === 2 && mn <=03)) {
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
          tx.innerHTML = 'Saturday at 8 AM<br>Christian Music<br>with Dj Bunny';
        }
        break;
      case 0: // Sunday
        if (hr === 21 && mn >=0) {
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }
        break;
      default:
        dj.src='https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
    }
  }

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

this meaning only 8:00am - 1 minute only till 8:01am
JavaScript: 
case 1: // Monday
  if ((hr === 8 && mn <=0)

if mn should be 0 (zero) just left only hr
JavaScript: 
if (hr === 8)

that meanig 8:00am, 8:01am, 8:02am, ... 8:10am, 8:11am, ...8:30am, ..., 8:45am, ..., 8:58am and 8:59am - 1 hour


My proposed changes to the code
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 = 'https://drive.google.com/file/d/1K6Ki9fxFxVo3UBlA0fjPzLv6D_EpKwIX/view?usp=drive_link';
        break;
      case 2: // Tuesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'https://drive.google.com/file/d/17QW0zuz_PDgUZgXvCz7ybvK9acYraK4K/view?usp=drive_link';
        break;
      case 3: // Wednesday
        if (hr === 8 && (mn >= 0 && mn <= 15)) // 8:00 - 8:15 - 15 minutes
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
      case 4: // Thursday
        if (hr === 21) { // 21:00 - 21:59 - 60 minutes - 1 hour
          dj.src = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Thursday at 9 PM<br>Request<br>With Strawbs';
        }
        break;
      case 5: // Friday
                if (hr === 13 || hr === 14) // 13:00 - 14:59 - 2 hours
          tx.innerHTML = 'Friday at 10 AM<br>Christian Music<br>with Dj Bunny';
        break;
      case 6: // Saturday
        if (hr === 2 && mn >=03) { // 2:03 - 2:59 - 57 minutes
          dj.src = 'https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
          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 = 'https://drive.google.com/file/d/1SaYUrmEwalwxXwygXP0ZthYLKW7aji_H/view?usp=drive_link';
          tx.innerHTML = 'Sunday at 9 PM<br>Request<br>with Strawbs';
        }
        break;
      default:
        dj.src='https://drive.google.com/file/d/1D77ONt7JnNX1rTpNZd6lLYzfTCrXEAcJ/view?usp=drive_link';
        break;
    }
  }

  setInterval(function() { onair(); }, 1000);
})(document);
 
Last edited:
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
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
 

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

Similar Threads

On-air script 0
Help with code 0
Help with my responsive home page 2
Help me sort out this script 1
Working on mobile css menu with plenty of frustration! 2
Very Basic CC Validation Javascript 0
MemoryError in data conversion 10
Is there any difference of g++ 3.4.3 and g++ 3.3.4 ? 2

Members online

Total: 33 (members: 3, guests: 30)
Robots: 366

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,072
Latest member
trafficcone

Latest Threads

Top