I'm new to Flask but I'm trying to show a 'rolling ball' while a page loads.
This link: Display a ‘loading’ message while a time consuming function is executed in Flask has been helpful but not giving me the desired results.
from flask import Flask
from flask import request
from flask import render_template
import time
app = Flask(__name__)
def long_load(typeback):
time.sleep(5) #just simulating the waiting period
return "You typed: %s" % typeback
#app.route('/', methods=("POST", "GET"))
def test():
if request.method == 'GET':
return render_template('index.html')
elif request.method == 'POST':
query = request.form['anything']
outcome = long_load(query)
return render_template("post_template.html" , display=outcome)
if __name__ == '__main__':
app.run()
Excerpts from index.html:
<head>
<style>
div#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite ;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script type="text/javascript">// <![CDATA[
document.onreadystatechange = function() {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#loader").style.visibility = "visible";
} else {
document.querySelector("#loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
}
};
// ]]></script>
</head>
<form action="." method="post">>
<body>
<div class="caption">
<table class="center">
<tr>
<td class="NEONpinktxt"> </td>
<td align = "center"> <input type="submit" name="anything_submit" href="#" value="Search Results" id="loader" > </td>
</tr>
<div id="loader"></div>
</table>
</div>
</body>
</form>
When the page loads or refreshes, the rolling ball shows but when the 'Search Results' is clicked on, nothing happens.
Assuming you can get your server to return a proper document fragment
I would change
query = request.form['anything']
to
query = request.form['search']
and do this (Please note I fixed invalid HTML too)
document.onreadystatechange = function() {
var complete = document.readyState === "complete";
document.querySelector("body").style.visibility = complete ? "visible" : "hidden";
document.getElementById("loader").style.display = complete ? "none" : "block";
}
document.getElementById("myForm").addEventListener("submit", function(e) {
document.getElementById("result").style.display = "none";
document.getElementById("loader").style.display = "block";
e.preventDefault(); // stop submit
let token = new FormData();
token.append('search', document.getElementById('search').value);
fetch(this.action, { // form action
method: this.method, // form method
body: token
})
.then(response => response.text())
.then(fromServer => {
document.getElementById('result').innerHTML = fromServer;
document.getElementById("result").style.display = "block";
document.getElementById("loader").style.display = "none";
});
})
div#loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<form id="myForm" action="getInformattionFromServer" method="post">
<div class="caption">
<table class="center">
<tr>
<td class="NEONpinktxt"><input type="text" id="search" value="" placeholder="Search something" /> </td>
<td align="center"> <input type="submit" value="Search Results"> </td>
</tr>
</table>
<div id="loader"></div>
<div id="result"></div>
</div>
</form>
As a demo of using the loading circle for long running tasks I cobbled together a simple demo that uses Ajax to send a request to some server - the throbber is activated at the beginning of the request and runs until the long running task completes and a reply is received.
The loader is assigned the class throbber so it will play as the page loads - though it is so quick you hardly notice here.
The css was modified slightly so that the animation can be applied separately.
The original HTML was invalid so that has been corrected.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
/* emulate long running tasks as result of XHR query */
sleep(mt_rand(2,5));
/* mickey mouse data for demo only */
$_POST['time']=time();
$_POST['ip']=$_SERVER['REMOTE_ADDR'];
$_POST['date']=date(DATE_ATOM);
exit(json_encode($_POST));
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>ball loader</title>
<style>
body{visibility:hidden;}
div#loader {
display:inline-block; /* occupies less vertical space! */
width: 120px;
height: 120px;
}
.throbber{
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
visibility:visible;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite ;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback( this.response )
};
xhr.onerror=function(e){
alert(e)
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send( params );
};
document.addEventListener('DOMContentLoaded',function( event ){
const submit=document.forms.search.querySelector('input[type="submit"]');
const input=document.forms.search.querySelector('input[ type="text" ][ name="anything" ]');
const throbber=document.getElementById('loader');
const out=document.querySelector('output');
document.body.style.visibility='visible';
throbber.classList.remove('throbber');
submit.addEventListener('click',function(e){
e.preventDefault();
throbber.classList.add('throbber');
ajax( location.href, 'anything='+input.value, function(r){
throbber.classList.remove('throbber');
out.textContent=r
})
});
});
</script>
</head>
<body>
<form name='search' method='post'>
<div class='caption'>
<table class='center'>
<tr>
<td class='NEONpinktxt'>
<input type='text' name='anything' value='banana' />
</td>
<td align='center'>
<input type='submit' name='anything_submit' value='Search Results' />
</td>
</tr>
</table>
<div id='loader' class='throbber'></div>
</div>
</form>
<output></output>
</body>
</html>
Related
I want to overlay a div in front of full-screen Unity - Canvas. I can overlay it when it is not full screen but can not figure out how to overlay div front of Unity Canvas while canvas is in full-screen mode.
I made a loading CSS in the index.html file of the Unity WebGL build. That I paste below.
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div id="modelLoading" class="loader"></div>
I use this CSS as a class for a div, Basically, div shows up in a normal window as seen in the image below, but it disappears in the full-screen window. Also tried: fullscreen things but didn't work.
I add screenshots and the full HTML code below.
Thank you for your help.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div id="modelLoading" class="loader"></div>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600>
</canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">DeleteThisWebGLMultiThreadWorks2</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/DeleteThisTryingMultiThreadWebGL8.loader.js";
var config = {
dataUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.data.gz",
frameworkUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.framework.js.gz",
codeUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.wasm.gz",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "DeleteThisWebGLMultiThreadWorks2",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
Instead of asking unity library to make canvas fullscreen you can make entire canvas container
fullscreen yourself using JavaScript and DOM APIs.
This way you'll have more control. See below demo code. Explanation is in the code comments.
As you haven't shared your CSS and javascript libraries I've added my own style for demo purpose.
Put this entire code in a local .html file and run it in a browser. Then press Fullscreen. You'll notice that the spinning loader is in fullscreen along with the canvas.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* new rules ********/
#unity-container {
width: 97vw;
height: 90vh;
border: 3px solid orange;
background-color: gray;
}
#fullScreenContainer {
position: relative;
height: 100%;
width: 100%;
}
#unity-canvas {
background-color: black;
/* note the dimensions are in percentages */
/* they'll scale with parent, as parent goes fullscreen*/
/* the canvas will grow as well*/
width: 100%;
height: 100%;
margin: 0 auto;
}
#unity-fullscreen-button {
border: 1px solid black;
width: fit-content;
color: Orange;
font-size: 2em;
}
#unity-fullscreen-button:hover {
background-color: lightgreen;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<!-- take this container fullscreen instead of taking only the canvas -->
<div id="fullScreenContainer">
<div id="modelLoading" class="loader"></div>
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-footer">
<div id="unity-fullscreen-button">FullScreen</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var fullContainer = document.querySelector("#fullScreenContainer");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
fullscreenButton.onclick = () => {
//don't request fullscreen on unityinstance
//unityInstance.SetFullscreen(1);
//let's take things fullscreen ourselves
//request fullscreen on the wrapper
fullContainer.requestFullscreen();
//you might want to resize canvas to fit screen.
};
//ignore this just for the demo
var canvas = document.getElementById("unity-canvas");
var ctx = canvas.getContext("2d");
ctx.font = "bold 24px verdana, sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "green";
ctx.fillText("The Game", 150, 80);
ctx.closePath();
</script>
</body>
</html>
I think if you debug unityInstance.SetFullscreen(1) in chrome developer console then you'll find that it does similar thing: resizing canvas and calling requestFullscreen() on it.
Note: StackOverflow and other online html editors do not allow fullscreen so you'll have to try the code in local .html file.
With fix your code will look like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Xplore 3D Model Editor</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
#modelLoading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#modelLoading:fullscreen {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #babfc2;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<div id="modelLoadingContainer">
<div id="modelLoading"></div>
<!-- //*** removed inline dimensions. setting inline style is not good -->
<canvas id="unity-canvas"></canvas>
</div>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button">
</div>
<div id="unity-build-title">Xplore 3D Model Editor</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
var modelLoading = document.getElementById('modelLoading');
function EnableModelLoading() {
document.getElementById("modelLoading").style.display = "";
}
function DisableleModelLoading() {
document.getElementById("modelLoading").style.display = "none";
}
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function () {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/Xplore3DModelEditorOnHeroku5.loader.js";
var config = {
dataUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.data.unityweb",
frameworkUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.framework.js.unityweb",
codeUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "Timelooper",
productName: "Xplore 3D Model Editor",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
// Avoid draining fillrate performance on mobile devices,
// and default/override low DPI mode on mobile browsers.
config.devicePixelRatio = 1;
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
//*** changes set minWidth instead of fixed width
canvas.style.minWidth = "960px";
canvas.style.minHeight = "600px";
//100% will ensure canvas will be of parent size
canvas.style.width = "100%";
canvas.style.height = "100%";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
//DisableleModelLoading();
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
//*** hide loading
modelLoading.style.display = "none";
}).catch((message) => {
alert(message);
});
};
document.getElementById('unity-fullscreen-button').addEventListener('click', function () {
var elem = document.getElementById('modelLoadingContainer');
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
document.body.appendChild(script);
</script>
</body>
</html>
You may have to adjust style on fullScreenContainer element.
I am doing a loading spinner button, When I press the button, the loading icon appears but does not disappear at the marked time, and continues with the load. Here is the code:
componentOne:
import React from 'react'
function Loader(){
return(
<>
<div className="loaderIcon"></div>
<style jsx>
{`
.loaderIcon{
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #3498bd;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
#keyframes spin{
0% { transform: rotate(0deg);}
100% { transform rotate(360deg);}
}
`}
</style>
</>
)
}
export default Loader;
componentTwo:
import React, {useState} from 'react';
import Loader from '../components/loader'
function ButtonLoading(){
const [loading, setLoading] = useState(false)
function loadData(){
setLoading ({loading: false})
setTimeout(()=>{
setLoading({loading: true});
}, 1000);
}
return(
<>
<div>
<button className="btnLoading" onClick={loadData} disabled={loading}>
{loading &&(<Loader/>)}
{loading && <span className="oneSpan">Loading page</span>}
{!loading && <span className="twoSpan">Load page</span>}
</button>
</div>
<style jsx>
{`
.btnLoading{
background-color: green;
}
.oneSpan{
color: red;
font-size: 20px;
}
.twoSpan{
color: black;
font-size: 20px;
}
`}
</style>
</>
)
}
export default ButtonLoading;
I think you got the loading backwards. I believe the function should look like `
function loadData(){
setLoading ({loading: true})
setTimeout(()=>{
setLoading({loading: false});
}, 1000);
}`
SetTimeout runs the function AFTER the timer is up
I've made an alert that pops up when a button is pressed notifying the user that text has been copied to the clipboard
<div class="alert alert-success" *ngIf="message?.length > 0" role="alert">{{ message }}</div>
<button class="btn btn-default" (click)="copy(token)" role="button">Copy</button>
The button calls a method that populates the "message" string.
I'm trying to find a way with html or css to remove this element after a couple seconds. I've tried creating an animation for it
.alert-success {
-webkit-animation: cssAnimation 5s forwards;
animation: cssAnimation 5s forwards;
}
#keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
#-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
This almost does the trick, however, it merely sets the element invisible. When the alert is created it moves the button and any elements under the alert down and when the alert "disappears", it leaves a large whitespace where the button should move back to.
Is there a way to do this?
You can use [class.visible]="isVisible" to binds the presence of the CSS class
and setTimeout function to toggle isVisible to false after few second.
template
<button (click)="showAlert()">show alert</button>
<div class="alert" [class.visible]="isVisible">
JWT copied to clipboard
</div>
component
export class AppComponent {
public isVisible: boolean = false;
showAlert() : void {
if (this.isVisible) { // if the alert is visible return
return;
}
this.isVisible = true;
setTimeout(()=> this.isVisible = false,2500); // hide the alert after 2.5s
}
}
alert style
.alert {
position: fixed;
top: 0;
right: 0.5rem;
border:1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
padding: 2rem;
background: #fff;
color: #f65656;
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.5);
transition: all 0.2s ease-in-out;
opacity: 0;
}
.visible {
opacity: 1;
transform: translateY(1.25rem);
}
stackblitz example
Add display: none as well.
#-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; display: none;}
}
And after the animation is over, programmatically using JavaScript's event: Detect the End of CSS Animations and Transitions with JavaScript — Jonathan Suh, properly hide the element using .hide() function.
Something like:
$(element).on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function () {
$(this).hide();
});
// Success Message will disappear after 4 sec in angular7
export class UnsubscribeComponent implements OnInit {
hideSuccessMessage = false;
FadeOutSuccessMsg() {
setTimeout( () => {
this.hideSuccessMessage = true;
}, 4000);
}
component.html -
------------------
<div *ngIf="!hideSuccessMessage">
<div class="col-12">
<p class="alert alert-success">
<strong [ngClass] ="FadeOutSuccessMsg()" >You are successfully
unsubscribe from this email service.</strong>
</p>
</div>
</div>
I am currently trying to replicate a website for practice, but have came to a halt due to a search box that I don't know how to create.
Now, I know how to create a normal search box, with the form and input method, however this specific search box has a slight animation.
I'll explain.
Search Box
Ok, so the search box only appears once you click the magnifying glass. Once you do this, the search box will sort of slide out from the left hand side of the magnifying glass.
How do I go about hiding the search box and only making it visible after being clicked on? And how do I make it "slide out" ?
My solution:
Use the following JavaScript code for appearing:
var button = document.getElementById("search");
var input = document.getElementById("search_input");
document.body.removeChild(input);
var permission = true;
button.addEventListener("click", appear);
function appear() {
if (permission == true) {
if(document.getElementById("search_input") == null || window.getComputedStyle(document.getElementById("search_input")).getPropertyValue("opacity") == 0) {
input.setAttribute("class", "static");
document.body.appendChild(input);
} else {
sliding();
}
}
}
function sliding() {
permission = false;
input.setAttribute("class", "sliding");
document.body.removeChild(input);
document.body.appendChild(input);
window.setTimeout(remove, 2900);
}
function remove() {
document.body.removeChild(input);
permission = true;
}
You only have to add "search" as id in the button tag or in the img tag and "search_input" as id in the input tag. And for sliding out you could use this CSS animation:
#keyframes slide {
from { left: 10%; opacity: 1;}
to { left: 90%; opacity: 0;}
}
#-webkit-keyframes slide {
from { left: 10%; opacity: 1;}
to { left: 90%; opacity: 0;}
}
#search_input {
position: absolute;
left: 10%;
}
.sliding {
animation-name: slide;
animation-duration: 3s;
-webkit-animation-name: slide;
-webkit-animation-duration: 3s;
}
Here's a simply jQuery solution.
$(document).ready(function() {
$('#trigger').click(function() {
$('#search-bar').toggleClass('search-bar-expanded');
});
});
#search-bar {
width: 0;
overflow: hidden;
display: inline-block;
transition:width 1s;
}
.search-bar-expanded {
width: 200px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="search">
<button><i class="fa fa-search" id="trigger"></i></button>
<div id="search-bar">
<input type="text"/>
</div>
</div>
The <blink> tag was never an official standard, and is now completely abandoned by all browsers.
Is there a standards compliant way of making text blink?
.blink_text
{
animation:1s blinker linear infinite;
-webkit-animation:1s blinker linear infinite;
-moz-animation:1s blinker linear infinite;
color: red;
}
#-moz-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker
{
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
<span class="blink_text">India's Largest portal</span>
No there is not. Wikipedia has a nice article about this and provides an alternative using JavaScript and CSS: http://en.wikipedia.org/wiki/Blink_element
No, there isn't in HTML. There is a good reason why the developers chose to go out of their way to remove support for an element whose implementation was otherwise untouched for upwards of a decade.
That said... you could emulate it using a CSS animation, but if I were you, I wouldn't risk CSS animations being axed due to being abused in this manner :)
Please try this one and I guarantee that it will work
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
Then put this below:
<blink><center> Your text here </blink></div>
The blink element is being abandoned by browsers: Firefox supported it up to version 22, and Opera up to version 12.
The HTML5 CR, which is the first draft specification that mentions blink, declares it as “obsolete” but describes (in the Rendering section) its “expected rendering” with the rule
blink { text-decoration: blink; }
and recommends that the element be replaced by the use of CSS. There are actually several alternative ways of emulating blink in CSS and JavaScript, but the rule mentioned is the most straightforward one: the value blink for text-decoration was defined specifically to provide a CSS counterpart to the blink element. However, support to it seems to be as limited as for the blink element.
If you really want to make content blink in a cross-browser way, you can use e.g. simple JavaScript code that changes content to invisible, back to visible etc. in a timed manner. For better results you could use CSS animations, with somewhat more limited browser support.
You could take advantage of JavaScript's setInterval function:
const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);
<span id="spanEl">This text will blink!</span>
Blinking text with HTML and CSS only
<span class="blinking">I am blinking!!!</span>
And Now CSS code
.blinking{
animation:blinkingText 0.8s infinite;
}
#keyframes blinkingText{
0%{ color: #000; }
49%{ color: transparent; }
50%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
The blick tag is deprecated, and the effect is kind of old :) Current browsers don't support it anymore. Anyway, if you need the blinking effect, you should use javascript or CSS solutions.
CSS Solution
blink {
animation: blinker 0.6s linear infinite;
color: #1c87c9;
}
#keyframes blinker {
50% { opacity: 0; }
}
.blink-one {
animation: blinker-one 1s linear infinite;
}
#keyframes blinker-one {
0% { opacity: 0; }
}
.blink-two {
animation: blinker-two 1.4s linear infinite;
}
#keyframes blinker-two {
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>
<blink>Blinking text</blink>
</h3>
<span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
<p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
</body>
</html>
sourse: HTML blink Tag
If you're looking to re-enable the blink tag for your own browsing, you can install this simple Chrome extension I wrote: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. It just hides and shows all <blink> tags on every page using setInterval.
HTML Code
<span class="blinking">Am I blinking?</span>
CSS code
.blinking{
animation:blinkingText 1.2s infinite;
}
#keyframes blinkingText{
0%{ color: #000; }
49%{ color: #000; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #000; }
}
<span class="blinking">Am I blinking?</span>
Ref:https://html-online.com/articles/blinking-text-css-animation/
A small javascript snippet to mimic the blink , no need of css even
<span id="lastDateBlinker">
Last Date for Participation : 30th July 2014
</span>
<script type="text/javascript">
function blinkLastDateSpan() {
if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
$("#lastDateBlinker").css("visibility", "visible");
setTimeout(blinkLastDateSpan, 200);
} else {
$("#lastDateBlinker").css("visibility", "hidden");
setTimeout(blinkLastDateSpan, 200);
}
}
blinkLastDateSpan();
</script>
The solution below is interesting because it can be applied across multiple elements concomitantly and does not trigger an error when the element no longer exists on the page. The secret is that it is called passing as a parameter a function in which you must return the elements you want to be affected by the blink. Then this function is called back with each blink. HTML file below:
<!doctype>
<html>
<head>
<style>
.blink {color: red}
</style>
</head>
<body>
<h1>Blink test</h1>
<p>
Brazil elected President <span class="blink">Bolsonaro</span> because he
was the only candidate who did not promise <span class="blink">free things</span>
to the population. Previous politicians created an image that would
bring many benefits, but in the end, the state has been getting more and
more <span class="blink">burdened</span>. Brazil voted for the
realistic idea that <span class="blink">there is no free lunch</span>.
</p>
</body>
<script>
var blink =
{
interval_in_miliseconds:
400,
on:
true,
function_wich_returns_the_elements:
[],
activate:
function(function_wich_returns_the_elements)
{
this.function_wich_returns_the_elements = function_wich_returns_the_elements;
setInterval(blink.change, blink.interval_in_miliseconds);
},
change:
function()
{
blink.on = !blink.on;
var i, elements = [];
for (i in blink.function_wich_returns_the_elements)
{
elements = elements.concat(blink.function_wich_returns_the_elements[i]());
}
for (i in elements)
{
if (elements[i])
{
elements[i].style.opacity = blink.on ? 1 : .2;
}
}
}
};
blink.activate
(
[
function()
{
var
i,
node_collection = document.getElementsByClassName('blink'),
elements = [];
for (i = 0; i < node_collection.length; i++)
{
elements.push(node_collection[i]);
}
return elements;
}
]
);
</script>
</html>
can use this
#keyframes blinkingText
{
0%{ opacity: 1; }
40%{ opacity: 0; }
60%{ opacity: 0; }
100%{ opacity: 1; }
}
.blinking
{
animation:blinkingText 2s reverse infinite;
}
Here's some code that'll substitute for the blink tag
<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
setTimeout(whiteFunc,blacktime);
}
</script>