Please someone help me out on this I got stuck in my code. I'm putting my code complete below please have a look and please try to provide better solution.
<!DOCTYPE html>
<!--[if lte IE 7]><html id="ie" class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 8]><html id="ie8" class="no-js lt-ie10 lt-ie9" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if IE 9]><html id="ie9" class="no-js lt-ie10" lang="en" xmlns="http://www.w3.org/1999/xhtml"><![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<!-- <link rel="stylesheet" href="css/site.css" /> -->
<link href='https://fonts.googleapis.com/css?family=Exo:400,100,200,300,500,600,700,800,900|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body.ticketDetail {
margin: 0;
padding: 0;
color: #292929;
font: 400 14px "Exo",sans-serif;
}
.fixed-container {
position: fixed;
top: 0;
}
.main-container {
padding: 85px 30px 100px;
background: none;
}
.toggle-wrap {
position: fixed;
z-index: 9;
box-shadow: 3px 0px 5px #000;
height: 59px;
}
.toggle-wrap {
width: 100%;
background: #f3f3f3;
background: rgba(243,243,243,0.8);
filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
}
.container-right>div {
height: 175px;
border-left: 13px solid #bbc3c6;
background: #f4f4f4;
margin: 0 0 8px;
-webkit-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-moz-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-ms-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
-o-transition: transform .35s ease-in-out, background 0.8s ease-in-out;
transition: transform .35s ease-in-out, background 0.8s ease-in-out;
}
.e-stand-b {
border-left: 13px solid #f39c11 !important;
}
.e-stand-a {
border-left: 13px solid #f1c40f !important;
}
.n-stand-a {
border-left: 13px solid #3497db !important;
}
.n-stand-b {
border-left: 13px solid #297fb8 !important;
}
.s-stand-a {
border-left: 13px solid #dae0e0 !important;
}
.w-stand-a {
border-left: 13px solid #e74b3c !important;
}
.w-stand-b {
border-left: 13px solid #c1392b !important;
}
.container-right>div:before {
content: '';
display: table;
}
.container-right>div:after {
content: '';
display: table;
clear: both;
}
.container-right>div:hover {
-webkit-transform: scale(1.03);
-moz-transform: scale(1.03);
-ms-transform: scale(1.03);
-o-transform: scale(1.03);
transform: scale(1.03);
background: #000;
background: rgba(0,0,0,0.5);
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
.main-container .container-fluid {
padding: 0;
position: relative;
}
.container-right-column {
float: right;
width: 100%;
}
.container-right {
margin-left: 650px;
position: relative;
}
.container-left {
position: relative;
float: left;
background: #f4f4f4;
text-align: center;
width: 630px;
margin-right: -100%;
height: 635px;
}
.container-left h2 {
color: #9C9A9A;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 35px 0 34px;
}
.container-left img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.container-left a {
position: absolute;
opacity: 0;
transition: opacity .5s ease-in;
outline: none;
}
a.e-stand-b {
top: 14%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.e-stand-a {
top: 22%;
left: 20%;
z-index: 2;
width: 60%;
height: 8%;
}
a.n-stand-b {
top: 21%;
left: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.n-stand-a {
top: 28%;
left: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.s-stand-b {
top: 21%;
right: 4%;
z-index: 2;
width: 9%;
height: 60%;
}
a.s-stand-a {
top: 28%;
right: 13%;
z-index: 2;
width: 8%;
height: 47%;
}
a.w-stand-b {
bottom: 10%;
left: 12%;
z-index: 2;
width: 76%;
height: 8%;
}
a.w-stand-a {
bottom: 18%;
left: 18%;
z-index: 2;
width: 63%;
height: 8%;
}
</style>
</head>
<body class="ticketDetail">
<div class="toggle-wrap">
</div>
<div class="main-container">
<div class="container-fluid">
<div class="container-right-column">
<div class="container-right">
<div class="e-stand-a">
</div>
<div class="s-stand-a">
</div>
<div class="w-stand-a">
</div>
<div class="n-stand-a">
</div>
<div class="e-stand-b">
</div>
<div class="s-stand-b">
</div>
<div class="w-stand-b">
</div>
<div class="n-stand-b">
</div>
</div>
</div>
<div id="fixed-container">
<div class="container-left">
<h2>Stadium Name</h2>
<img src="images/goan-stadium-img.png" alt="stadium" usemap="#Stadium" id="#Stadium" />
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 765) {
$('#fixed-container').css('position', 'initial');
}
if (windowSize > 765) {
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="b-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('b-'+stand_class);
});
// ----------***********Ticket Detail Hover method***********---------------
$("div.e-stand-a, div.e-stand-b, div.s-stand-a, div.s-stand-b, div.w-stand-a, div.w-stand-b, div.n-stand-a, div.n-stand-b").mouseenter(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).addClass('b-'+stand_class[0]);
}).mouseleave(function() {
var stand_class= $(this).attr('class');
stand_class = stand_class.split(' ');
$(this).removeClass('b-'+stand_class[0]);
});
/*$('#floatingElement').followMe({ container: '.container-column-main' });*/
}
if (windowSize <= 765) {
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').attr('href', '#to-top');
// ----------***********Ticket Detail Prepend method***********---------------
$('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function() {
$('[class*="bm-"]').removeClass(function(index, className) {
return (className.match(/(^|\s)bm-\S+/g) || []).join(' ');
});
var stand_class= $(this).attr('class');
$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
$('div.'+stand_class).addClass('bm-'+stand_class);
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
var sliderTop = $('.container-right').height(); // header size
console.log(sliderTop);
$(window).scroll(function () {
//var notAnimated = true;
var scrollTop = $(window).scrollTop();
//console.log(sliderTop + " " + scrollTop);
if (scrollTop > 300) {
$('#fixed-container').addClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '300px');
}
if (scrollTop > sliderTop) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
if (scrollTop < 300) {
$('#fixed-container').removeClass('fixed-container');
$('.contact-info-wrap').css('padding-top', '50px');
}
});
</script>
</body>
</html>
Right now when I click on the left side stadium anyone of block so accordingly in the right side column it is sliding down at the top of the right container.
And after scrolling down the page I make the left container position fixed and right container scroll-able. And clicking on any stadium block the right container blocks showing on top of container only.
But what I really want that when I scroll down and then click on the left container stadium block, the right container blocks should be shown in visible window not at the top of the right container.
Please someone help me out it's really needy... And please let me know.
Thanks
Related
So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn't work i'm using scrollMagic cdn.
animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="contenet">
<div class="overflow-wrap">
<header id="header">
<img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
<div class="container container--hero">
<div class="hero__header">
<h1 class="hero-heading">The Webflow Expert.</h1>
</div>
</div>
</header>
</div>
<section class="section section--manifest">
<div class="section-header section-header--intro">
<h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
</div>
</section>
<script src="./JS/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::-webkit-scrollbar {
display: none;
}
body {
background-color: #1d1d1f;
color: white;
font-family: Inter, sans-serif;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#header {
display: flex;
height: 100vh;
align-items: center;
position: sticky;
backface-visibility: hidden;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform-style: preserve-3d;
}
.overflow-wrap {
overflow: hidden;
height: 100%;
}
#hero-ui {
position: relative;
left: 50%;
z-index: 1;
width: 16.9em;
max-width: none;
margin-top: 3.2em;
margin-left: -8.45em;
font-size: 10vw;
opacity: 0;
}
.hero-heading {
will-change: transform, opacity;
animation: fadeIn 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: backwards;
animation-delay: 0.5s;
font-size: 92px;
}
.container.container--hero {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: flex;
height: 100vh;
max-width: none;
padding-top: 100px;
padding-bottom: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
}
.section.section--manifest {
padding-top: 100px;
padding-bottom: 160px;
}
.section-header.section-header--intro {
position: relative;
max-width: 1050px;
margin-bottom: 0;
}
.section-header {
width: 90%;
max-width: 980px;
margin-right: auto;
margin-bottom: 142px;
margin-left: auto;
text-align: left;
}
.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
font-size: 103px;
}
.fluid-gradient-heading.fluid-gradient-heading--hero {
margin-right: auto;
margin-left: auto;
line-height: 1.05;
text-align: center;
}
.fluid-gradient-heading {
background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-animation: intro-gradient 10s infinite ease both;
-moz-animation: intro-gradient 10s infinite ease both;
animation: intro-gradient 10s infinite ease both;
}
.fluid-gradient-heading {
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 92px;
line-height: 1.1;
letter-spacing: -.045em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
JAVASCRIPT
/*==================== zoom out image ====================*/
let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
triggerElement: "#header",
triggerHook: 0,
duration: "3000ms"
})
.setPin('#header')
.setClassToggle('#header')
.setTween(zoomHeader)
.addTo(controller);
/*==================== smooth link scrooling====================*/
let $root = $('html, body');
$('a[href^="#"]').click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
/*==================== Change opacity image ====================*/
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
$('#hero-ui').css({
opacity: function() {
let elementHeight = $(this).height();
return 1 - (elementHeight - scrollTop) / elementHeight;
}
});
});
In your scroll event listener you may check actual device width.
Then you can disable animation when it is mobile.
Smth like
$(window).scroll(function() {
if($(window).width() < 500) return
.....
}
You can apply the same check for click event.
Also it will be good if you handle resize/load events as well.
I'm working on a project for computer science where I have to make a website. For this, me and my partner wanted a modal with information about us. One of the requirements is that we make the site work on different platforms. This is where the problem lies. Opening the modal on my phone while having the phone standing up works fine, but when transitioning to landscape it breaks and it does not return to normal when I turn it back.
Here is a snippet of the html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Machine Learning</title>
<script src="scripts/embedHTML.js"></script>
<script src="scripts/popUp.js"></script>
<script src="scripts/underline.js"></script>
<script src="scripts/modal.js"></script>
<link rel="stylesheet" href="stylesheets/main.css" />
<link rel="stylesheet" href="stylesheets/about-us.css" />
<link rel="stylesheet" href="stylesheets/popup.css" />
<link rel="stylesheet" href="stylesheets/modal.css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img id="logo" src="images/logo.png" alt="logo image"></img>
<h1 id="title">Machine Learning</h1>
</header>
<article id="about-tijmen" class="modal-data" embed-html="pages/Tijmen.html"></article>
<article id="about-marijn" class="modal-data" embed-html="pages/Marijn.html"></article>
<div id="glass-pane" class="glass-pane"></div>
<article id="modal" class="modal">
<button id="closeModalButton" onclick="toggleModal()">x</button>
<article id="modal-dialogue"></article>
</article>
<script>
embedHTML();
</script>
</body>
</html>
The CSS:
.modal-data
{
display: none;
}
.modal {
pointer-events: none;
opacity: 0;
position: fixed;
z-index: 1000;
background: red;
border-radius: 20px;
border: 2px solid black;
margin-top: 0px;
padding-bottom: 20px;
left: 50%;
top: 50%;
transition: opacity .25s linear, display .25s linear;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
box-shadow: 0 0 100px 10px black inset;
width: 80vw;
}
.modal.open
{
pointer-events: all;
opacity: 100;
}
.glass-pane
{
pointer-events: none;
transition: opacity .25s linear;
background: rgba(0, 102, 255, 0.5);
z-index: 110;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0;
}
.glass-pane.shown
{
pointer-events: all;
opacity: 1;
}
#closeModalButton {
position: absolute;
top: 0;
right: 0;
width: 40px;
line-height: 20px;
margin: 0;
border: 2px solid black;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-left-radius: 20px;
cursor: pointer;
font-size: 15px;
}
#modal-dialogue p {
color: rgb(250, 232, 235);
width: 90%;
margin: auto;
margin-top: 2%;
}
ol{
color: rgb(250, 232, 235);
display: table;
margin: 0 auto;
}
The javascript:
function toggleModal()
{
let modal = document.getElementById("modal");
let glass = document.getElementById("glass-pane")
if(modal.classList.contains("open"))
{
modal.classList.remove("open");
glass.classList.remove("shown");
}
else
{
modal.classList.add("open");
glass.classList.add("shown");
}
}
function setModalContent(id)
{
let dialogue = document.getElementById("modal-dialogue");
let data = document.getElementById(id);
dialogue.innerHTML = data.innerHTML;
}
and, of course, a video showing the problem.
https://youtu.be/s3bsN72-qYE
You can add css max-height and overflow-y to your modal content to give the content a scrollbar inside the modal and ensure the modal doesn't go outside the page.
This may need an #media query, eg
article {
overflow-y: auto;
}
#media screen (height:300px) {
article {
max-height: 200px;
}
}
#media screen (height:600px) {
article {
max-height: 400px;
}
}
or may be set better using relative height such as % or vh (reference)
article {
max-height: 75vh;
overflow-y: auto;
}
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 want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>