there is an api response in a website which can't be accessed outside this site requests. I want to access it response.
to do that I am trying iframe with code:-
html
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
css
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
Javascript
console.log(fingerprint);
it is basically behind a loading screen
:-
full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="loading.js"></script>
<link rel="stylesheet" href="loading.css" type="text/css" media="all" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Device Verification</title>
</head>
<body>
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
<div class="contents">
<div class="load-icon center">
<span></span>
<span></span>
<span></span>
</div>
<h3>Verifying your Device for Security Reasons before accessing your account</h3><div class="text-area">
<p>This process is automatic. Your browser will redirect you to your requested content shortly.
</div>
</p>
<div class="load-text-area">
<p> We request you to allow us upto 5 seconds.</p>
</div>
</div>
<div class ="last">
<p>Verification id is <mark class="purple-dark">41E78vF6
</mark></p></div>
</body>
</html>
Full css
body{
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
h3 {
padding-left: 2%;
padding-right: 2%;
padding-top: 8%;
color: black;
text-align: center;
font-family: roboto;
}
.contents {
margin-top: 30%;
}
.text-area {
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-family: roboto;
margin-top: 4%;
}
.load-text-area{
margin-left: 3.5%;
font-family: roboto;
margin-top: 15%;
}
mark.purple-dark{
color: purple;
background-color: transparent;
}
.last{
margin-left: 3.5%;
font-family: roboto;
margin-top: 0.2%;
}
.load-icon {
height: 20px;
width: 100px;
}
.load-icon span {
position: absolute;
display: inline-block;
background: #222;
width: 20%;
height: 100%;
border-radius: 100px;
}
.load-icon span:nth-of-type(1) {
left: 0;
}
.load-icon span:nth-of-type(2) {
left: 40%;
}
.load-icon span:nth-of-type(3) {
right: 0;
}
/* Animation */
.load-icon span {
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.load-icon span:nth-of-type(2) {
animation-delay: .2s;
}
.load-icon span:nth-of-type(3) {
animation-delay: .4s;
}
/* Keyframes */
#keyframes loading {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* This isn't needed, just styling pen. */
.center {
position: absolute;
margin-left: 37%;
margin-top: 29%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
and full js
var fingerprint = document.getElementById('myFrame').contentWindow.document.body
console.log(fingerprint);
I am getting 2 error
which is :-
in the image Dom exception
and 2nd is
iframe logging error ' can't read property 'contentWindow' of null
my current goal is to get json api response:-
The api response I want to Capture and put it in a file
Related
The slider works fine; the testimonial changes with a click of the left or right chevron arrow buttons. But I want to make it so that when I click the right or left arrow, it does a fade-out into a fade-in transition into the next testimonial by means of opacity. As you can see that is what I attempted to do on the second script, but it didn't work. I'm not sure why it is not working, any help would be appreciated.
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);" onclick="navClickTransition(0);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);" ; onclick="navClickTransition(0);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slide_index - 1].style.display = "block";
}
</script>
<script type="text/javascript">
function navClickTransition() {
const navClick = document.getElementsByClassName("testimonial");
navClick.style.opacity = 1;
}
</script>
</html>
It was quite alright, however you missed a couple of steps in the animation process, here is a modified version of your code, I explained everything in comments.
Edited version whit fade out and fade in animations:
.testimonial {
position: relative;
top: 0px;
max-width: 800px;
max-height: 800px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
text-align: center;
line-height: 2;
}
.active{
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.inactive{
opacity: 0;
animation-name: fadeOut;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.testimonial span {
font-weight: 500;
font-size: 25px;
color: #fff;
}
.testimonial q {
font-size: 22px;
color: #fff;
}
.testimonial img {
padding-right: 10px;
padding-left: 10px;
width: 100px;
border-radius: 50%;
}
.left {
position: absolute;
cursor: pointer;
bottom: 120px;
right: 370px;
width: 30px;
height: 30px;
}
.right {
cursor: pointer;
position: absolute;
width: 30px;
height: 30px;
bottom: 120px;
left: 370px;
}
.testimonials h1 {
position: relative;
font-size: 35px;
text-align: center;
top: 90px;
color: #fff;
}
.testimonials {
position: relative;
background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
background-size: cover;
font-size: 10px;
color: #000;
}
.testimonials::before {
content: "";
background-image: linear-gradient(35deg, darkgrey, darkslategrey);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.8;
}
.testimonialImg img {
position: relative;
text-align: center;
max-width: 140px;
top: 0px;
left: 160px;
}
.testimonialImg h1 {
position: relative;
top: 0px;
}
.chevron img {
filter: invert(1);
}
.testimonial4 img {
background: white;
border-radius: 50%;
padding-top: 20px;
padding-bottom: 20px;
}
.testimonial1 img {
padding: 0px;
background: white;
border-radius: 50%;
}
.testimonial3 img {
padding: 0px;
}
.testimonial2 img {
padding: 0px;
}
#keyframes fadeIn {
from{opacity: 0}
to{opacity: 1}
}
#keyframes fadeOut {
from{opacity: 1}
from:{opacity: 0}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="testimonials">
<div class="testimonialImg">
<h1>Testimonials</h1>
<img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png">
</div>
<div class="testimonial testimonial1">
<img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"><br>
<span>Albert Einstein</span> <br>
<q>We cannot solve our problems with the same thinking we used when we created them.</q>
</div>
<div class="testimonial testimonial2">
<img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"><br>
<span>Nelson Mandela</span> <br>
<q>I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.</q>
</div>
<div class="testimonial testimonial3">
<img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"> <br>
<span>Abraham Lincoln</span> <br>
<q>You cannot escape the responsibility of tomorrow by evading it today.</q>
</div>
<div class="testimonial testimonial4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"><br>
<span>Martin Luther King Jr</span> <br>
<q>Faith is taking the first step even when you don't see the whole staircase.</q>
</div>
<div class="chevron">
<!-- you cant really have two onclick listeners, call the transition in the nextSlide instead -->
<img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);">
<img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&ext=jpg" class="right" onclick="nextSlide(1);">
</div>
</div>
<script type="text/javascript">
var slide_index = 1;
displaySlides(slide_index);
function nextSlide(n) {
displaySlides(slide_index += n);
}
function currentSlide(n) {
displaySlides(slide_index = n);
}
// you can pass the testemonial index to shorten your array
// tip: I would really use an id for the index not a class hece you wont have another testemonial w/ the same index
function navClickTransition(index) {
const navClick = document.getElementsByClassName("testimonial"+index);
// navClick is an array it does not have a style property
//navClick.style.opacity = 1;
// this is more like it, however you still not animating the stuff just setting the opacity to 1
for (let i = 0; i < navClick.length; i++){
navClick[i].style.opacity = 0;
}
}
// in the end you don't even need this function
// for the animation I would use a css animation whit a separate class that you can add to the testemonals on demand
function displaySlides(n) {
var i;
var slides = document.getElementsByClassName("testimonial");
var current;
for (i = 0; i < slides.length; i++) {
if (slides[i].style.display != "none")
current = slides[i];
}
if (n > slides.length) {
slide_index = 1
}
if (n < 1) {
slide_index = slides.length
}
// switches the animation classes you'll find inactive under active in the css
current.classList.remove("active");
current.classList.add("inactive");
// waits for a sec to let the animation finish before loading the next testemonial
setTimeout(() => {
for (i = 0; i < slides.length; i++) {
// you'll find the active class under the testemonial calss and the kexframes at the end of the css
slides[i].classList.remove("active", "inactive");
slides[i].style.display = "none";
}
slides[slide_index - 1].classList.remove("inactive");
slides[slide_index - 1].style.display = "block";
slides[slide_index - 1].classList.add("active");
}, 1000) // 1s is the animation hence we time out for 1000 mils
}
</script>
</body>
</html>
I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
The last line in the JS portion of your code adds a clicked class to the .circ element. Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
$(".circ").addClass("clicked"); // adds "clicked" after the very first click
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
/* this new rule only applies after you have clicked once AND the wave animation has already been triggered */
.circ.clicked:not(.rotate_circ) {
animation: unwave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
#keyframes unwave {
from {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
to {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
CSS transition property is not working as expected in IE and Edge browsers. Here I have applied transition for span element, which is working properly in other browsers except for IE and Edge. Also tried -ms-transition property. Here are my code snippets. The switch-handle element transition not working in IE and Edge.
function handlers() {
var warpper = document.getElementsByClassName("switch-wrapper"),
child = warpper[0].children;
if (!child[1].classList.contains('active')) {
child[0].checked = true;
child[1].classList.add('active');
child[2].classList.add('active');
} else {
child[0].checked = false;
child[1].classList.remove('active');
child[2].classList.remove('active');
}
}
input[type=checkbox] {
width: 1px;
height: 1px;
opacity: 0;
position: absolute;
}
/*------------Wrapper CSS---------------*/
.switch-wrapper {
position: relative;
width: 70px;
cursor: pointer;
height: 22px;
}
/*------------Inner CSS---------------*/
.switch-inner {
height: 22px;
position: absolute;
transition: 0.6s;
border: 1px solid;
width: 70px;
overflow: hidden;
box-sizing: border-box;
}
/*------------ SwitchBar CSS---------------*/
.switch-on,
.switch-off {
position: absolute;
height: 20px;
width: 100%;
user-select: none;
transition: 0.6s;
line-height: 21px;
}
.switch-on {
left: -100%;
text-indent: 14px;
}
.switch-off {
text-indent: 30px;
left: 0;
}
/*------------ Handle CSS---------------*/
.switch-handle {
position: absolute;
height: 14px;
width: 14px;
margin: 3px;
background-color: #1b191e;
top: 1px;
left: 1px;
transition: 0.6s;
}
/*------------ Active CSS---------------*/
.switch-inner.active .switch-on {
background-color: aquamarine;
left: 0;
}
.switch-inner.active .switch-off {
left: 100%;
transition: 0.6s;
}
.switch-handle.active {
left: calc(100% - 21px);
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body>
<h2>Switch</h2>
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<span class="switch-inner" onclick="handlers()">
<span class="switch-on">On</span>
<span class="switch-off">Off</span>
</span>
<span class="switch-handle" onclick="handlers()"></span>
</div>
</body>
</html>
This works in IE11 and Edge.
Only thing I noticed is in IE .switch-handle transition is not working. It is due to IE issues with calc and transition combination. Change calc() and it will work
Change
left: calc(100% - 21px);
to
left: 47px;
I have a nice list of CSS generated cards. They contain icons and text and have a nice animation to expand once you tap on them, to reveal more icons and options. I hard coded the list and got it looking and behaving exactly the way I wanted.
Now, I have some JSON data on a database and I want to use that data to populate the list dynamically.
Problem: It works great, except the CSS animations no longer apply.
How can I fix this? Here's my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/customFitFunctions.js"></script>
</head>
<body>
<!--APPEND CARDS-->
<ul id="cardList" class="cards">
</ul>
</body>
</html>
JavaScript:
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
var workouts = snap.val();
for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
{
$("#cardList").append("<li><div class='card transform'>\n\
<div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>\n\
<img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>\n\
<img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />\n\
<img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>\n\
<img src='images/tenMinutes.png' width='66' alt='' /></div></div>\n\
<div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>\n\
<img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>\n\
</div><div class='deleteIt'><a class='deleteButton' href='#'>\n\
<img src='images/thrashButtonUp.png' width='60' alt='' />\n\
<img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>\n\
<a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>\n\
<img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
}
});
jQuery:
// Triggers CSS animation for cards.
$(".card").click(function()
{
$(this).toggleClass("transformActive");
$(".disappear", this).toggleClass("appear");
});
CSS:
/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
position: absolute;
width: 100%;
top: 60px;
list-style: none;
text-decoration: none;
text-align: center;
z-index: -1;
}
.cards li
{
position: relative;
width: 100%;
padding-bottom: 10px;
}
.card
{
position: relative;
background-color: #ffffff;
height: 150px;
width: 100%;
left: -6%;
border-radius: 8px;
box-shadow: 2px 2px 2px #686868;
}
.transform
{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.transformActive
{
background-color: #ffffff;
height: 260px;
width: 100%;
box-shadow: 6px 6px 6px #888888;
}
/* CARD CONTENT SECTION */
.cardInfo
{
position: relative;
margin: auto;
width: 95%;
height: 130px;
text-align: left;
}
.cardInfo h3
{
position: relative;
top: 5px;
}
.cardInfo p
{
position: relative;
color: black;
text-align: right;
top: -40px;
}
.startIt
{
position: absolute;
bottom: 0px;
}
.timeIcon
{
position: absolute;
bottom: 0px;
left: 78%;
}
.infoIcons
{
position: relative;
margin: auto;
top: -20px;
width: 52%;
height: 100px;
}
.infoIcons img
{
margin-left: 6px;
}
#holder
{
position: relative;
width: 100%;
height: 80px;
}
/* CARD ANIMATION */
.disappear
{
position: relative;
width: 95%;
height: 40%;
top: 8%;
margin: auto;
opacity: 0;
}
.appear
{
-webkit-animation: appearFade 1.2s ease forwards;
-moz-animation: appearFade 1.2s ease forwards;
-o-animation: appearFade 1.2s ease forwards;
-ms-animation: appearFade 1.2s ease forwards;
animation: appearFade 1.2s ease forwards;
}
#keyframes appearFade
{
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
/* CARD OPTIONS ICONS */
.playIt
{
position: absolute;
left: 0px;
}
.playButton img:last-child
{
display: none;
}
.playButton:hover img:first-child
{
display: none;
}
.playButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 3px;
top: 3px;
}
.deleteIt
{
position: relative;
margin: auto;
top: 25px;
}
.deleteButton img:last-child
{
display: none;
}
.deleteButton:hover img:first-child
{
display: none;
}
.deleteButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 2px;
top: 2px;
}
.modifyIt
{
position: absolute;
right: 0px;
top: 0px;
}
.modifyButton img:last-child
{
display: none;
}
.modifyButton:hover img:first-child
{
display: none;
}
.modifyButton:hover img:last-child
{
display: inline-block;
position: relative;
left: 0px;
top: 3px;
}
Check if removing the </div> close tag in the <div class="card transform"> works well. I don't know, how are you using your css classes but looks like that the childs elements are outside the parent div container.
I'm starting my journey in creating webpages. I crave something to try to imitate windows 10 start UI as well as there animation on browser. But the problem is that I'm not yet knowledgeable with javascript. If you dont mind please do check my codes for some problems. Thank you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
CSS
#font-face {
font-family: RobotoL;
src:url(fonts/Roboto-Light.ttf);
}
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
JavaScript
function slideShow() {
setInterval( function show(){
var next = 0;
if (next == 0) {
animate();
next++:
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('samDesc').style.marginTop = "-2%";
document.getElementById('samDesc1').style.marginTop = "25%";
document.getElementById('samDesc1').style.opacity = "1";
document.getElementById('samDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('samDesc').style.marginTop = "17%";
document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('samDesc1').style.opacity = "0";
document.getElementById('samDesc').style.opacity = "1";
}
Use slideShow(); at the end of your javascript code.
Anyway, I recommend you to use http://unslider.com/ as a jQuery plugin.
Hi Please check this code now working you define the wrong semicolon symbol the next++; and element id is wrong in js wrong i have fixed this issue check now this code.
<!DOCTYPE html>
<html>
<head>
<title>WinCalc</title>
<style>
body {
overflow: hidden;
}
#holder {
width: 50%;
height: 100%;
margin-left: 25%;
margin-right: 25%;
position: absolute;
background-color: #34495e;
}
#wrapper {
background-color: white;
position: absolute;
margin-top: 24%;
margin-bottom: 25%;
margin-right: 25%;
margin-left: 25%;
width: 50%;
height: 50%;
}
#savButton {
border-style: none;
background-color: #3498db;
position: relative;
opacity: .1;
height: 50%;
width: 100%;
}
#savButtondesc {
background-color: red;
width: 100%;
height: 50%;
position: absolute;
}
#savDesc {
width: 100;
margin-top: 17%;
margin-bottom: 20%;
margin-right: 10%;
margin-left: 10%;
font-family: RobotoL;
font-size: 30px;
color: white;
transition: 1s;
}
#savDesc1 {
font-family: RobotoL;
font-size: 15px;
color: white;
margin-left: 1%;
margin-top: -50%;
transition: 1s;
opacity: 0;
}
</style>
<script type="text/javascript" >
function slideShow() {
var next = 0;
setInterval( function show(){
if (next == 0) {
animate();
next++;
}
else {
reverse();
next--;
}
},1000);
}
function animate(){
document.getElementById('savDesc').style.marginTop = "-2%";
document.getElementById('savDesc1').style.marginTop = "25%";
document.getElementById('savDesc1').style.opacity = "1";
document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
document.getElementById('savDesc').style.marginTop = "17%";
// document.getElementById('samvDesc1').style.marginTop = "-55%";
document.getElementById('savDesc1').style.opacity = "0";
document.getElementById('savDesc').style.opacity = "1";
}
</script>
</head>
<body onload="slideShow()">
<form method="POST" action="" autocomplete="off">
<div id="holder">
<div id="wrapper">
<div id="savButtondesc">
<div id="savDesc"> Sum, Average & Max</div>
<div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
</div>
<input id="savButton" type="button" name="sav">
</div>
</div>
</form>
</body>
</html>
For the setInterval function in slideShow(), put either
setInterval('animate()', 1000);
Or
setInterval(animate, 1000);