5
Contributors
6
Replies
23
Views
4 Years
Discussion Span
Last Post by Nmalik1
0

Typically this is done using setTimeout or setInterval in javascript (some people try to roll there own for some reason).

Can you explain the need for it?

0

It appears that this new thread is a continuation of the "Hiding div with php" topic.

If you can be more specific as to exactly what you are trying to accomplish, you'll get better guidance.

0

i am trying to do a website for my robotics team and they are doing a on demand website for the replays of the events, but i'm trying to make it to where i mouse over the div it will display and then on mouse out the div will show for 5 seconds and then display none. hoped that helped any one that was confused.

0

So even though you downvoted my response and gave negative reputation in the other thread which is fine, I'm still suggesting a javascript or jQuery approach incorporating the setTimeOut() method.

In your description, I'm sorry but it doesnt make complete sense to me because I'm not sure if your target Divs are being displayed or not. Your sample code suggests that the div is already being displayed. From what I gather from your responses in these two threads is you simply want to hide the div after the mouse leaves the div you just hovered over, but after 5 seconds.

Here is an example that does just that. There are two divs in the example and when you mouseover, then mouseout, the div your mouse hovered over and hovered out will disappear after 5 seconds. I am sure that you can use this example and adapt it to your needs. I provided the example with two divs and a technique using javascript and another using jQuery.

<!DOCTYPE html>
<html>
<head>
 <title>Demo</title>
<style>
  div {color:#fff;width:500px; height:100px;padding:25px;}
  .test1 { background-color: blue;}
  .test2 { background-color: red;}
</style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

</head>
<body>

<div class="test1">
    <p>Div1</p>
</div>
<div class="test2" onmouseout="hideMe(this)">
    <p>Div2</p>
</div>

 <script>

$(".test1").mouseleave(function() {
    setTimeout(function(){$(".test1").hide();},5000);
});


function hideMe(x) {
    setTimeout(function(){x.style.display = 'none';},5000);
}
</script>

</body>
</html>

If this is not the behaviour you are looking for, feel free to provide additional clarification and/or feedback.

Edited by JorgeM

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.