I've seen that there are different ways to fade in an object on load but every time I try to apply it to my own code I must be messing something up. I've been trying css and javascript so I'm good to use whatever I can get working.
I would like Hello to fade up on load but then 5 seconds later Next Page also fade's in.
Here's my code so far.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>
</head>
<body>
<div id="Welcome">
<h1> Hello </h1>
</div>
<div id="Next">
<h2> Next Page </h2>
</div>
<video autoplay muted loop id="VidBackground">
<source src="video/home.mp4">
</video>
</body>
</html>
and here's my css
h1, h3, a {
color: #ffffff;
line-height: 2;
}
#welcome {
position: absolute;
bottom: 15%;
right: 20%;
z-index: 2;
}
#next {
position: absolute;
bottom: 10%;
right: 20%;
z-index: 2;
}
#VidBackground {
position: fixed;
right: 0;
bottom: 0;
object-fit: cover;
z-index: -1;
}
This will be a good fit for CSS transitions.
You can use them like this:
transition: <css property> <transition-duration> <transition-function>
Example:
#next {
transition: opacity 0.5s ease-in-out;
opacity: 0;
/*pointer-events makes this node not respond to mouse/touch events
Which is probably what we want while the button is invisible.*/
pointer-events: none;
}
Now whenever the opacity style changes on #next it will transition instead of appearing instantaneous. Typically you would trigger it by some javascript.
window.onload = function() {
setTimeout(function() {
//Re-enable mouse/touch events on the #next button
document.getElementById("next").style.pointerEvents = 'auto';
//Show the #next button
//Since opacity style is transitioned, the opacity change will automatically trigger the transition.
document.getElementById("next").style.opacity = 1;
}, 5000);
});
Further reading on transitions can be found over at the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
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);
}
I'm using Twitter Bootstrap 3 and have a DIV containing a picture or video. the div is col-sm-3, but using a jQuery I switch that class with a col-sm-12 on hover. Is there any way to make a smoother transition and add some effects when the resize happens? Thanks.
Try CSS transitions for good performance:
.col-sm-3, .col-sm-12{
transition: all 200ms; //replace 200ms with time of your choice
}
http://jsfiddle.net/cm3oc7vh/
You could always use jQuery-UI and the switchClass method. This will animate the difference in styles.
$(function($){
$('#switch').on('click',function(e){
var $p = $('#target')
if($p.is('.foo')){
$p.switchClass('foo','bar',1000);
}else{
$p.switchClass('bar','foo',1000);
}
e.preventDefault();
});
});
.foo { color: red; font-size: 150%; }
.bar { color: blue; font-size: 100%; }
<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<p id="target" class="foo">Hello, world!</p>
<button id="switch">Switch</button>
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}
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);