JavaScript -Change CSS Color for 5 Seconds

Display correct banner and color for 3 seconds after clicking right answer then hidding them forever

giving the same id to multiple elements is not the right way. add a class wrong (or any suitable class) for the wrong answers and right for the right answer to the buttons.

then add an eventLinsterner to each wrong buttons element using querySelectorAll with forEach to toggle the hide class of the banner. Then add a setTimeout function to hide the banner after the specific amount.
Same with the right button. the right button will only need querySelector to add the eventListener.

Here is the working example...

document.querySelectorAll(".incorrect").forEach((element) => {
  element.addEventListener("click", (e) => {
    document.getElementById("veredict_2").classList.toggle("hide");
    setTimeout(hideBanners, 3000);
  });
});

document.querySelector(".correct").addEventListener("click", (e) => {
  document.getElementById("veredict").classList.toggle("hide");
  setTimeout(hideBanners, 3000);
});

const hideBanners = (e) => {
  document.getElementById("veredict").classList.add("hide");
  document.getElementById("veredict_2").classList.add("hide");
};

.hide {
  display: none;
}

.banner {
  position: absolute;
  top: 10px;
  left: 40%;
  color: #fff;
  padding: 15px;
}

.banner.right {
  background-color: green;
}

.banner.wrong {
  background-color: red;
}

<h2>Part 1: Multiple Choice </h2>
<hr>

<h3> Which is the most expensive car in the world?</h3>

**<p id="veredict" class="hide banner right"> CORRECT!</p>**
<p id="veredict_2" class="hide banner wrong"> INCORRECT!</p>

**<button class="correct main_butt opt1"> Bugatti La Voiture Noire</button>**

<button class="incorrect main_butt opt2"> Pagani Zonda HP Barchetta</button>

<button class="incorrect main_butt opt3"> Rolls Royce Sweptail</button>

<button class="incorrect main_butt opt4"> Lamborghini Veneno Roadster</button>

Delay text from displaying and fading in the background-color

You can use setTimeout to call the fadeIn function after a specified amount of time after the document has loaded, fadeIn accepts a callback parameter, so you can set another function to animate the background color.

$(document).ready(function() { 
    setTimeout(function() { $('#alert-box').fadeIn('slow', 
                 function() { $('#alert-box').animate(
                                 {backgroundColor: "rgb(255,00,00)"},1500); 
                 })}, 
     5000)});

That should do what you want.Though I haven't verified it.

You'll also need the jQuery Color plugin.

http://plugins.jquery.com/project/color

EDIT: This is the same things but with pulsing animation added in.

$(document).ready(function() { 
    setTimeout(function() { $('#alert-box').fadeIn('slow', 
                 function() { $('#alert-box').animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,255,255)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,255,255)"}, {duration: "slow"})
                        .animate({backgroundColor: "rgb(255,0,0)"}, {duration: "slow"});; 
                 })}, 5000)});

How can I color text with a gradient color which adapts with the screen size and continues the color on the new line?

Just add a display : inline, and a few red :

.text {  display: inline;  background: linear-gradient(to right, #000 0%, blue 25%, #000 50%, red 75%, #000 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  font-size: 3vw;  font-family: "Poppins", sans-serif;}

<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, quo consectetur similique blanditiis explicabo dolorum quam voluptate, accusamus repellat sed ipsam doloribus facere quas perspiciatis veritatis ad dicta. Tenetur, vero?</p>

Button click makes a div popup and after 5 seconds it closes itselfs

For applying css property use inline css:
Every 5 sec open the new window show the content then it will close itself.

Try this code:

<html>
<head>
</head>
<script>
function popUpFunc() {

    setInterval(function () {
       var myWindow = window.open("", "_blank", "width=200,height=100");
       myWindow.document.write("<div style=' border: 2px black solid;background-color: blue;width: 200px;height: 200px;'>This is MsgWindow</div>")
        setTimeout(function(){
         myWindow.close();
        },1000)

    }, 5000)
}
</script>

<body>
    <input type="button" value="popup" onclick="popUpFunc()" />
</body>
</html>

how to blur background for few seconds using JavaScript?

    <HTML>
   <head>
      <title>Calculation</title>
   </head>
   <body>
      <form id="form">
         PE Ratio
         <input type="number"  id="PE" /><br>
         ROCE
         <input type="number" id="ROCE" /><br>
         Sales Growth
         <input type="number" id="SG" /> <br>
         <input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;"    onsubmit="return false"  onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))">
         <p>Rating: </p>
         <div id="div1">
            <strong><output name="amount" for="hours rate vat">0</output></strong>
         </div>
      </form>
      <button onclick="blurMe()">Blur!</button>
   </body>
   <script>
      function blurMe() {
        var element = document.getElementById("form");
        element.classList.add("blur");
          setTimeout(function() {
            element.classList.remove("blur");
          }, 5000);
      }
   </script>
   <style>
      .blur {
      filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      }
   </style>
</HTML>

This should be enough to get you started, to make it obvious I'm blurring the whole form.

When you click on the 'Blur!' button, it will call the script 'blurMe()'. This uses the 'setTimeout' function to pause for 5 seconds, with the script that actually performs the blur as a callback. The blur happens by adding the style 'blur' you have created to the form. CSS will then pick this up and style appropriately. If you inspect element on the page, click the button, you will see the class being added.

Hope this helps

Make hidden element appear for X seconds

Try to use setTimeout() at this context,

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

Since .delay() can delay the animation queue only.

DEMO

And if you don't want to use an arrow function to do that, then you could simply use normal anonymous function like below,

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);

Show element for a second, then hide it

Using setTimeout is not tidy - it is better to listen to the animation end event and remove the show class. I have also used animation to show and hide the element successively - see demo below:

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.remove('show');
  // this force-restarts the CSS animation
  void elem.offsetWidth;
  elem.classList.add('show');
});

elem.addEventListener("animationend", function(){
  elem.classList.remove('show');
}, false);

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
}
#elem.show {
  animation: anime 1s 1;
}
@keyframes anime {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<button id="btn">Press Me</button>
<div id="elem"></div>

How to remove a dynamic css after few seconds such that the component is not blocked till that time period

You can use setTimeout for this.

So in your case, your removeStyle() method would look like:

removeStyle() {
  // after 5 seconds
  setTimeout(() => this.applyStyle = false, 5000);
}

How to show an image and hide it after 5 seconds?

Make use of setTimeout().

Edit: I realize, isn't this a bit fake? Shouldn't you hide a load.gif when the loading task is actually finished? Using them for decoration only makes no sense.

jQuery setInterval by 5 seconds and Increment by previous interval

I think setInterval() is not the right tool. I'd go with setTimeout(), with an event that fires when the modal is closed and a global counter that doubles its value each time you close the previous modal.

let counter = 5000;

function repeatTimeout(ms) {
  console.log('counter is: ' + ms);
  return setTimeout(function() {
    $('#ex1').modal();
    counter *= 2;
  }, ms);
}

$(document).ready(function() {
  let timer = repeatTimeout(counter);

  $('#ex1').on($.modal.AFTER_CLOSE, function() {
    console.clear();
    console.log('closed modal');
    clearTimeout(timer);
    timer = repeatTimeout(counter);
  })
});

.modal {
  max-width: 70% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div id="ex1" class="modal">
  <a href="https://example.com">
    <img alt="image" src="https://example.com/image.png" />
  </a>
</div>

---

Related Topics