Plunker: https://plnkr.co/edit/6aBljcPRK78pLegnyL5p
Alright, so the example (in plunker, and also attached as code snippet to this question) is pretty straightforward. There is a div ("button") which can be clicked. When clicked, a loading element is displayed inside it. When the "operation" finishes (replaced by a setTimeout here), the loading element should disappear, and a message area appear above the div.
The effect I'm seeing (and which only occurs if the "operation" finishes as good as immediately) is that the loading element (in my example a Font Awesome icon) is rendered outside the box for a split second.
NOTE: the loading icon might not be shown at all the first time you click the element. Just use the "Reset" button and click again. For me it's produceable every time.
Since the display property of both elements are changed at the same time, I would have expected the browser to keep the loading icon inside the box until it would it disappear. This does not, however, seem to be the case.
I've used pure HTML / CSS / Javascript (well, Font Awesome) in order to avoid any bugs / weird behaviour with those.
Is this just how browsers render? Would there be a way to avoid this effect other than using a timeout to delay setting either property (which I consider really ugly for this use case)? I don't believe this is a purely visual effect (my eyes playing a trick on me), but it could be...
I've tried the following to see if anything changed (which it didn't):
Positioned the icon absolutely inside the ".content" element.
Replaced the icon with a static <img> tag.
Explicitly hid the icon element, and not just the parent one.
#messageBox {
display: none;
height: 50px;
background-color: #cccccc;
margin: 10px;
}
#element .content {
position: relative;
width: 120px;
margin: 0;
padding: 10px;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 14px;
text-align: center;
}
#element .content .shadow {
height: 124px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
border: 1px dashed #ccc;
padding-top: 32px;
color: #bbb;
cursor: pointer;
}
#element .content .shadow:hover {
color: #888;
border-color: #999;
}
#element .content .shadow.inactive {
color: #bbb;
border-color: #999;
cursor: default;
padding-top: 48px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Positioning plunker</title>
<link data-require="font-awesome#*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script type = 'text/javascript'>
window.doSomething = function() {
var action = document.getElementById('actionButton');
var icon = document.getElementById('icon');
var message = document.getElementById('messageBox');
icon.style.display = "block";
window.setTimeout(function() {
message.style.display = 'block';
icon.style.display = 'none';
}, 50);
};
window.reset = function() {
var action = document.getElementById('actionButton');
var icon = document.getElementById('icon');
var message = document.getElementById('messageBox');
action.style.display = 'block';
icon.style.display = 'none';
message.style.display = 'none';
};
</script>
<div id="messageBox">Some box containing stuff to push down the content...</div>
<div id="element">
<div class="content" style="border:1px solid black; padding: 0">
<div id="actionButton" class="shadow" onclick="doSomething();">
<i id="icon" style="display: none" class="fa fa-cog fa-2x text-info"></i>
</div>
</div>
</div>
<button onclick="reset(); return false;">Reset</button>
</body>
</html>
I took a video and made a slow motion gif from the clicking. I'm pretty sure it's just an optical illusion. Here's eight total frames from the video:
I saw this first with this. Seems like the classic "Bird in a Cage" illusion.
window.setInterval(function() {
icon.style.display = "block";
message.style.display = "none";
}, 60)
window.setInterval(function() {
message.style.display = 'block';
icon.style.display = 'none';
}, 50);
Related
First time posting here and new to programming with just 3 days of experience.
I'm having some trouble getting my default button to be active instead of just focused. I've attempted to read other posts about this, but my lack of experience makes it hard for me to put 2 and 2 together.
The page is going into squarespace so I'm trying to do it all in one code block. I don't want the buttons to deactivate when the user clicks on other parts of the website, which it currently happens. (Even if they click on blank areas).
Thank you very much for any advice you can give me.
/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width: 210px;
height: 135px;
padding: 0px;
border: 0px;
outline: 0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat;
/* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
.services:focus,
.services:hover,
.services:active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
.assets:focus,
.assets:hover,
.assets:active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
.viz:focus,
.viz:hover,
.viz:active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
.software:focus,
.software:hover,
.software:active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
.more:focus,
.more:hover,
.more:active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets,
#viz,
#software,
#more {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software">
<divtext>INTERACTIVE SOFTWARE</divtext>
</a>
<a href="javascript:void(0)" onclick="show('assets');" class="services assets">
<divtext>3D ASSET CREATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('viz');" class="services viz">
<divtext>3D VISUALIZATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('more');" class="services more">
<divtext>IMAGE CREATION</divtext>
</a>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload = function() {
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>
Welcome to Stack Overflow.
So first thing to note, the :active pseudo element only applies when the user clicks (mouse-down) on something. You can see it here
The most common method is to apply the css class "active", and have a .active selector on whatever element you want to style.
Right now you have the buttons affected by hover and focus, so when the user clicks outside the button it loses focus.
You can solve this by changing a bit of CSS and javascript. The edited portions are marked by /* EDIT */
I would not recommend the last line where I exploit the fact that your function passes in the element ID, and that element ID matches the class of the button that was used to select it. A better way would to have show take the Javascript event as argument, then use the event.target to get the a tag clicked on, then use a getElementById on something like a data-target="more" attribute. This will allow you to change the CSS class without coupling the class to the implementation of the Javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width:210px;
height:135px;
padding: 0px;
border:0px;
outline:0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
/* EDIT */
.services:focus, .services:hover, .services.active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
/* EDIT */
.assets:focus, .assets:hover, .assets.active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
/* EDIT */
.viz:focus, .viz:hover, .viz.active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
/* EDIT */
.software:focus, .software:hover, .software.active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
/* EDIT */
.more:focus, .more:hover, .more.active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets, #viz, #software, #more {
display: none;
}
</style>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<divtext>INTERACTIVE SOFTWARE</divtext>
<divtext>3D ASSET CREATION</divtext>
<divtext>3D VISUALIZATION</divtext>
<divtext>IMAGE CREATION</divtext>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
/* EDIT */
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
// get a list of the buttons with ".services" class
const buttons = document.querySelectorAll(".services");
for(let button of buttons) {
// remove ".active" class
button.classList.remove("active");
}
// add the active class to element button specified by argument
document.querySelector("." + elementId).classList.add("active");
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload=function(){
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>
I'm working on my own in browser live HTML/CSS code editor. What I'm having trouble with is applying the css styles typed out by the user to my div preview pane.
What I currently have is
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Editor</title>
<style>
.wrapper{
width: 100%;
}
.textWrapper {
width: 30%;
height: 100%;
float: left;
}
#css{
height: 300px;
width: 100%;
}
#html {
height: 300px;
width: 100%;
}
#preview {
height:600px;
width: 400px;
float:left;
border:2px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div class ="wrapper">
<div class ="textWrapper">
<textarea placeholder="CSS..." id="css"></textarea>
<textarea placeholder="HTML..." id="html"></textarea>
</div>
<div id="preview"></div>
<button onclick="launch()">Launch</button>
<button onclick="toggleCSS()">Toggle</button>
<button onclick="clear()">Clear</button>
<script src="bebk9hScripts.js"></script>
</div>
</body>
</html>
and for my script page
function launch() {
document.getElementById("preview").innerHTML = document.getElementById("html").value;
}
function toggleCSS() {
document.getElementById("preview").style = document.getElementById("css").value;
}
but that is not working. Any suggestions? Also I realize using an iframe would be easier but we aren't supposed to.
A simple and effective way to accomplish what you're trying to do is to set the innerHTML of your preview element. This does not prevent you from utilizing HTML, CSS, or JavaScript in any way, so long as all necessary dependencies have been accounted for prior to your preview element. The simple implementation is:
var preview = document.getElementById("preview");
var html = document.getElementById("html").value;
var css = document.getElementById("css").value;
preview.innerHTML = html;
preview.innerHTML += '<style>' + css + '</style>';
However, as a developer in a very rapid environment, I can honestly say, using an interval to refresh the preview is much appreciated when you're trying to quickly update things. It'll be up to you as to how fast of an interval you'll use to refresh, or you could give your users a setting for update intervals.
Keep in mind though, that using intervals can cause undesired behavior such as animations being cutoff, etc. This is why a lot of code editors online use a refresh or run button in the first place. But I'd like to point out the usefulness of utilizing the keyup event that is available to us.
Coupling the keyup event with a timer, a manual refresh button, and an interval would be my recommendation:
var html = document.getElementById("html");
var css = document.getElementById("css");
// Use the `keyup` event as a primary check for updates.
var keyDelay = 1000;
var keyRecieved = false;
var timeSinceLastKeyRecievedInMilliseconds = 0;
document.addEventListener('keyup', prepareForRefresh);
function prepareForRefresh() {
keyRecieved = true;
timeSinceLastKeyRecievedInMilliseconds = 0;
}
function update() {
var preview = document.getElementById("preview");
preview.innerHTML = html.value;
preview.innerHTML += '<style>' + css.value + '</style>';
}
// Use an interval for checking if we should update.
setInterval(function() {
if (keyRecieved) {
timeSinceLastKeyRecievedInMilliseconds += 100;
if (timeSinceLastKeyRecievedInMilliseconds >= keyDelay) {
timeSinceLastKeyRecievedInMilliseconds = 0;
keyRecieved = false;
update();
}
}
}, 100);
// Use a high interval as a fail-safe for flukes.
var interval = 180000;
setInterval(update, interval);
input[type=text] {
margin: 5px;
background-color: #fffa;
border: 2px solid transparent;
border-bottom: 2px solid #fff;
border-radius: 5px;
}
.update {
width: 20%;
padding: 10px;
margin: 5px;
background-color: #f33a;
cursor: pointer;
user-select: none;
}
.primary-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
html, body { overflow-y: auto; }
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/PerpetualJ.css" rel="stylesheet"/>
<div id="primary-content" class="primary-content">
<input id="html" type="text" placeholder="HTML" />
<input id="css" type="text" placeholder="CSS" />
<div class="update" onclick="update();">Refresh</div>
<div id="preview"></div>
<div id="refresh-preview"></div>
</div>
The simple example above utilizes a combination of the keyup event, a timer for detecting how long it's been since the user provided input, and a high interval as a fail-safe. This is close to the method utilized by CodePen, and I heavily recommend it for a web focused editor. Feel free to check out my implementation of this in it's simplest form over on CodePen.
Your Code works!
EDIT: Well, at least kind of. It applies the styles directly only to the preview element, not its children (see comments below this post).
Below ist my old answer:
There is nothing wrong with it, and the issue must be somewhere else.
Possible issues that come to mind are:
The CSS entered by the user is not valid, or is overwritten by another stylesheet
The Javascript function to update the file does not get triggered
The elements referenced in the Javascript are the wrong ones
Here is minimal working example using your code:
function toggleCSS() {
document.getElementById("preview").style = document.getElementById("css").value;
}
document.getElementById("apply_css").onclick = toggleCSS;
<textarea id="css" cols="40" rows="5">
width: 150px;
height: 100px;
border: 1px solid green;
background: rgb(170, 200, 250);
</textarea>
<br>
<button id="apply_css">Apply CSS!</button>
<br>
<div id="preview"></div>
So I'm making a sort of blog posting system or TODO list, however you want to call it.
I want that the following can happen / is possible:
[Working] The user types something in the textarea
[Working] The user clicks on the button.
[Working] A new div will be created with the text of the textarea.
[Working] The textarea will be empty.
[Not Working] The user has got the choice to delete the post by clicking the 'X' on the right side of each '.post' div.
BUT: If I click on the button when there's nothing in the textarea, there appears an empty div, with only an 'X' close button, no background color either. They appear on the same line as the previous message, so you can get a lot of 'X's next to each other.
AND: Clicking the 'X' close button doesn't do anything. No errors in Firefox console.
If it's not clear enough, run this JSFiddle, click the button and I think you'll understand what I mean:
JSFiddle
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="blog">
<h1>Blog post application</h1>
<div id="post-system">
<textarea id="poster" rows="5" cols="50" placeholder="Update status."></textarea>
<div id="button">Post</div>
<div id="posts">
</div>
</div>
</div>
</body>
</html>
jQuery Script:
<script>
$(document).ready(function () {
$('#button').click(function () {
var text = $('#poster').val();
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('.close-post').click(function () {
('.close-post').parent().hide();
});
});
</script>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#blog {
background-color: blue;
margin: 50px;
padding: 50px;
text-align: center;
border-radius: 10px;
color: white;
display: block;
}
#poster {
color: default;
resize: none;
border: 1px solid black;
text-decoration: blink;
font-size: 20px;
display: inline-block;
position: relative;
border-radius: 5px;
border: 2px solid black;
padding-left: 10px;
padding-top: 5px;
}
#button {
background-color: #00FFFF;
color: white;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
width: 50px;
float: left;
}
.post {
background-color: white;
color: blue;
margin-top: 20px;
width: auto;
display: block;
}
.close-post {
margin-right: 10px;
float: right;
color: red;
cursor: pointer;
}
You appear to have two issues:
1) You don't want a post to be created if the textarea is empty
Simple fix . . . check to see if it is empty, before calling the logic to add the new post (and use jQuery's $.trim() to account for only blank spaces):
$('#button').click(function() {
var text = $.trim($('#poster').val());
if (text !== "") {
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
}
});
2) The 'X' buttons are not closing the posts
This also should be a pretty easy fix . . . the reason that they are not working is because the 'X' buttons don't exist when the page is loaded so $('.close-post').click(function() { is not binding to them on page load. You will need to delegate that event binding, so that it will apply to the 'X' buttons that are dynamically added after the page is loaded.
Now, not knowing what version of jQuery that you are using (I can't access jsFiddle from work), I'll point you to the right place to figure out the correct way to do it: https://api.jquery.com/on/
If it is jQuery 1.7 or higher, you would do it like this:
$("#posts").on("click", ".close-post", function() {
$(this).parent().hide();
});
If your version is earlier than that, then investigate the jQuery .delegate() and .live() methods to determine which is the right one to use for your code..
Try this:
$(document).ready(function() {
$('#button').click(function(event) {
event.preventDefault();
var text= $('#poster').val();
if (text === '') {
alert('Nothing to post!');
return;
}
$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>×</span></div>");
$('#poster').val('');
});
$('#posts').on('click', '.close-post', function() {
$(this).closest('.post').fadeOut();
});
});
JSFiddle
The way you are doing this, the user will only ever see what they are posting - if you're trying for a chat type where users talk to each other then you will need to store what is being typed on the server side and refresh the screen using something like ajax
but in response to your question, you need to bind the close click like this:
$( "#posts" ).on( "click", ".close-post", function() {
$(this).parent().hide(); // $(this) is the clicked icon, the way you did it above wouldn't as if it had the dollar, it would close all .close-post parents
});
See the part about delegated events: http://api.jquery.com/on/
When clicking the "see more" the text does not expand. How come? Thanks
HTML:
<div id="wrap">
<h1>Show/Hide Content</h1>
<p>
This example shows you how to create a show/hide container using a
couple of links, a div, a few lines of CSS, and some JavaScript to
manipulate our CSS. Just click on the "see more" link at the end of
this paragraph to see the technique in action, and be sure to view the
source to see how it all works together.
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">
See more.
</a>
</p>
<div id="example" class="more">
<p>
Congratulations! You've found the magic hidden text! Clicking the
link below will hide this content again.
</p>
<p>
<a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">
Hide this content.
</a>
</p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
CSS:
body {
font-size: 62.5%;
background-color: #777;
}
#wrap {
font: 1.3em/1.3 Arial, Helvetica, sans-serif;
width: 30em;
margin: 0 auto;
padding: 1em;
background-color: #fff;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
Live DEMO
You're calling showHide from the HTML window, but showHide hasn't been defined yet. Just include the showHide function in a <script> block in the HTML window, and it will work. See my jsfiddle: http://jsfiddle.net/HGbSX/1/
The additional problem with having to click twice to show the additional content has to do with your logic. The first time you come through, the display for that element is not set to none as you expect, but to an empty string, so it's re-hiding it. You can correct this by reversing your logic, and looking for display='block'. See my jsfiddle: http://jsfiddle.net/HGbSX/2/
I have corrected a small bug that it needs 2 clicks to start the functioning. Just replaced != 'none' has been replaced with == 'block'. Also, in JSFiddle, you had chosen wrong setting under the 'choose framework'. It should have been 'head no wrap'.
http://jsfiddle.net/EMEL6/12/
Also a very simple way to achieve the same:
function showHide() {
$('#example').toggle();
}
The code is correct; the reason it is not working is because the way you have the jsfiddle set up. On the right side where it asks for a framework/where you want your JS to show up, you have jQuery and onLoad (the defaults, I believe) - this makes it so that the resulting code of your fiddle looks like this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
});//]]>
Which means you are defining showHide within the anonymous function of jQuery's load event. If you change the first dropdown to 'no wrap (head)' it will leave your JavaScript alone and your onclick will be able to see the function as defined.
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);