I'm really new to Javascript. I've been playing around a bit, and had managed to get multiple div's on a page to flip individually, using tutorials and some other help. Now, I want to see if I can flip those same div's using a button or a hyperlink instead.
I thought it would be as simple as moving the class that controls the flip to the button, but that doesn't seem to be the case. I've read that I need to adjust my Javascript to work from a passed id.
Problem is, I don't know how to do this. I've tried passing the button id through to my Javascript function on click (like so: <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>), but that doesn't work. I'm probably way off base here.
My fiddle is here. I've left the third div as I had it before, working, just to show you what I've started from.
Any help would be much appreciated.
HTML:
<p>some content above the flip card</p>
<h1>The CSS flip card:</h1>
<div class="large_box_main">
<div>
<div class="sm_box" id="card-1">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.catchat.org/images/ferals_block_2009.jpg" />
</div>
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Ginger</h2>
<h3>Cat 1</h3>
<h4>Male</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
</div>
</div>
</div>
</div>
<div>
<div class="sm_box" id="card-2">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="http://www.petrescue.org.nz/files/animal/attachment/93/small_cats.h5.jpg" />
</div>
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Front</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Tabby</h2>
<h3>Cat 2</h3>
<h4>Female</h4>
<p class="info">Back</p>
<button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
</div>
</div>
</div>
</div>
<div class="sm_box flip-it">
<div class="flipcard">
<div class="flipcard-front">
<div class="sm_img_box">
<img class="image" src="https://s-media-cache-ak0.pinimg.com/236x/0f/4a/56/0f4a5681046ad10f36098451bf2128d2.jpg" />
</div>
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Front</p>
</div>
</div>
<div class="flipcard-back">
<div class="sm_info_box">
<h2>Siamese</h2>
<h3>Cat 3</h3>
<h4>Male</h4>
<p class="info">Back</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.large_box_main {
width:100%;
margin:0px 0px 10px;
float:left;
display:inline;
}
.sm_box {
width:180px;
/* The width of this element */
margin:10px 15px 20px;
border: 1px solid #e3d9ec;
border-radius: 10px;
float:left;
}
.sm_box:hover {
border: 1px solid #9975B9;
}
.sm_img_box {
width:165px;
margin:6px;
float:left;
display:inline;
}
.sm_info_box {
width:165px;
margin:8px;
background-color:#e3d9ec;
float:left;
display:inline;
text-align:center;
line-height:7px;
border-radius: 5px;
}
img.image {
display:block;
margin:0px auto;
}
.flipcard {
position: relative;
height: auto;
min-height: 0px;
/* Flip card styles: WebKit, FF, Opera */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s;
-moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s;
-o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s;
/* only height adjustment for IE here */
-ms-transition: min-height 1s ease-out 0s;
}
/* The class that flips the card: WebKit, FF, Opera */
.flipcard.card-flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.flipcard .flipcard-front, .flipcard .flipcard-back, .front, .back {
top: 0;
left: 0;
width: 100%;
/* backface: all browsers */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
/* Flip card styles: IE 10,11 */
-ms-perspective: 800px;
-ms-transform-style: flat;
-ms-transition: -ms-transform 1s ease-out 0.5s;
}
.flipcard .flipcard-front, .front, .back {
position: relative;
display: inline-block;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipcard .flipcard-back {
position: absolute;
display: none;
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
/* webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371,
You need this fix if you have any input tags on your back face */
-webkit-transform: rotateY(180deg) translateZ(1px);
}
/* The 2 classes that flip the faces instead of the card: IE 10,11 */
.flipcard .flipcard-front.ms-front-flipped {
-ms-transform: rotateY(180deg);
}
.flipcard .flipcard-back.ms-back-flipped {
-ms-transform: rotateY(0deg);
}
.info {
text-align:justify;
padding:0px 5px;
line-height:initial;
}
Javascript:
function flipThis() {
var $this = $(this);
var card = $this.find('.flipcard');
var front = $this.find('.flipcard-front');
var back = $this.find('.flipcard-back');
var tallerHight = Math.max(front.height(), back.height()) + 'px';
var visible = front.hasClass('ms-front-flipped') ? back : front;
var invisible = front.hasClass('ms-front-flipped') ? front : back;
var hasTransitioned = false;
var onTransitionEnded = function () {
hasTransitioned = true;
card.css({
'min-height': '0px'
});
visible.css({
display: 'none',
});
// setting focus is important for keyboard users who might otherwise
// interact with the back of the card once it is flipped.
invisible.css({
position: 'relative',
display: 'inline-block',
}).find('button:first-child,a:first-child').focus();
}
// this is bootstrap support, but you can listen to the browser-specific
// events directly as well
card.one($.support.transition.end, onTransitionEnded);
// for browsers that do not support transitions, like IE9
setTimeout(function () {
if (!hasTransitioned) {
onTransitionEnded.apply();
}
}, 2000);
invisible.css({
position: 'absolute',
display: 'inline-block'
});
card.css('min-height', tallerHight);
// the IE way: flip each face of the card
front.toggleClass('ms-front-flipped');
back.toggleClass('ms-back-flipped');
// the webkit/FF way: flip the card
card.toggleClass('card-flipped');
}
$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);
Cheers!
(Edited to show code)
I have created a modified function flipThis and removed the onclick actions from your html. jsfiddle
As I wrote in the comment, you have to recognize where you are currently in DOM. The code is self explanatory I suppose. And I also added a parameter to the flipThis function, so we know more precisely what we are working with. (not really needed, we could still work with $(this) but this is my way of doing things.
if($(e.currentTarget).prop('tagName')=="BUTTON")
$this = $(this).closest('.sm_box');
else
$this = $(this);
Related
window.addEventListener('scroll',function(){
if(window.pageYOffset > 100)
{
document.getElementById('fade').style.opacity=1;
}
else
{
document.getElementById('fade').style.opacity=0;
}
});
JavaScript fad-in fade-out animation with scrolling event or without using libraries API, only with logics
To achieve this you can use the CSS transition and opacity properties with a class that you toggle via JS to fade in/out an element:
window.addEventListener('scroll', function() {
document.querySelector('#fade').classList.toggle('visible', window.pageYOffset > 100);
});
#fade {
transition: opacity 0.5s;
opacity: 0;
/* only for this demo... */
position: fixed;
top: 50px;
}
#fade.visible {
opacity: 1;
}
div {
/* only for this demo... */
height: 1000px;
}
<div>Scroll down</div>
<div id="fade">Lorem ipsum dolor sit</div>
A basic example..
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<section>
<div class="tile bottom-right"></div>
<div class="tile bottom-right"></div>
<div class="tile bottom-right"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</section>
</body>
</html>
CSS
body {
max-width:900px;
margin:0 auto;
}
.tile {
height:400px;
margin-top:40px;
background:grey;
-webkit-transform: translateY(50px) rotate(-5deg) translateZ(0);
transform: translateY(50px) rotate(-5deg) translateZ(0);
-webkit-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
opacity: 0;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.bottom-right.inView {
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
transform: translateY(0px) rotate(0deg) translateZ(0);
}
.inView {
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
transform: translateY(0px) rotate(0deg) translateZ(0);
}
section {
padding:20px;
}
JS
let elementsArray = document.querySelectorAll(".tile");
console.log(elementsArray);
window.addEventListener('scroll', fadeIn );
function fadeIn() {
for (var i = 0; i < elementsArray.length; i++) {
var elem = elementsArray[i]
var distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;
if (distInView < 0) {
elem.classList.add("inView");
} else {
elem.classList.remove("inView");
}
}
}
fadeIn();
The animation is not made in JS. The animation is made in css. In the JS we remove or add the class. But we need the height of the screen the user is using with using the var distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;. Please before copying the code read the code and try to understand what is happening..
I have an angular2 app with typescript that uses SystemJS; I used the following seed app.
When on desktop, you can see the loading text in between the tags (e.g. Loading...).
On my index page, I have a small loading div to show my apps being slow on first-time load.
But this div doesn't ever show on mobile.
Index Code
<app>
<header>
<nav>
<div class="container col-sm-10 col-sm-offset-1">
<div class="navbar-header">
<a class="navbar-brand col-xs-3 col-xs-offset-1">
<img src="./assets/logo.png" />
</a>
</div>
</div>
</nav>
</header>
<div class="bounceInDown animated">
<div class="loading-wrapper animated fadeIn">
<p class="loading-text">Hold on!<br />We're unpacking...</p>
<div class="loading-icon preload"></div>
</div>
</div>
</app>
Let me know if you need any more code examples.
I basically want this div inside the app tags to show on mobile; I'm open to any jQuery mobile tricks, too.
It seems to be the keyframe. Can you let me know whats wrong?
CSS and keyframe Code
.loading-icon {
animation: scaleout 1.0s infinite ease-in-out;
background-color: #ffffff;
border-radius: 100%;
display: inline-block;
height: 40px;
margin: 100px auto;
-webkit-animation: scaleout 1.0s infinite ease-in-out;
width: 40px;
}
}
#-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
#keyframes scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
Safari is picky on keyframe animations, if nothing is showing try removing the bounceInDown class and then try to re-add the animation features one by one and see what breaks.
EDIT: first try to move the bounceInDown -class in your css to before the
#-webkit-keyframes bounceInDown
I added this pure css cookie bar to my website and all works fine, the only problem is that when you enter in the site, you can see FIRST the cookie bar, AND the cookie bar go up and go down at the end.
How can see my cookie bar only go down when i enter in my site, i thought to change de thenimation delay, add set time out .... but nothing change !!
here is the original codepen and you can see what i want to change in it
www.codepen.io/natewiley/pen/uGtcD
HERE IS MY CODE
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">
<div class="message">
This website uses cookies to give you an incredible experience. By using
this website you agree to the
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a>
</div>
</div>
<div class="mobile">
This website uses cookies,
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()">
learn more
</a>
</div>
</div>
<label for="checkbox-cb" class="close-cb">X</label>
</div>
</div>
HERE IS MY CSS
.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }
.mobile { display: none; }
#keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } }
.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }
.close-cb:hover { color:#fff;; }
.checkbox-cb { display: none;}
#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }
Removing the line in css
animation-delay: .8s;
will give you the result
Make the animation last longer.
animation: slideIn 4s;
Plus add some trick to animation flow:
0% {
transform: translateY(-50px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
On my webpage I have a div. On that div I have "animation" that simulates the div being turned over (flipped).
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
I rotate the "wrapper" div with the jQuery plugin transit. What the plugin does is just apply the CSS;
transform: rotateY(180deg);
When the div is on rotateY(90deg), I have to load some new content in the #content div. This takes a minuscule amount of time, but in the animation you can see that the div is gone/hidden fore that time.
SEE DEMO FIDDLE
(note that I don't have the actual content loading in here)
Is it possible to have the dive not totally disappearing when rotateY(90)?
Unfortunately I have no control over the HTML itself because it is being generated.
Try to add thickness to it. Refer to something like this: want to show the thickness of an element while it rotate
But make the animation of the css:
0%: transform: rotateY(0deg);
50%:transform: rotateY(90deg);
100%:transform: rotateY(180deg);
Hope this helps.
Make sure the jQuery plugin has css files or look into it.
And also you could do this using basic css and jQuery.
Don't change the contents of the div, just create two sides:
<div id="wrapper">
<div class="side-a">
Some content
</div>
<div class="side-b">
Some content
</div>
</div>
CSS:
#wrapper{
transition: all 2s;
position: relative;
}
#wrapper.flip{
transform: rotateY(180deg);
}
.side-a{
z-index: 1;
opacity: 1;
position: absolute;
height: 100%;
transition-delay: 1s; //half the transition time of the wrapper
}
.side-b{
z-index: 0;
opacity: 0;
transform: rotateY(180deg);
position: absolute;
height: 100%;
transition-delay: 1s;
}
.flip side-a{
z-index: 0;
opacity: 0;
}
.flip side-b{
z-index: 1;
opacity: 1;
}
Javascript:
$('.next-slide').click(function(){
$('#wrapper').addClass('flip');
});
$('.prev-slide').click(function(){
$('#wrapper').removeClass('flip');
});
I am trying to make an effect that when I scroll down around 600px two pictures start on the outside then they move inward, closer together. But when I do it no effect happens.
html:
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="container12" id="scroll">
<img src="img/phone.jpg" id="phone">
<img src="img/middle.jpg" id="middle">
<img src="img/tablet.jpg" id="tablet">
</div>
</div>
</div>
</div>
</section>
CSS:
#scroll {
margin-top: 200px;
margin-bottom: 200px;
text-align: center;
}
#scroll img {
position: relative;
}
.animate {
transition: 2s ease-in0out;
-moz-transition: 2s ease-in0out;
-webkit-transition: 2s ease-in0out;
}
#phone .animate {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}
#tablet .animate {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0);
}
#phone .animate {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}
#tablet .animate {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0);
}
js:
$(document).ready(function() {
$(window).scroll(function(event) {
var y = $(this).scrollTop();
if (y >= 400) {
$('#phone').addClass('animate');
$('#tablet').addClass('animate');
}
});
});
If you are able to help me with this, I would be very happy. Thanks again for helping me.
It looks like your code is adding classes to the #phone and #tablet elements. However, your CSS is written to handle child elements with .animate classes. Your CSS should be written like this:
#phone.animate {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}
#tablet.animate {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0);
}
#phone.animate {
transform: translate(5em,0);
-moz-transition: translate(5em,0);
-webkit-transition(5em,0);
}
#tablet.animate {
transform: translate(-10em,0);
-moz-transition: translate(-10em,0);
-webkit-transition(-10em,0);
}