What is the best way to make a div that fades away after a set period, but remains visible when hovered over?

Question

What is the best way to make a div that fades away after a set period, but remains visible when hovered over?

I am currently working on implementing a notification system that will appear for a few seconds and then vanish. However, I want to give users the option to hover over it with their mouse to prevent it from disappearing. It would also be nice to have the notification disappear on click, although that is not mandatory. I am unsure of how to make the hover functionality in HTML interact with embedded Ruby to halt the timeout. It may require a restructuring of the code to achieve this. Below are snippets of relevant CSS, HTML, and ERB code (not executable):

setTimeout(function() {
  $('#alert_box').fadeOut('fast');
}, 3000);

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  justify-self: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<% unless notice == nil %>
<div id="alert_box" class="alert_wrap">
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</div>
<% end %>

html css ruby-on-rails embedded-ruby

Answer 1

Answer №1

let myTimer = setTimeout("myTimerFunction()", 3000);
$('#alert_box').mouseout( function () {
  myTimer = setTimeout("myTimerFunction()", 3000)
});

$('#alert_box').mouseover( function () {
  clearTimeout(myTimer);
});

let myTimerFunction = function () {
  $('#alert_box').fadeOut('fast');
}

// On click, fadeout
$("#close").click(myTimerFunction);

.alert_wrap {
padding: 0px 50px;
margin-top: 3px;
height: 5%;
background-color: rgba(255, 0, 0, .3);
border: 3px solid red;
grid-row-start: 2;
justify-self: center;
}
#alert_box {
  position: relative;
}
#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert_box" class="alert_wrap">
<p class="notice">This is notice text</p>
<p class="alert">This is alert text</p>
    <span id="close">X</span>
</div>

For the initial step, you can utilize the setTimeout function, and then upon mouseover or hover event, you can cancel the timeout function by using clearTimeout. This will prevent the fadeout from occurring.

When the mouse is moved away, you can set a new setTimeout to begin counting for 3 seconds again.

Furthermore, since you mentioned a click event, I included a close button that, upon clicking, immediately triggers the timeout function.

Answer 2

let myTimer = setTimeout("myTimerFunction()", 3000);
$('#alert_box').mouseout( function () {
  myTimer = setTimeout("myTimerFunction()", 3000)
});

$('#alert_box').mouseover( function () {
  clearTimeout(myTimer);
});

let myTimerFunction = function () {
  $('#alert_box').fadeOut('fast');
}

// On click, fadeout
$("#close").click(myTimerFunction);

.alert_wrap {
padding: 0px 50px;
margin-top: 3px;
height: 5%;
background-color: rgba(255, 0, 0, .3);
border: 3px solid red;
grid-row-start: 2;
justify-self: center;
}
#alert_box {
  position: relative;
}
#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert_box" class="alert_wrap">
<p class="notice">This is notice text</p>
<p class="alert">This is alert text</p>
    <span id="close">X</span>
</div>

For the initial step, you can utilize the setTimeout function, and then upon mouseover or hover event, you can cancel the timeout function by using clearTimeout. This will prevent the fadeout from occurring.

When the mouse is moved away, you can set a new setTimeout to begin counting for 3 seconds again.

Furthermore, since you mentioned a click event, I included a close button that, upon clicking, immediately triggers the timeout function.

Answer 3

Answer №2

If you want to add some flair to your alert messages, try using CSS animations:

.notification_box {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  animation: shake-alert 4s linear none;
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes shake-alert {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
}

.notification_box:hover {
  opacity: 1;
}

<div class="notification_box">
  <p>You've got mail!</p>
</div>

Answer 4

If you want to add some flair to your alert messages, try using CSS animations:

.notification_box {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  animation: shake-alert 4s linear none;
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes shake-alert {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
}

.notification_box:hover {
  opacity: 1;
}

<div class="notification_box">
  <p>You've got mail!</p>
</div>

Answer 5

Answer №3

This approach could be an alternative solution, although personally I prefer incorporating CSS transitions (especially utilizing the :not(:hover) pseudo selector).

const timer = setInterval(hideElement, 100); // interval function

function hideElement() {
  if ($('.notification_box:not(:hover)').length) { // check if the notification box is visible and not being hovered
    setTimeout(function() { // after 3 seconds
      if ($('.notification_box:not(:hover)').length) { // if still not hovered
        $('.notification_box:not(:hover)').fadeOut('fast');
        clearInterval(timer);
        handler = 0;
      }
    }, 3000);    
  }
}

Answer 6

This approach could be an alternative solution, although personally I prefer incorporating CSS transitions (especially utilizing the :not(:hover) pseudo selector).

const timer = setInterval(hideElement, 100); // interval function

function hideElement() {
  if ($('.notification_box:not(:hover)').length) { // check if the notification box is visible and not being hovered
    setTimeout(function() { // after 3 seconds
      if ($('.notification_box:not(:hover)').length) { // if still not hovered
        $('.notification_box:not(:hover)').fadeOut('fast');
        clearInterval(timer);
        handler = 0;
      }
    }, 3000);    
  }
}

What is the best way to make a div that fades away after a set period, but remains visible when hovered over?

Answer №1

Answer №2

Answer №3

Similar questions

Experimenting with HTML and CSS to enhance email presentation

Issues have been encountered with the Angular Bootstrap accordion animation not functioning properly when closing in a production

I am completely baffled as to the origin of this mysterious stylesheet in my Wordpress PHP code

Capybara's visit function is inexplicably frozen

CSS - selecting elements that are greater than a specific criteria N

Issue with JavaScript ScrollTop

The issue of excessive body overflow arises upon opening multiple modals successively

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

HTML: Attempting to extract the inner div from the outer div and relocate it outside of the outer div

How can I integrate checkboxes in a list view with jQuery Mobile?

Switching effortlessly between Fixed and Relative positioning

What is the most efficient way to transform HTML into React components effortlessly?

Leverage jQuery to retrieve information and fill in an HTML form

Tips for centering text inside a div using a separator

What are some ways I can enhance the typography within Material UI?

Managing field placement as the table height grows: tips and tricks

Create a unique margin using CSS only that will appear at the bottom of a flex-row container that scrolls

Create a dialog box with rounded triangle corners

What is the best way to incorporate several functions within a resize function?

Altering the ASP DropDownList's background color solely with CSS modifications