I have a website with several papers with footnotes.
So far I have adopted the classic system of referring to the footnotes at the bottom of the article with an internal link, from which you then return to the body of the paper by clicking on the note number.
But I found that it is possible with javascript to have a more comfortable system that keeps the footnote inside the screen you are reading on.
The code is this:
function toggleDiv (divId) {
$ ("#" + divId) .toggle ();
}
.dynamicnote {display: none;
position: fixed;
bottom: 2%;
margin-left: auto;
margin-right: auto;}
1
<p id = "n1" class="dynamicnote"> 1 [sometext] </p>
The problem is that this works perfeclty if I click on the anchor (once read the note), and then the footnote disappears; otherwise, if I click the next anchor the new footnote goes over the previous one, and it is ugly and confusing.
You can see this script at this url
How to fix? Perhaps with a javascript command to hide the div shown clicking anyywhere?
updated answer: If this is worse let me know and i'll put the old one back.
update two: This works only on the second click, so the first link will not have the animation (but still works like in the first one). I am still working on the solution for the first click. Again, if this is worse, let me know.
var currDiv = 'footNote';
function toggleDiv(divId) {
if(currDiv=='footNote'){
document.getElementById('footTwo').classList.add('no-height');
document.getElementById('footTwo').innerHTML='';
document.getElementById('footNote').classList.remove('no-height');
var elem = document.getElementById(divId).cloneNode(true);
elem.id = 'fntext';
document.getElementById('footNote').appendChild(elem);
var ftnt= document.getElementById('fntext');
ftnt.replaceWith(...ftnt.childNodes);
currDiv=0;
}else{
document.getElementById('footNote').classList.add('no-height');
document.getElementById('footNote').innerHTML='';
document.getElementById('footTwo').classList.remove('no-height');
var elem = document.getElementById(divId).cloneNode(true);
elem.id = 'fntext';
document.getElementById('footTwo').appendChild(elem);
var ftnt= document.getElementById('fntext');
ftnt.replaceWith(...ftnt.childNodes);
currDiv = 'footNote';
}
}
document.addEventListener("click", e => {
if(e.target.className!=='href'){
document.getElementById('footNote').innerHTML = '';
document.getElementById('footTwo').innerHTML = '';
}
});
.ftn {
position: fixed;
bottom: 10%;
margin-left: auto;
margin-right: auto;
max-height: 100%;
overflow: hidden;
transition: max-height 0.8s ease-in-out;
}
.no-height {
max-height:0;
transition: max-height 0.8s ease-in-out;
overflow-y: hidden;
}
.hide {
display: none;
color: red;
}
<a href="#1a" onclick='toggleDiv("n1")' id="1a" class='href'> 1 </a>
<div id="n1" class="hide">
1 [sometext]
</div>
<br>
<a href="#2a" onclick='toggleDiv("n2")' id="2a" class='href'> 2 </a>
<div id="n2" class="hide">
2 [sometext2]
</div>
<div id='footNote' class='ftn'> </div>
<div id='footTwo' class='ftn'> </div>
I have textarea with a static content. So I disabled the textarea to prevent any modification in the content. But I want to modify some part of this content. How can I do this ?
I have created a select box as follows :
<div class="scroll-inside">
<?php if($transactionalTemplates->num_rows() > 0) {
foreach($transactionalTemplates->result_array() as $template) { ?>
<a href="#" class="transactionalTemplate" data-text="<?php echo $template['TemplateText']?>">
<?php echo $template['TemplateText'];?>
</a>
<?php }
}
?>
</div>
When I select an item, the selected item will pasted to the following textarea
<textarea placeholder="Enter your message here.." maxlength="160" class="messageTransactional" name="messageTransactional" id="messageTransactionalEnglish"></textarea>
here is my script code:
$('.transactionalTemplate').click(function() {
$('.messageTransactional').val($(this).data('text'));
flag = true;
$('.messageTransactional').keypress(function(e) {
e.preventDefault();
});
});
After adding the content to textarea, I prevent typing new content using the above function.
here is an example:
Suppose Dear (123), thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call (123) is my content.
I need to edit this content as Dear John, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call 91xxxxxxxx
Which means, I need to change the content in paranthesis, keeping the format static.
I would highly suggest not using a textarea. There is no real way to stop that. You would need to do it yourself and try to catch every possibility to change that.
Instead, a simple text-input usually looks the best.
Alternatively, if it has to be seamless, you can use a contenteditable span, like this:
Dear <span contenteditable="true">(please enter your name here)</span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span contenteditable="true">(please enter your tel. number here)</span>
I was bored so did a pretty cool solution, it's not perfect though and still needs work for production.
const $editable = $('.editable')
const $inputs = $('.input')
const $save = $('#save')
const popup = function(e) {
const $this = $(this)
$this
.find('input')
.addClass('active')
.focus()
}
const onBlur = function(e) {
const $this = $(this)
const $parent = $this.parent()
const value = $this.val()
$parent.find('input')
.removeClass('active')
if (value) {
$parent
.find('.value')
.text($this.val())
}
}
const onSave = function(e) {
const $pre = $('pre')
console.log('save', $pre.text())
}
$editable.on('click', popup)
$inputs.on('blur', onBlur)
$save.on('click', onSave)
body {
padding: 1em;
}
pre {
white-space: normal;
font-family: sans-serif;
}
.editable {
border-bottom: 1px dotted #3cf;
color: #3cf;
min-width: 1em;
min-height: 1em;
position: relative;
}
.editable input {
position: absolute;
width: 80px;
transform: translate(-70px, 0%);
border: 1px solid #aaa;
padding: .5em;
border-radius: 5px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s transform;
}
.editable input:focus,
.editable input.active {
transform: translate(-70px, -100%);
opacity: 1;
visibility: visible;
outline: none;
}
.editable:focus {
outline: none;
}
.button {
float: right;
padding: .5em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="messageTransactional" />
<pre id=="messageTransactional">
Dear <span class="editable" id="name"><span class="value">name</span><input type="text" class="input" /></span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span class="editable" id="phone"><span class="value">phone</span><input type="text" class="input" /></span> is my content.
</pre>
<button id="save" class="button">save</button>
I've created an expanding search bar: You click on the magnifying glass the input extends out and to the right, click it again and it closes. (See Fiddle Below).
I'm new to the world of JS and I thought this would be a great opportunity to implement some logic. Here's what I;m trying to do:
If the search bar is open and the inner.html is empty, if you click the "search" magnifying glass, I want to prevent the default submission of the form and simply close the search bar
If there is text, I want the form to be submitted.
Right now I've got the elements layered in such a way as to when you click the "search" button for the first time, the bar extends and the z-index of the button drops to one where the actual submit button is higher, but I want to control the functionality a little more.
What I've tried:
I tried creating a function that added an event listener that said, basically, if the bar has a width of 700px (the extended length) and the inner html is empty, bring the z-index of the extend button up back higher than the submit simply close the form. But I can't seem to work the logic out properly.
I'm wondering how in JS you can control the z-index.
Here is the code I tried and did not work. I tried something simply like just alerting when the task I wanted to watch for was done first but it doesn't seem to be working.
Any help would be wonderful.
Code:
HTML:
<div id="wrap">
<form id="myForm">
<input id="search" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type="submit">
</form>
</div>
CSS:
#wrap
{
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
}
input[type="text"]
{
height: 40px;
font-size: 35px;
border: none;
outline: none;
color: #555;
padding-right: 60px;
position: absolute;
width: 0px;
top: 0;
right: 0;
background: none;
z-index: 4;
cursor: pointer;
transition: width .4s ease-in-out;
}
input[type="text"]:focus
{
width: 700px;
z-index: 1;
border-bottom: 1px solid #bbb;
cursor: text;
}
input[type="submit"]
{
position: absolute;
height: 60px;
width: 60px;
display: inline-block;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
border: none;
outline:none;
top: -15px;
right: 0;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
}
JS
var search = document.getElementById("myForm").search;
var search_submit = document.getElementById("myForm").search_submit;
function showOpen()
{
if(search.style.width=="700px")
{
alert("OPEN!");
}
};
search.addEventListener("click", showOpen);
showOpen();
HERE IS THE FIDDLE: https://jsfiddle.net/theodore_steiner/7begmkf3/37/
Your issue can be solved using a few basic JavaScript elements (if you're looking to get into basic logic, these are important to know). The JS uses onsubmit, onclick, and some basic form logic. Basically, when you try to submit the form it checks if the form is empty, and if it is, the program refuses to submit the code. I added the new JavaScript to the HTML file:
<script>
function check(){
value = document.forms["myForm"]["search"].value;
if(value == "" || value == null){
alert("please enter a search term");
return false;
}else{
document.getElementById("myForm").submit();
}
}
</script>
<div id="wrap">
<form id="myForm" onsubmit="return check()">
<input id="searchBar" name="search" type="text" placeholder="What are we looking for?" />
<input id="search_submit" value="" type = "submit">
</form>
</div>
fiddle: https://jsfiddle.net/q1L3Lstx/1/
It might also help in the future to look at the required element: http://www.w3schools.com/tags/att_input_required.asp
I saw a couple of issues with the code.
search and search_submit are pointing to the wrong items they can be like this:
var search = document.getElementById("search");
var search_submit = document.getElementById("search_submit");
You could call a function on submit. like this:
<form id="myForm" onsubmit="myFunction(event)">
finally you can work your code inside that function:
function myFunction(e){
if(search.value.length <= 0){
e.preventDefault();
alert('empty');
}
}
$('.login_links_register').click(
function () {
$("body").addClass("removeScroll");
$(".login_form_container").show();
$("#registerForm").show();
$(".login_form_container").css('top', '0px');
/*$('.overlay').addClass('visible');*/
});
$(document).on('click', ".close_button",
function (event) {
var negativeHeight = -1 * ($('.login_form_container').offset().top + $(this).parents('.login_form_container').height());
$(".login_form_container").css('top', negativeHeight);
//$(".login_form_container").slideUp();
/*$('.overlay').removeClass('visible');*/
setTimeout(function () {
$('.overlay').addClass('displayNone');
$(".login_links").removeClass("popup_opened");
$("#loginForm").hide();
$("#registerForm").hide();
$("body").removeClass("removeScroll");
}, 500); /*Execute a set of statements after a statement completion. To make it faster reduce the milliseconds*/
});
input[type="text"], input[type="password"] {
border: 1px solid #aaa;
}
.header2 {
background-color:#E1E3E5;
/*have to change */
/*padding: 15px 0;*/
}
.right {
float: right;
clear:both;
/*To avoid problems caused by float - but check it may cause some problems check for it*/
}
/*Instead overflow:auto(or) hidden*/
.clearboth::after {
clear: both;
content:"";
display: block;
visibility: hidden;
}
.displayNone {
display: none;
}
.emailField, .passwordField {
width: 200px;
padding: 5px;
}
/*to remove unnecessary margin caused by ul element */
.login_links_list {
/*margin:10px 0;*/
padding: 0px;
margin: 0;
}
.login_links.right {
margin-right: 70px;
/*Same as Login container*/
}
/*login_link ul li element*/
.login_links_list_ele, .login_links_list_label
/*can apply al these properties to anchor tag instead li */
{
float: left;
list-style: outside none none;
transition: all 0.5s ease 0s;
}
.login_links_list_label {
padding: 15px;
}
.login_links_register, .login_links_login {
/*border-right:1px solid #ccc;
border-left: 1px solid #ccc;*/
float:left;
padding:15px;
}
.login_form_container.right {
border: 1px solid #aaa;
margin-right: 70px;
/* For better alignment. Instead kissing the edge of the screen*/
transition: all 1s ease 0s;
position: relative;
top: -173px;
/* For Styling. instead displayNone*/
z-index: 2;
}
/*positioning close button*/
.close_button {
cursor: pointer;
float: right;
position: relative;
top: -15px;
right: -15px;
width: 17px;
}
.loginDiv.right {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headers header2 clearboth" id="header2">
<nav class="login_links right">
<ul class="login_links_list right">
<li class="login_links_list_label">Are you a member?</li>
<li id="login_links_register" class="login_links_list_ele login_links_register">Register</li>
<li id="login_links_login" class="login_links_list_ele login_links_login">login</li>
</ul>
</nav>
</div>
<div class="login_form_container right displayNone">
<form class="right registerForm" id="registerForm" method="POST" action="lib/registration_validate.php">
<img class="close_button close_popup close_register_form" src="image/close_icon.png"></img>
<div class="register_input">
<input autocomplete="off" class="register_links emailID" type="text" placeholder="Email ID" name="email"/>
</div>
<div class="register_input">
<input type="password" autocomplete="off" class="register_links password" placeholder="Password" name="password"/>
</div>
<div class="register_input">
<input autocomplete="off" class="register_links conf_password" type="password" placeholder="Confirm Password" name="confirmPassword"/>
</div>
<div class="register_submission">
<input type="submit" value="Register" name="submit" class="register_button"></input>
<div class="custom_checkbox_div">
<input id="custom_checkbox" class="custom_checkbox_input" type="checkbox" value="Remember Me" name="remMeCheckbox"/>
<label for="custom_checkbox" class="custom_checkbox_label"></label>
<label class="custom_checkbox_string" for="custom_checkbox">Remember Me</label>
</div>
</div>
This is in my HTML page. I have negative top to show and hide forms for better views.
Please clear me the following doubts
1) I have to send the data to server when user submits form. I do client-side and server-side validation. If client-side validation fails, I 'll show the errors in the form itself. If there is any server-side error, how do i show this in the form?
My ideas:
I have to insert some php error tags in the html page and change my filetype to php from html so that if there is any server side error i ll insert the error in those tags.
<span class="error">* <?php echo $emailErr;?></span>
Something like the above.
(or)
Take the user to another php page where user re-enter the details. and handles all the error in the same page.
2) What are the problems with this type of negative top form design?
Please let me know the problems and suitable solutions so that i get clean design. I don't want the code only the idea.
There are couple of ways to do it but I am gonna stay low here by giving more of a hint to what you can do.
Using AJAX to submit form?
If the validation fails in PHP...
Create an associative array containing all the error messages and a key like submitError set to TRUE.
json_encode the array and die or return it.
In your JavaScript AJAX success callback, check for the existence of submitError key in the response.
If true, parse and display all messages from the JSON response you received. Done!
NOT using AJAX?
You can utilize $_SESSION to store the errors and related messages & set a flag for error.
When the page loads/submits, check if $_SESSION contains that flag.
If it does, pull the messages from session and display to the user.
Once displayed, clear those things from $_SESSION
These things can be done for small applications. If you are using some kind of framework like CodeIgniter or Laravel, you may want to check their session flash methods.
About Negative Top Form Design
I don't see much of a problem there unless it's covering up something vital beneath it when opened. Specially on mobile version( if you plan to do that).
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);