I am trying to get an animation when you click on the button.
The animation goes from green to red, but when it ends it instantly goes back to the color of the div itself?
so it goes from green to red and then instantly back to green.
i hope it helps...
here is a working fiddle https://jsfiddle.net/rameezrami/8efnztkt or use following code
<html>
<head>
<style>
.anim-div {
width: 200px;
height: 200px;
background-color: green;
-webkit-animation-name: color-animation; /* Chrome, Safari, Opera */
-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
animation-name: color-animation;
animation-duration: 6s;
}
.non-anim-div {
width: 200px;
height: 200px;
background-color: green;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes color-animation {
50% {background-color: red;}
100% {background-color: green;}
}
/* Standard syntax */
#keyframes color-animation{
50% {background-color: red;}
100% {background-color: green;}
}
</style>
</head>
<body>
<div class="non-anim-div"></div>
<input type="button" value="Clik here to animate" class="btn"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$(".non-anim-div").addClass("anim-div");
});
</script>
</body>
</html>
Related
I am loading an external CSS file using JS. For my radio buttons, I am running a transition animation, but its loading is delayed on page load, and I can't figure out why.
Note: since this issue only occurs on page load, the most effective way to reproduce might be to copy the html & css files, and run locally. Simply running the code snippet won't show the issue. You should notice that the male and female divs animate into shape, rather than just appear immediately when the page loads.
To see desired behavior, import the css directly into the head of the html file (rather than import using JS). You'll notice that the gender divs appear instantly, without animation.
Here's a gif of what it's currently doing that I don't want: https://media.giphy.com/media/8BksF1okeQfNyv7ZCh/giphy.gif
const genderCss = document.createElement('link')
genderCss.rel = "stylesheet"
genderCss.href = "demo.css"
genderCss.type = "text/css"
document.head.appendChild(genderCss)
*,
*:before,
*:after {
box-sizing: border-box;
}
.col-half {
padding-right: 0;
float: left;
width: 100%;
}
.col-half:last-of-type {
padding-right: 0;
}
.registrationContainer {
justify-content: center;
align-items: center;
margin: 10rem auto;
background: white;
padding: 20px 25px;
border: 5px solid #337ab7;
border-radius: 6px;
width: 550px;
height: auto;
box-sizing: border-box;
}
.gender-input-group {
margin-bottom: 1em;
padding: 0;
zoom: 1;
width: 100%;
}
.gender-input-group:before,
.gender-input-group:after {
content: "";
display: table;
}
.gender-input-group:after {
clear: both;
}
input[type="radio"] + label,
select option,
select {
width: 30%;
text-align: center;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* The problem seems to be here */
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
background-color: #7ed321;
color: #fff;
border-color: #64ac15;
}
select {
display: inline-block;
width: 50%;
text-align: center;
float: left;
border-radius: 0;
}
input[type="radio"] + label:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="radio"] {
display: none;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox"] + label:before {
position: absolute;
top: 0.2em;
left: 0;
display: block;
width: 1em;
height: 1em;
padding: 0;
content: "";
}
input[type="checkbox"] + label:after {
position: absolute;
top: 0.45em;
left: 0.2em;
font-size: 0.8em;
color: #fff;
opacity: 0;
font-family: FontAwesome;
content: "\f00c";
}
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<script type="text/javascript">
const css = document.createElement('link')
css.rel = "stylesheet"
css.href = "demo.css"
css.type = "text/css"
document.head.appendChild(css)
</script>
</head>
<body>
<div class="col-half">
<h5>Gender</h5>
<div class="gender-input-group">
<input
id="male"
type="radio"
name="gender"
value="male"
>
<label for="male">Male</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
<label for="female">Female</label>
</div>
</div>
</body>
</html>
This may be a typical selection panel, which is on the desktop:
and on an mobile phone:
Can Zurb Foundation do this? I think one catch is, for medium width and up, the width of the 2 columns are supposed to be fixed, instead of dynamic. (choice 2 can have long width or short width, because the background is transparent and won't show. The importance is the fixed spacing between Choice 1, the vertical separation line, and Choice 2).
I put some desired behavior on CodePen, although they are customized for desktop and mobile, but can't be both:
Desktop: http://codepen.io/anon/pen/oxZpzg
Mobile: http://codepen.io/anon/pen/KzWZwQ
For mobile:
<div class="row text-center">
<div class="small-6 column">Choice 1</div>
<div class="small-6 column">Choice 2</div>
</div>
and it seems no way to style it for Desktop's fixed spacing.
Right now I can style the desktop version using plain CSS, and then using media query to style the mobile version, and no Zurb Foundation is used. Could Foundation be used for both mobile and desktop, or use Foundation for one case and use media query for the other case?
Just write it in SCSS, compile it into CSS and use a plain CSS. This SCSS code can do the trick:
.column {
background: #ffc;
color: #333;
padding: 20px;
#media #{$small-only} {
width: 50%;
}
&:first-child {
border-right: 1px solid #bbb;
#media #{$medium-up} {
width: 200px;
}
}
&:last-child {
#media #{$medium-up} {
width: calc(100% - 200px);
}
}
}
Compiled CSS:
body {
padding-top: 50px;
}
.column {
background: #ffc;
color: #333;
padding: 20px;
}
#media only screen and (max-width: 40em) {
.column {
width: 50%;
}
}
.column:first-child {
border-right: 1px solid #bbb;
}
#media only screen and (min-width: 40.0625em) {
.column:first-child {
width: 200px;
}
}
#media only screen and (min-width: 40.0625em) {
.column:last-child {
width: calc(100% - 200px);
}
}
Updated HTML:
<div class="row text-center">
<div class="column">Choice 1</div>
<div class="column">Choice 2</div>
</div>
CodePen link
I am new to web development and I've hit a road block here with swipe-pages from https://github.com/TheSeamau5/swipe-pages
Basically, I want to make a "swipe-images" out of the "swipe-pages" by putting a template inside the contents of the swipe-pages. In other words, I want to pass to the polymer-element an array of strings (location of image) as attributes and the swipe-pages in the element should auto-generate swipe-pages with images inside it.
I am trying to avoid java script as much as I can and take advantage of polymer binding. I have even extended the template as a swipe-page.
here is the code so far and it does not work as expected. Is this approach correct or should I reinvent the swipe-pages uniquely for swipe-images. But nevertheless, the template binding should work!
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="items">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template extends="swipe-page" repeat="{{item in items}}">
<img src="{{item}}" style="width: 20px; height 20px"/>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
items="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
Does anyone have a sample code on something like this?
I made the change as mentioned and I got the code working. Turns out I did not initialise the array (attribute) in the polymer-element constructor and that was really important.
The below code works,.......... and now I have an "image swipe".
<link rel="import" href="../swipe-pages-master/swipe-pages.html">
<link rel="import" href="../swipe-pages-master/swipe-page.html">
<polymer-element name="lesson-card-mini" attributes="imglinks">
<template>
<style>
:host {
display: block;
position: relative;
padding: 0px;
width: 100%;
}
.content2 {
padding: 2px;
border: 1px solid #dedede;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: black;
}
</style>
<div class="content2" style="width: auto; height: auto;">
<swipe-pages id="pgs" style="color: white;">
<template repeat="{{imglink in imglinks}}">
<swipe-page>
<img src="{{imglink}}" style="width: 20px; height: 20px"/>
</swipe-page>
</template>
</swipe-pages>
</div>
</template>
<script>
Polymer('lesson-card-mini',
{
created: function() {
this.imglinks = []; // This line is important
},
ready: function() {
},
toggle: function() {
}
});
</script>
</polymer-element>
<polymer-element name="select-main">
<template>
<style>
</style>
<div vertical layout center center-justified>
<lesson-card-mini style="width: 100%; height: 500px;"
imglinks="['../images/01.png',
'../images/02.png',
'../images/03.png']"></lesson-card-mini>
</div>
</template>
<script>
Polymer('select-main',
{
});
</script>
</polymer-element>
With this, I could just have the pages up with an array of strings. Perhaps an improvement would be to have the page decipher the link to show image, videos, PDF files, text files etc by having a template selector. And if backed by auto-animation, can become an image carousel and slider too.
Thanks and hope this helps!
Cannot functionally animate height of header (weird delay in execution of the animate method) when scrolling past and before the point of 244pixels from top of window . First animate method of the functioon works when the else flow is excluded.
else {
$('.header').animate({height:"151px"});
$('.nav').animate({top:"151px",height:"93px"});
}
I would like to know whats the simplest way to have the header and nav classes animate back to original size and distance from top specified in the else flow without a delay.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
body {
margin: 0;
background: green;
}
.wrapper {
margin: 0px auto;
width: 960px;
}
.header {
top: 0;
height: 151px;
width: 100%;
background: black;
color: white;
position:fixed;
z-index: 1;
}
.nav {
top: 151px;
height: 93px;
width: 960px;
background: red;
position: fixed;
z-index: 1;
}
.content {
background: blue;
height: 2000px;
top: 244px;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<div class="header">
</div>
<div class="wrapper">
<div class="nav">
</div>
<div class="content">
</div>
</div>
<script>
onscroll = function (){
if ($(window).scrollTop() > 244) {
$('.header').animate({height:"93px"});
$('.nav').animate({top:"93px",height:"58px"});
}
else {
$('.header').animate({height:"151px"});
$('.nav').animate({top:"151px",height:"93px"});
}
}
</script>
</body>
</html>
JSFiddle
<div id="box">
<div id="body">Blah blah blah</div>
</div>
#box {
box-shadow: 0 0 8px black;
}
#body {
height:100px;
transition: height 0.8s ease;
}
#body:hover {
height: 200px;
}
In IE10, the shadow at the bottom of the box is glitchy when the transition changes the height of the content. Note that this only happens if it's the content box that changes height. If it's the container, the shadow works fine. However, I can't change the container's size since I want it to be dynamic to fits its contents.
Is there any workaround for this?
Best bet is to do the following. My guess is that because box-shadow is not applied to the element that's actually resizing that it can't resize with the contents. I'll need to do some more research, but this works:
Edit for Fixed Container:
Apply a transparent box-shadow to each child.
CSS:
<style type='text/css'>
.box {
box-shadow: 0 0 8px black;
}
.box .body {
box-shadow: 0 0 8px transparent;
}
.body {
height:100px;
transition: height 0.8s ease;
}
.body:hover {
height: 200px;
}
</style>
HTML:
<div class="box">
<div class="body">Blah blah blah</div>
<div class="body">Blah blah blah 2</div>
</div>
The rendering issue has been fixed in IE11. No need to worry!