I have a test code like this:
<html>
<head>
<style>
.jeden {
display: none;
color: red;
height: 0px;
}
.dwa {
display: block;
}
.trzy {
color: blue;
opacity: 0.5;
transition: all 2s;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<p class="jeden"> Wczoraj </p>
<button>ddd</button>
<span id="hej">hej</span>
<script>
function dodaj(callback) {
document.getElementsByTagName("p")[0].classList.add("dwa");
alert(1);
alert(2);
callback();
}
function dodajKlase() {
document.getElementsByTagName("p")[0].classList.add("trzy");
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
dodaj(dodajKlase)
})
</script>
</body>
</html>
which I'm playing with, cause I don't understand a certain mechanism. In the above code the transition in trzy class works fine. But if I delete alert(1) and alert(2) the transition doesn't work.
Generaly, I'm trying to solve an issue:
Add a class with a display: block to an element - element appears,
Then add a class with transitions via callback function.
but this model doesn't work (I'm not quite sure I understand callback functions correctly in that case).
You should force a browser redraw in your dodaj function, there are several ways to do it, one would be: element.getBoundingClientRect()
Read more about it here: gist
<html>
<head>
<style>
.jeden {
display: none;
color: red;
height: 0px;
}
.dwa {
display: block;
}
.trzy {
color: blue;
opacity: 0.5;
transition: all 2s;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<p class="jeden"> Wczoraj </p>
<button>ddd</button>
<span id="hej">hej</span>
<script>
function dodaj(callback) {
var element = document.querySelector("p.jeden");
element.classList.add("dwa");
element.getBoundingClientRect();
callback();
}
function dodajKlase() {
document.getElementsByTagName("p")[0].classList.add("trzy");
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
dodaj(dodajKlase)
})
</script>
</body>
</html>
Little side note: You should force yourself to code in english, so other people can understand your function and variable names.
Wrap the callback into a setTimeout() and it works.
function dodaj(callback) {
document.getElementsByTagName("p")[0].classList.add("dwa");
setTimeout(callback, 100);
}
Related
this is my first question so forgive me if I don't apply the correct etiquette.
I have a javascript function that hides a div with a fade.
function fadeOut(cloudChatHide)
{
"use strict";
cloudChatHide.onclick = function()
{
if(cloudChatHide.className)
{
cloudChatHide.className = '';
}
else
{
cloudChatHide.className = 'fadeout';
RemoveCloudChat();
}
};
}
However this code doesn't remove the DIV which is the RemoveCloudChat Function. Which looks like this:-
function RemoveCloudChat()
{
"use strict";
cloudChatHide.remove();
cloudChatHide.className ='fadeout';
}
What I really want to do is fade the div automatically after a few seconds and then REMOVE it.
The reason I need to REMOVE the div from the window is that its an overlaid div and I need to access the content underneath the 'cloudChatHide' div.
Any help / instruction wouild be gratefully received as I am not the greatest Javascript developer.
Thanks.
You can use CSS transitions to smoothly fade out the element and listen for the transitionend event to remove the element when the transition has finished.
See this jsFiddle.
The transition is defined with this CSS:
div {
opacity: 1;
transition: opacity 1s;
}
div.fade-out {
opacity: 0;
}
As soon as you add the fade-out class to a div it will smoothly reduce its opacity over a period of 1 second. This can be done with the following JavaScript, no jQuery required:
function fadeOutAndRemove(element) {
element.classList.add('fade-out');
element.addEventListener('transitionend', function () {
element.parentNode.removeChild(element);
});
}
If you want to start the fadeout transition automatically after a fixed delay you could call fadeOutAndRemove after a timeout
window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)
or add a delay to the transition
transition: opacity 1s 3s;
and initalise the element with the fade-out class
<div class="fade-out"></div>
If you could use JQuery, it will really simple, see following:
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div>
</body>
<script>
function fadeOut()
{
$(".fadeout").fadeToggle(500, "swing",function(){
this.remove();
});
}
var delay = 3000; //3 seconds
setTimeout(fadeOut, delay);
</script>
</html>
When the fade action is completed the div will be removed.
I hope it helps you, bye.
Brilliant result from Alessandro Maglioccola
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div>
</body>
<script>
function fadeOut()
{
$(".fadeout").fadeToggle(500, "swing",function(){
this.remove();
});
}
var delay = 3000; //3 seconds
setTimeout(fadeOut, delay);
</script>
</html>
Here's a way to do it without Jquery. I'm setting the opacity to 0 waiting 300ms using a setTimeout then do the reverse if it's already hidden.
hideMe = function(selector, self) {
var elem = document.querySelector(selector);
if (self.innerHTML == "Hide") {
elem.classList.add("fade");
setTimeout(function() {
elem.classList.add("hidden");
self.innerHTML = "Show";
}, 300)
} else {
elem.classList.remove("hidden");
setTimeout(function() {
elem.classList.remove("fade");
self.innerHTML = "Hide";
}, 300)
}
}
body {
margin: 0;
}
.header {
height: 100px;
width: 100%;
background: steelblue;
}
#vanish {
transition: all 300ms cubic-bezier(.25, .8, .25, 1);
}
.redsquare {
width: 100%;
height: 225px;
background: tomato;
opacity: 1;
}
.hidden {
height: 0px;
width: 0px;
}
.fade {
opacity: 0;
}
button {
width: 100%;
height: 25px;
border: 0px;
outline: none;
cursor: pointer;
}
<div class="header"></div>
<button onclick='hideMe("#vanish",this)'>Hide</button>
<div id="vanish" class="redsquare"></div>
<div class="header"></div>
I'm running into an issue where I am attempting to get inline-block elements to display: none on page load, but then I want them to fadeIn one by one in their original inline-block form. However, when I do a normal jQuery fadeIn the elements display as block.
My jQuery is like this right now:
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500);
$('.fadeBlock2').delay(400).fadeIn(500);
};
CSS
.dark-blue-box, .light-blue-box {
height: 50%;
width: 25%;
display: inline-block;
/*display: none; ********I replaced the inline-block with this.
vertical-align: top;
padding: 0;
margin: 0;
transition: all .8s ease-in-out;
}
Is there something I can do to the jQuery to get these to fadeIn as inline-block elements?
You can try this,
$(document).ready(function(e) {
$('.fadeBlock').css('display','none');
blueBoxDelays();
function blueBoxDelays(){
var delay = 0;
$('.fadeBlock').each(function(i){
$(this).delay(400+delay).fadeIn(1000);
delay = 400*(i+1);
});
};
});
.fadeBlock {
height: 100px;
width: 100px;
display: inline-block;
}
.dark-blue-box{
background-color: blue;
}
.light-blue-box{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
DEMO
Note:
Remove the opacity from .dark-blue-box, .light-blue-box
you could achieve the desired result by using opacity with transition property.
initially it'd be
.fadeBlock1 {
opacity:0;
transition: all 0.5s ease-in-out;
}
$('.fadeBlock1').css('opacity','1');
Do you want something like this??
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.dark-blue-box{
display:inline-block;
border:1px solid #19248c;
background-color:#19248c;
height:50px;
width:50px;
}
.light-blue-box{
display:inline-block;
border:1px solid #6699cc;
background-color:#6699cc;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div class='dark-blue-box'>
</div>
<div class='light-blue-box'>
</div>
<script>
$(document).ready(function(e) {
$('.dark-blue-box').css('display','none');
$('.light-blue-box').css('display','none');
boxFadeIn();
});
function boxFadeIn(){
$('.dark-blue-box')
.delay(200)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
$('.light-blue-box')
.delay(400)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
}
</script>
</body>
</html>
try this one
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500).css('display','inline-block');
$('.fadeBlock2').delay(400).fadeIn(500).css('display','inline-block');
};
I'm trying to create a simple 2-D game in Javascript. I'm going to use jQuery to do some animations.
There will be buttons that a player will use to call various functions (Move up/down/left/right, Attack, Defend, etc).
A movement() function will call a secondary function, animateCharacter(), to handle the movement of an image object on screen.
The problem I'm having is that the next command in the movement() function executes before the animateCharacter() function has finished.
I tried to add a callback function, but that didn't fix the situation. I've tried many other things -- setInterval, setTimeout, .delay, etc. Nothing seems to fix this situation. What am I not doing, or what am I doing wrong?
Here's a simplified example of the problem....
What I'm expecting to happen is the user hits [Move the Block], the image of a yellow face moves a bit to the right; then the mainContainer turns into "hello", and then turns into "goodbye."
But what happens instead is: The user hits [Move the Block], the mainContainer immediate says "goodbye", then the animation is never visible, but when the animation finishes, the mainContainer turns into "hello."
If I comment out the final command, the animation is seen and the mainContainer turns into "hello," as expected; but then I don't get to do the that final line of code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<script>
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, function () { callbackSent();});
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("mainContainer").innerHTML = "goodbye";
}
</script>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Try This.
Moved document.getElementById("mainContainer").innerHTML = "goodbye"; to the setTimeout function, that will execute after Hello is printed in the div.
Your code was executing like:
Animate the box with 1500 miliseconds - Animation starts
Change main content to goodBye without waiting for animation completion - Right after animation start
Animation got Completed, so change content to Hello - Animation Completes, though the user never saw it.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello";
setTimeout(function(){document.getElementById("mainContainer").innerHTML = "goodbye"; },1000);
};
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Your code does what it is told at the moment. You need to introduce a delay before showing goodbye.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({
left: "+=50"
}, 1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
animateCharacter(function () {
$("#mainContainer").html("hello");
setTimeout(function () {
$("#mainContainer").html("Goodbye");
}, 3000);
});
}
$('#pushMe').click(doTask);
JSFiddle: http://jsfiddle.net/TrueBlueAussie/7tucg2s5/1/
Notes:
I also used jQuery alternatives to shorten the code.
I moved your inline onclick handler to the jQuery equivalent as that is easier to maintain.
You can't put your "goodbye" message directly in #myContainer because this will destroy #myObject. Add another div to hold the message:
HTML:
<div id="mainContainer">
<div id="myObject">:c)</div>
<div id="myText"></div>
</div>
CSS:
#myText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
JavaScript:
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("myText").innerHTML = "goodbye";
}
Fiddle here: http://jsfiddle.net/robbyn/0qkt0v5r/
Try
function animateCharacter() {
return $("#myObject").animate({
left: "+=50"
}, 1500, function() {
$(this)
.fadeOut(500)
.parent()
.html("<span>hello</span>")
.find("span")
.delay(1500, "fx")
.fadeOut(250, function() {
$(this).html("Goodbye").fadeIn(250)
})
})
}
$("#pushMe").on("click", function() {
animateCharacter()
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
#mainContainer {
border: 1px solid gray;
width: 100px;
height: 100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color: blue;
text-align: center;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe">Move the Block</button>
</body>
</html>
What is wrong with this code? The button doesn't work after hovering it.
The code is just copied from the instructional website and it works there.
<html>
<head>
<title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
$(document).ready(function() {
$("div").mouseenter(function() {
$("div").fadeTo("fast", 1)
});
$("div").mouseleave(function() {
$("div").fadeTo("fast", 0.1)
});
});
Possible advise #1: You don't want to fade it away that much.
Change the value of fadeTo() to .5 as this was the initial value in your css.
Possible advise #2: It doesn't do anything when you click on it.
Add an onclick="alert('Clicked!');" to the div container.
Possible advise #3: You just want an hover effect for html element.
Why not use just CSS 3 transition:
div {
transition: opacity 1s;
opacity: .5;
}
div:hover {
opacity: 1;
}
Notice: Of course you'll can use vendor-prefixes to support more browsers, like -webkit-transition.
I want to display the alert box but for a certain interval. Is it possible in JavaScript?
If you want an alert to appear after a certain about time, you can use this code:
setTimeout(function() { alert("my message"); }, time);
If you want an alert to appear and disappear after a specified interval has passed, then you're out of luck. When an alert has fired, the browser stops processing the javascript code until the user clicks "ok". This happens again when a confirm or prompt is shown.
If you want the appear/disappear behavior, then I would recommend using something like jQueryUI's dialog widget. Here's a quick example on how you might use it to achieve that behavior.
var dialog = $(foo).dialog('open');
setTimeout(function() { dialog.dialog('close'); }, time);
May be it's too late but the following code works fine
document.getElementById('alrt').innerHTML='<b>Please wait, Your download will start soon!!!</b>';
setTimeout(function() {document.getElementById('alrt').innerHTML='';},5000);
<div id='alrt' style="fontWeight = 'bold'"></div>
setTimeout( function ( ) { alert( "moo" ); }, 10000 ); //displays msg in 10 seconds
In short, the answer is no. Once you show an alert, confirm, or prompt the script no longer has control until the user returns control by clicking one of the buttons.
To do what you want, you will want to use DOM elements like a div and show, then hide it after a specified time. If you need to be modal (takes over the page, allowing no further action) you will have to do additional work.
You could of course use one of the many "dialog" libraries out there. One that comes to mind right away is the jQuery UI Dialog widget
I finished my time alert with a unwanted effect.... Browsers add stuff to windows. My script is an aptated one and I will show after the following text.
I found a CSS script for popups, which doesn't have unwanted browser stuff. This was written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO. This script I will show after the following text.
This CSS script above looks professional and is alot more tidy. This button could be a clickable company logo image. By suppressing this button/image from running a function, this means you can run this function from inside javascript or call it with CSS, without it being run by clicking it.
This popup alert stays inside the window that popped it up. So if you are a multi-tasker you won't have trouble knowing what alert goes with what window.
The statements above are valid ones.... (Please allow).
How these are achieved will be down to experimentation, as my knowledge of CSS is limited at the moment, but I learn fast.
CSS menus/DHTML use mouseover(valid statement).
I have a CSS menu script of my own which is adapted from 'Javascript for dummies' that pops up a menu alert. This works, but text size is limited. This hides under the top window banner. This could be set to be timed alert. This isn't great, but I will show this after the following text.
The Prakash script above I feel could be the answer if you can adapt it.
Scripts that follow:- My adapted timed window alert, Prakash's CSS popup script, my timed menu alert.
1.
<html>
<head>
<title></title>
<script language="JavaScript">
// Variables
leftposition=screen.width-350
strfiller0='<table border="1" cellspacing="0" width="98%"><tr><td><br>'+'Alert: '+'<br><hr width="98%"><br>'
strfiller1=' This alert is a timed one.'+'<br><br><br></td></tr></table>'
temp=strfiller0+strfiller1
// Javascript
// This code belongs to Stephen Mayes Date: 25/07/2016 time:8:32 am
function preview(){
preWindow= open("", "preWindow","status=no,toolbar=no,menubar=yes,width=350,height=180,left="+leftposition+",top=0");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close();
setTimeout(function(){preWindow.close()},4000);
}
</script>
</head>
<body>
<input type="button" value=" Open " onclick="preview()">
</body>
</html>
2.
<style>
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
<script>
// written by Prakash:- https://codepen.io/imprakash/pen/GgNMXO
</script>
<body>
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
</body>
3.
<HTML>
<HEAD>
<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- Hide from older browsers
function displayMenu(currentPosition,nextPosition) {
// Get the menu object located at the currentPosition on the screen
var whichMenu = document.getElementById(currentPosition).style;
if (displayMenu.arguments.length == 1) {
// Only one argument was sent in, so we need to
// figure out the value for "nextPosition"
if (parseInt(whichMenu.top) == -5) {
// Only two values are possible: one for mouseover
// (-5) and one for mouseout (-90). So we want
// to toggle from the existing position to the
// other position: i.e., if the position is -5,
// set nextPosition to -90...
nextPosition = -90;
}
else {
// Otherwise, set nextPosition to -5
nextPosition = -5;
}
}
// Redisplay the menu using the value of "nextPosition"
whichMenu.top = nextPosition + "px";
}
// End hiding-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px}
#resMenu {right:10px; width:-130px}
A {text-decoration:none; color:#000000}
A:hover {background-color:pink; color:blue}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
Alert:<br>
<br>
You pushed that button again... Didn't yeah? <br>
<br>
<br>
<br>
</div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)">
</BODY>
</HTML>
Pure HTML + CSS 5 seconds alert box using the details element toggling.
details > p {
padding: 1rem;
margin: 0
}
details[open] {
visibility: hidden;
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
transform-origin: center center;
outline: 10000px #000000d4 solid;
animation: alertBox 5s;
border: 15px yellow solid
}
details[open] summary::after {
content: '❌';
float: right
}
#keyframes alertBox {
0% { visibility: unset}
100% { visibility: hidden }
}
<details>
<summary>Show the box 5s</summary>
<p>HTML and CSS popup with 5s tempo.</p>
<p><b>Powered by HTML</b></p>
</details>
Nb: the visibility stay hidden at closure, haven't found a way to restore it from CSS, we might have to use js to toggle a class to show it again. If someone find a way with only CSS, please edit this post!!
If you are looking for an alert that dissapears after an interval you could try the jQuery UI Dialog widget.
tooltips can be used as alerts. These can be timed to appear and disappear.
CSS can be used to create tooltips and menus. More info on this can be found in 'Javascript for Dummies'. Sorry about the label of this book... Not infuring anything.
Reading other peoples answers here, I realized the answer to my own thoughts/questions. SetTimeOut could be applied to tooltips. Javascript could trigger them.
by using this code you can set the timer on the alert box , and it will pop up after 10 seconds.
setTimeout(function(){
alert("after 10 sec i will start");
},10000);
You can now use the HTMLDialogElement.
In this example a dialog is created when you click the button, and a timeout function is created to close it:
async function showMessage(message) {
const dialog = document.createElement("dialog");
document.body.appendChild(dialog);
dialog.innerText = message;
dialog.show();
setTimeout(function () {
dialog.close();
}, 1000);
}
<button class="btn" onclick="showMessage('This is my message')">click me!</button>
If you want you can test it on codepen.
function alertWithTimeout(title,message,timeout){
var dialog = $("<div id='dialog-confirm' title='"+title+"'>"+message+"</div>").dialog();
setTimeout(function() { dialog.dialog('close'); }, timeout);
}
alertWithTimeout("Error","This is the message" ,5000);