Why is my image not rotating after mouse click? (javascript + css) - javascript

I am trying to get the image to rotate after a button click, but I cannot get the image to rotate. After putting the animation lines of css into an image:active id block in css, I was able to get the image to rotate on an active mouse click, but that is not what my assignment calls for.
HTML
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
<script type="text/javascript" src="script.js"></script>
</body>
Javascript
function rotate(){
image.className = 'click';
}
CSS
#button {
font-family: "Verdana";
font-weight: inherit;
font-size: 3vmin;
line-height: 14vmin;
text-align: center;
display: block;
border: none;
background: white;
width: 15vmin;
height: 15vmin;
margin: 2vmin auto;
border-radius: 10vmin;
cursor: pointer;
color: black;
}
.click:active {
display: block;
background: transparent;
border: 0px solid transparent;
height: 50vh;
width: 50vh;
margin: 5vh auto 0;
transition: height 100ms, border-width 100ms, border-color 100ms;
animation: rotate;
animation-delay: 100ms;
animation-timing-function: reverse; animation-iteration-count: normal;
animation-duration: 1s;
animation-play-state: running;
animation-direction: reverse;
}

Have a look at this. It seems you haven't set the degrees.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function rotate(){
myImg=document.getElementById('image');
myImg.className = 'rotate';
}
</script>
<style>
.rotate {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<a id="button" onclick="rotate()">Go</a>
<img class="click" id="image" src="http://placehold.it/500x500">
</body>
</html>

active is uninitialized when you use it, assuming that's the entirety of your Javascript. You'll want to use document.getElementById('active') instead.
Your function sets the class of the element to 'click', which doesn't make much sense since the class of the img tag is initially set to 'click'. Nothing changes when your function is called.
The CSS selector should just be .click instead of .click:active, and the img tag shouldn't start with a class.

Related

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

I have the following code in which the star is automatically "spinning" around the crescent and hovering it makes it "rotate". There is also a button on the left side: when it is hovered, it only changes its background-color and text-color; however, I want the star to start spinning and rotating when the button is hovered (and also want the effects of the button i.e. changing its background color and text color, to maintain simultaneously). I tried using different codes but everything I do results in messing the code up further.
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.moon:hover .counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg);
}
to {
-webkit-transform: rotateZ(0deg);
}
}
.moon:hover .counterrotate {
animation-name: inherit;
animation-duration: 5s;
transition-duration: 0.2s;
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<div class="moon">
<div class="rotate">
<div class="counterrotate">
<div class="star"></div>
</div>
</div>
</div>
<button>Hover</button>
</body>
</html>
How can I do that?
If I have understood the requirement correctly, you do not need Javascript for this.
However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.
So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).
Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).
This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
right: -500px;
bottom: -150px;
}
.moon,
.star {
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: 120%;
/* Resize the background image to cover the entire container */
border-radius: 50%;
}
.moon {
background-color: transparent;
background-image: url("https://i.stack.imgur.com/0bcIk.png");
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
}
.star {
position: relative;
background-color: transparent;
background-image: url("https://i.stack.imgur.com/gjbgR.png");
width: 100px;
height: 100px;
transform: rotate(0deg);
}
button:hover+.moon .star,
.star:hover {
animation: spin 5s infinite linear;
}
#keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button:hover+.moon .rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
button {
background-color: white;
color: black;
text-align: center;
padding: 16px 32px;
font-size: 16px;
cursor: pointer;
border: 2px solid green;
display: inline-block;
transition-duration: 0.3s;
position: relative;
left: -350px;
border-radius: 50px;
bottom: -100px;
}
button:hover {
background-color: green;
color: white;
display: inline-block;
border: 1px solid white;
transition: 0.5s;
}
</style>
</head>
<body style="background-color: green">
<button>Hover</button>
<div class="moon">
<div class="rotate">
<div class="star"></div>
</div>
</div>
</body>
</html>

How can I trigger a second animation on click

