Member Avatar for daniel.conlinjr.1

Is there a sleep function for so many seconds in HTML or am I gonna have to use JavaScript

Edited by pritaeas because: Moved to HTML.
  • 5 Contributors
  • 6 Replies
  • 3K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Nmalik1

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

HTML is a markup language, and does not include commands. So yes, you'll have to use Javascript.

Member Avatar for stbuchok

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?

Member Avatar for JorgeM

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.

Member Avatar for daniel.conlinjr.1

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.

Member Avatar for JorgeM

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
Member Avatar for Nmalik1

I think you should go for PHP, I don't think, that there is any option in HTML .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.