How to load page elements one after another in html - html

I want to load two elements of a page in different time.Here's my code:
<html>
<body >
<div style="background-image: url(im.jpg); height: 400px; width: 400px;">
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
</body>
</html>
Here,I want to load the page with background image and test1 text first,then after a moment I want to load the 2nd text test2.How can I specify this loading time?


http://jsfiddle.net/q2VJ4/
#keyframes dropHeader {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes dropHeader {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
.test2 {
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 3s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 3s;
}


Make the element hidden from start, then you can use a timer in Javascript to show it.
Add an id to the element so that you can easily find it from the script:
<div class="test2" id="test2">
In your <head> tag (which is missing in the page, it goes before the <body> tag) you can add a style that hides the element:
<style>
#test2 { display: none; }
</style>
Then you can add a script to the <head> tag that will show the element after for example two seconds:
<script>
window.onload = function(){
window.setTimeout(function(){
document.getElementById('test2').style.display = 'block';
}, 2000);
};
</script>


You can do this with jquery with the hide show option http://api.jquery.com/show/
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).show( "slow", function() {
// Animation complete.
});
});


This will work for you:
Loads the first element, then loads the second element.
http://jsfiddle.net/azRwq/2/
Using jQuery (make sure to include the script / src in your html)
Loads the first one after 2 second, and loads the second one after 4 seconds.:
$( "#test1" ).hide();
$( "#test2" ).hide();
setTimeout(function(){
$( "#test1" ).show();
}, 2000);
setTimeout(function(){
$( "#test2" ).show();
}, 4000);
HTML:
<div id="test1" style="background: red;">
<p>test1</p>
</div>
<div id="test2" style="background: blue;">
<p>test2</p>
</div>
Another option would be to remove remove:
$( "#test1" ).hide();
$( "#test2" ).hide();
and use display:none; in the css for each element

Related

Delay the toggleClass action

I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.
How can I delay the content from being loaded in?
This is the HTML :
$("#button-1").on("click", function() {
$(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
$(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})
#modal-1 {
width: 33.33%;
height: 100vh;
background-color: green;
left: 0;
top: 0;
}
.modals {
transition-timing-function: ease-out;
transition-duration: 1000ms;
position: absolute;
}
.active {
width: 100vw !important;
height: 100vh !important;
}
.show-hidden-content {
display: block !important;
}
.hidden-content-1 {
display: none;
}
.hide-shown-content {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
<div class="hidden-content-1">
<h1> TEST </h1>
</div>
<div class="main-page-content-1">
<h1>TEST </h1>
</div>
<a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
</a>
</div>

It seems you are looking something like:
$('#button-1').on('click', function () {
setTimeout(() => {
$('.hidden-content-1').toggleClass('show-hidden-content');
$('.main-page-content-1').toggleClass('hide-shown-content');
}, 2000);
});

You might want to use animation-delay
#target {
animation: fade-in 250ms ease-out 1s 1 normal both running;
}
#keyframes fade-in {
0% {
opacity:0;
} 100% {
opacity:1;
}
}

css animation disappeared when the first one was finished

I have a button that when I click it, it makes an animation for an image to move up.
Every-time I click the button, it should add another image that moves up.
The problem is: If I have tapped the button more than one time, the first one completes, but all the other images just disappears before reaching the point.
css
.zoom{
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
#keyframes zoom{
0%{opacity: 0}
50%{opacity: 1}
100%{opacity: 0; top: 1%;}
}
html
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="image.png" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
</script>
</body>
The animation comes from this tutorial
clicking the button more than 1 time, should show more than 1 image going up.
The problem is:
When I click many times during the 2 seconds, the images are displayed, but when the 2 seconds are gone from the first click, all of the images disappear.

The problem is that on the timeout all the .zoom images are removed.
This snippet 'remembers' which img is to be removed on each timeout.
It is important in a practical situation that these images are removed when no longer needed else you could eventually run out of store.
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.zoom {
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
#keyframes zoom {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0;
top: 1%;
}
}
</style>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="https://picsum.photos/id/1084/640/360?grayscale" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
const thisImg = $(this).closest(".item-info")
.find("img")
.clone();
thisImg.addClass("zoom")
.appendTo("body");
setTimeout(function() {
thisImg.remove();
}, 2000);
});
</script>
</body>

$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
if(!$('.zoom').get(0) )
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
Try it this way and tell if everythins is ok :)

How do I create this search box animation?

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>

Trigger a CSS Animation when the user scrolls to page section

I have a simple CSS animation on my site, where I want to show 5 divs showing one at a time in a row.
Everything works fine, but I want to make a trigger to that animation, when the user scrolls to that particular section on my site(now the animation starts when the page loads).
Here is my code:
<div id="space"></div>
<div id="container">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
</div>
CSS:
#space {
height: 700px;
background-color: blue;
}
#container img {
opacity: 0;
}
#keyframes fdsseq {
100% { opacity: 1; }
}
#container img {
animation: fdsseq .5s forwards;
}
#container img:nth-child(1) {
animation-delay: .5s;
}
#container img:nth-child(2) {
animation-delay: 1s;
}
#container img:nth-child(3) {
animation-delay: 1.5s;
}
#container img:nth-child(4) {
animation-delay: 2s;
}
#container img:nth-child(5) {
animation-delay: 2.5s;
}
https://jsfiddle.net/Lwb088x5/

You need JavaScript to do this.
In the example(s) below, a scroll event listener to attached, and the animate class is added to the #container element if the img elements are visible:
Updated Example
#container.animate img {
animation: animation .5s forwards;
}
document.addEventListener('scroll', function (e) {
var top = window.pageYOffset + window.innerHeight,
isVisible = top > document.querySelector('#container > img').offsetTop;
if (isVisible) {
document.getElementById('container').classList.add('animate');
}
});
Alternatively, you could also use jQuery as well:
Updated Example
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#container img').offset().top;
$('#container').toggleClass('animate', isVisible);
});

Alternative for <blink>

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>