I have a bunch of these 90x900 images that drop down on page load. The animation for that is just added in the parent element selecting all li's in the list, which are the images. The images initial position is -1000px, and have a css animation to transform from 0px to 1000px on the Y Axis, and they stay there with
animation-fill-mode: forwards.
I want it so when I click a button they return to their initial position of -1000px.
These are my animations, first one is the initial page load animation, second one is what I want to trigger on click.
#keyframes mainpic {
from {transform: translateY(0px);}
to {transform: translateY(1000px);}
}
#keyframes mainpicleave {
from {transform: translateY(1000px);}
to {transform: translateY(0px);}
}
So I added the page load animation to .main-pic li so it adds it to every li in the ul. And then I set an animation-delay of 0.2s more than the last one on every li.
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
top: -1000px;
box-shadow: 3px 0px 10px black;
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url('../images/dropdown-main/main-pic-01.png');
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url('../images/dropdown-main/main-pic-02.png');
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
So I thought I could just add another class with an animation on it with jQuery. I made this class:
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: forwards;
}
So I tried a couple different things with jQuery. I thought maybe if I removed the pre exisiting class with the initial animation on it, and then had a toggleClass on it, that it would work. But it does not.
$('#btn_01').click(function(){
$('.main-pic-01').toggleClass('main-pic li');
$('.main-pic-01').toggleClass('main-pic-toggle-leave');
});
Not sure what else I can do. Any ideas?
Define a separate class for animation properties for .main-pic li elements at css; animate top instead of transform; set animation-fill-mode to both at .main-pic-toggle-leave
$('#btn_01').click(function() {
$(".main-pic-01").toggleClass('animation');
$(".main-pic-01").toggleClass('main-pic-toggle-leave');
});
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
box-shadow: 3px 0px 10px black;
top: -1000px;
}
.animation {
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url("http://lorempixel.com/900/90/nature");
background-repeat: no-repeat;
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url();
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: both;
}
#keyframes mainpic {
from {
top: -1000px;
}
to {
top: 0px;
}
}
#keyframes mainpicleave {
from {
top: 0px;
}
to {
top: -1000px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_01">click</button>
<ul class="main-pic">
<li class="main-pic-01 animation"></li>
<ul>
instead of animation, you can use transition. Then you can toggle some class on click and specify the 'after transition' state in this class
$("#trigger").on("click", function(e){
e.preventDefault();
$("#block").toggleClass("moved");
});//#button click
$(window).on("load", function(){
$("#trigger").trigger("click");
});//window load
#block
{
height: 100px;
width: 100px;
background: orange;
transition: transform 0.8s ease;
transform: translateX(0px);
}
#block.moved
{
transform: translateX(300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="block"></div>
<button id="trigger">Move</button>

How to make an element with background image appear using css animation/javascript

I have a div tag with a background image. I want to use css animation or with combination of javascript/jquery to animate how the background image appears when the page loads. Currently, I have two vertical borders that I created with equal length and they both start off at the same position. When the page loads, one border will automatically move to the right side while the other one move to the left. During this transition, I want the div tag with the background image to slowly appear. Here's what I have so far:
.background-img {
width: 10px;
margin: 0 auto;
}
.borders {
position: absolute;
left: 50%;
width: 8px;
background-color: blue;
height: 50px;
border-radius: 4px;
}
.left-vertical-border {
animation-name:move-left;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.right-vertical-border {
top: 8px;
animation-name:move-right;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes move-left {
from{transform: translateX(0px);}
to{transform: translateX(-100px);}
}
#keyframes move-right {
from{transform: translateX(0px);}
to{transform: translateX(100px);}
}
<!DOCTYPE html>
<html>
<head>
<title>Creating Vertical borders using animation/javascript</title>
</head>
<body>
<div class="left-vertical-border borders"></div>
<div class="background-img">fake bg image</div>
<div class="right-vertical-border borders"></div>
</body>
</html>
Thanks in advance!
Add CSS:
.background-img {
width: 10px;
height: 10px;
margin: 0 auto;
animation-name:img-ani;
animation-duration: 2s;
animation-timing-function: ease-in;
}
#keyframes img-ani {
from{opacity:0;}
to{opacity: 1;}
}

Full page overlay appears behind

I am trying to create a simple full page overlay with bootstrap.
However the overlay is appearing 'behind' my main content (a blue box in the example).
I'm sure I am missing something very obvious however any help would be appreciated.
I need to overlay to disappear when the page is clicked anywhere, this is working.
I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?
HTML
<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>
<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>
JS
$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});
$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});
CSS
.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}
Specify the z-index in your css to be greater than your main content.
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
}
JSFiddle
Read more about it at MDN, z-index.
Use z-index to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}

Appended div couldn't scroll

In google chrome I append a div. When I click the button the red div will slide out but it can't scroll with mouse wheel.
The bug only happens in google chrome.
This is an example page:http://infinitynewtab.com/question/test.html
html, css and js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
overflow: hidden;
}
#right{
width:350px;
height:100%;
position: absolute;
top:0px;
right:-350px;
background-color: red;
overflow-y:scroll;
}
#button{
width:180px;
height:40px;
padding: 5px;
background-color:rgb(75, 197, 142);
margin-top: 200px;
margin-left: auto;
margin-right: auto;
color:#fdfdfd;
border-radius: 10px;
cursor: pointer;
}
#-webkit-keyframes slideOut{
0% {
transform:translate(0px);
-webkit-transform:translate(0px);
}
100% {
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
}
.slideOut{
animation:slideOut ease 0.3s;
-webkit-animation:slideOut ease 0.3s;
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
</style>
</head>
<body>
<div id="button">Click me,then scroll in the red area</div>
<script src="jquery2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str='';
for (var i = 0; i <10000; i++) {
str+=i+'<br>';
};
$('body').append('<div id="right">'+str+'</div>');
});
$("#button").on('click',function(event) {
/* Act on the event */
$('#right').addClass('slideOut');
});
</script>
</body>
</html>
You cat try it may be it's help
CSS add z index as like this
#right{
z-index:2;
}
#button{
z-index:1;
}
Live Demo
The problem is with the slideOut class. Not sure why. But this works:
.slideOut{
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
right: 0 !important;
}
If you want the page to scroll don't set the div's height to 100%.
The way you implemented this you can scroll only after focusing the div. this is not a bug...

Categories