Develop Reference

how to show loading by html img element load remote src

Currently when I open a page it shows a blank then the picture slowly shows up i want this kind of loading a remote picture to display a state with a fixed height use jquery code

from you question I think you want to use loader while loading the images.
you can use css code to generate loader
<div class="loader"></div>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
than you can use class name in jquery to hide or show the loader at button click or page load
for hide loader
$('.loader').hide();
for show loader
$('.loader').show();

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later

You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Triggering an animation on a div by clicking a button using addClass/removeClass with Javascript

So I'm trying to trigger an animation by clicking on a button using addClass and removeClass with Javascript.
I'm not bad at HTML/CSS but I only strating to learn Javascript by editing snipets.
So here's mine can you tell me why my div won't rotate when I click the black button ?
Thanks in advance !
<button class="menu-circle"></button>
<img class='imgblock' src="http://lorempixel.com/400/200/" alt="" />
.menu-circle {
height: 100px;
width: 100px;
background-color: #000000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: .1s;
z-index: 100;
border: none;
}
.menu-circle:hover {
height: 115px;
width: 115px;
}
.menu-circle:active {
height: 100px;
width: 100px;
}
.imgblock {
display: block;
margin: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
$('.menu-circle').on('click', function(){
$('img .imgblock').addClass('rotate');
$('img .imgblock .rotate').removeClass('rotate');
});
WORKING FIDDLE :
http://jsfiddle.net/leokaj/rv5PR/366/

You have several problems with your fiddle:
Wrong class names: in js $('.menucircle') and in html - class="menu-circle"
You don't need space between img and class in jquery selector $('img .imgblock') - space means you're looking for .imgblock class inside the img tag (which is impossible).
.current class is not defined nor in html, nor in css, but appear in js
Here's fiddle where I fixed the problems and which works: DEMO
JS:
$('.menu-circle').on('click', function(){
var $img = $('.crossRotate');
if (!$img.hasClass('rotate')) {
$img.addClass('rotate');
} else {
$img.removeClass('rotate');
}
});

You ve to manage this with 2 different events to animate the image
$('.menu-circle').on('mousedown', function(){
$('.imgblock').addClass('rotate');
});
$('.menu-circle').on('mouseup', function(){
$('.imgblock').removeClass('rotate');
});
fiddle http://jsfiddle.net/3ehcuky5/
if you want to keep the image rotated or not the #alynioke solution is good

As you seem to be trying to make it jiggle a bit in animation and you're using jQuery already then I would say you need to look at the .animate() method of teh jQuery library
https://api.jquery.com/animate/

how to make transition of stacked Divs. in JavaScript

i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?

Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div

CSS3 page loading effect trigger by jquery

Hi friends I am trying to make CSS3 animation which will be trigger by jquery. Ie when the user submit some form I need to display animation (css3) for some duration and redirect it to the next page.
CSS3 animation:
.circle {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-right: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-left: 5px solid rgba(0,0,0,0);
border-right: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;
}
#-moz-keyframes spinPulse {
0% {
-moz-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-moz-transform: rotate(145deg);
opacity: 1;
}
100% {
-moz-transform: rotate(-320deg);
opacity: 0;
};
}
#-moz-keyframes spinoffPulse {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-webkit-keyframes spinPulse {
0% {
-webkit-transform: rotate(160deg);
opacity: 0;
box-shadow: 0 0 1px #2187e7;
}
50% {
-webkit-transform: rotate(145deg);
opacity: 1;
}
100% {
-webkit-transform: rotate(-320deg);
opacity: 0;
};
}
#-webkit-keyframes spinoffPulse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
This is html
<div class="circle"></div>
<div class="circle1"></div>
<button class="next" name="submit" id = "submit"></button>
Now when I user click on I need to display this effect for a fraction of time (some thing like alert box I mean while this animation is playing user shouldnt be able to do anything in the rest of the page)

Usually you make the page inaccessible by covering it with an element - an "overlay".
HTML:
<div class="loadingOverlay">
<div class="circle"></div> <!-- it makes sense to put these inside -->
<div class="circle1"></div>
</div>
CSS:
.loadingOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
To activate it when the user clicks the submit button, just make it "hidden" by default. And when the user clicks the button, make it "visible". In it's most basic form:
$('#submit').on('click', function () {
$loadingOverlay.css('display', 'block');
});
and the extra needed CSS:
.loadingOverlay {
/* ... */
display: none;
}
On the example I provide below you won't see the animation. The next page, by being blank, just loads too quickly. But you will see it on a "real" website situation.
Here's the live example: http://jsfiddle.net/9H7wf/2/
EDIT:
Max Boll suggested having the "loading effect" happening on the "new" page. It makes sense. But while a new page is being fetched, the "old" one still remains visible until a few key "http" things happen. See http://www.stevesouders.com/blog/2012/12/03/the-perception-of-speed/
So, it does make sense to have it on the "old" page.

I'd suggest you to use jQuery for this.
By default you could display your animation as an overlay (as JOPLOmacedo said).
Then you add the following to your javascript:
$(document).ready(function() {
$('.loadingOverlay').fadeOut();
});
This will show the loading overlay as long as the site needs to load (which you actually wanna show by that loading animation). Once the page is loaded, this javascript will fade it out.
My solution is based on JOPLOmacedo's answer.
EDIT
I just saw your new comment. To show it on button click, you can do it like this:
$(document).ready(function() {
$('.button').click(function() {
$('.loadingOverlay').fadeIn();
});
});
Inside of the click event function you could start an interval to fade it out again after X seconds.

Hi Friends I found a solution to this one Thanx #JOPLOmacedo for helping me to fix this one
$function(){
$('#submit').click(function(){
$('.loadingOverlay').css('display', 'block');
function complete() {
$('.loadingOverlay').css('display', 'none');
}
$('.circle').hide().fadeIn(1000,complete);
$('.cirlce1').hide().fadeIn(1000,complete);
});
}