I have this code:
<html>
<head>
<script type = "text/javascript" src = "jquery-1.7.1.js"></script>
<script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id = "div" onclick = "Rotate()">
<img src="image.png" height="40" width="160">
</div>
<script type="text/javascript">
var x = 1;
function Rotate() {
var angle = (90 * x);
$("div").css("-moz-transform",
"rotate(" + angle + "deg)");
x++;
}</scipt></body></html>
when using Rotate() script, the div seems like been rotated, but when viewd with Firebug, I can see that div is still in the same position. Am I doing something wrong or I am using wrong thing for the task I'm trying to accomplish?
Edit:
Thanks for the responses! I set the background to yellow and it turned the yellow box but when clicking on the div name in Firebug it shows that the div is still in its original position.
It's definitely being applied to the <div>. Just add a width and a background color to the div to see that it's working correctly.
Here's an example I threw together that rotates on hover:
HTML:
<div id="awesome">
<img src="/img/logo.png">
</div>
CSS:
body {
margin: 100px;
}
div {
background: blue;
width: 200px;
-webkit-transition: all ease-in 1s;
-moz-transition: all ease-in 1s;
transition: all ease-in 1s;
}
div:hover {
background: yellow;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
Here's some more info how to use the css3 transform property
There is a jQuery plugin I found that has an example of doing exactly what you're doing, but in a cross-browswer way. Check out:
https://github.com/heygrady/transform
This plugin let's you do things like this:
$('div').click(function() {
$(this).animate({rotate: '+=45deg'});
});
Edit:
Hey, here's a slightly cleaned up version of your original that works fine:
var x = 1;
$("#box").click(rotate);
function rotate() {
var angle = (90 * x);
$(this).css("-moz-transform", "rotate(" + angle + "deg)");
x++;
if (x > 4) x = 0;
}
http://jsfiddle.net/UdYKb/1/
The reason firebug doesn't show the change is because of the spec, which says: "the transform property does not affect the flow of the content surrounding the transformed element." http://dev.w3.org/csswg/css3-transforms/
Look at this example with 3 rotating pics
HTML:
<div id = "div">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
</div>
JAVASCRIPT:
$().ready(function() {
$(".rp").click(function() {
var rot = (parseInt($(this).attr("data-rotate"))+90)%360;
$(this).attr("data-rotate",rot);
$(this).css("-webkit-transform", "rotate("+rot+"deg)");
$(this).css("-moz-transform", "rotate("+rot+"deg)");
});
});
I Save the last rotation in the attribute data-rotate. Please read about CSS Selectors if you do not understand why using .rp :) Hope it helps.
PS: I used the Google Chrome css attribute -webkit-transform too :)
Related
I would like to write a javascript to continuously rotate image by clicking on a button. I was able to make a partial rotation with a click. I think I should recursively call the function to obtain a continuously rotation but I don't know how to do this.
The following is my code.
<html>
<head>
<title>Image Rotation</title>
</head>
<body>
<button id="rotate">Rotate</button>
<img src="images/circle.png" id="sample" ;" alt="" />
</body>
<script>
var rotation = 0;
document.querySelector("#rotate").addEventListener('click', function() {
rotation += 90;
document.querySelector("#sample").style.transform = 'rotate(' + rotation + 'deg)';
});
</script>
</html>
add a class in your css file like
.rotating {
animation: rotate 1s infinite;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
and then add that class by javascript to your element
document.querySelector("#rotate").addEventListener('click', function() {
document.querySelector("#sample").classList.add('rotating')
});
I am new to JavaScript/jQuery and what I want to do is to fade out text and when the opacity is zero, I want to bring back the text with the same effect. I am leaning towards some kind of if statement and the fade in effect, but don't manage to understand how to put it all together. Any tips for how this could be done using jQuery would be appreciated.
function hideText() {
var fadeText = document.getElementById("fadeTextp");
fadeText.style.opacity = 0;
fadeText.addEventListener("transitionend", function(e) {
alert("The text is hidden, but how can I now get it back with same effect?")
}, false);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>
I'm not sure what your overall goal is, but there are lots of ways to do this kind of thing. Some could use only CSS, some could use JavaScript, some could use both. I'll do a "both" example.
Note: It would probably be better to use one or the other - so you don't define the transition time in both places.
Note: jQuery has animation support built in. See the answer from #Twisty for a jQuery example and links to their docs.
var transitionTime = 2250;
var faderTimeout = null; // keep track of this to cancel it if multiple events happen
var fadeText = document.getElementById("fadeTextp");
function hideText() {
fadeText.classList.remove('out');
fadeText.classList.add('out');
window.clearTimeout(faderTimeout);
faderTimeout = window.setTimeout(() => {
fadeText.classList.remove('out');
}, transitionTime);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
.fade.out {
opacity: 0;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>
Here's a jQuery example since you asked for jQuery. You need a container with some height to be able to click again for the text to come back. If you don't have this container then the thing you add a "click" event listener to is not available to click anymore.
I use the :visible selector to see if the text is visible and if so fadeOut and if it's not visible then fadeIn.
let fadeTextp = $("#fadeTextp");
$("#fadeTextContainer").on("click", () => {
if (fadeTextp.is(":visible")) {
fadeTextp.fadeOut()
} else {
fadeTextp.fadeIn()
}
});
#fadeTextContainer {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fadeTextContainer">
<p id="fadeTextp">
Fade out this text and then bring it back when clicked again.
</p>
</div>
Here is a quick jQuery Example.
$(function() {
$(".fade").click(function() {
var $this = $(this);
$this.fadeOut(600, function() {
$this.fadeIn(600);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">
Fade out this text and then bring it back when clicked again.
</p>
This uses .fadeOut() and cascades a callback to .fadeIn().
See more:
https://api.jquery.com/fadeout/
https://api.jquery.com/fadein/
You can also animate the visibility.
$(function() {
$(".fade").click(function(e) {
var t = $(this);
if (t.hasClass("out")) {
t.animate({
opacity: 1
}, 600);
t.removeClass("out");
} else {
t.animate({
opacity: 0
}, 600);
t.addClass("out");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">Fade out this text and then bring it back when clicked again.</p>
I have a p element in HTML Code like
<p id="errorEmailMsg" hidden>Wrong Mail</p>
In javascript I want to make a transition, where it changes the opacity from 0 to 1 in 1second.
I tried to do something like
errorMessage.style.opacity = 0;
setTimeout(() => {
errorMessage.style.opacity = 1;
}, this.animationDelay + 20);
How can I achieve this? Thank you and have a nice day :)
I have created a demo with this effect:
https://codepen.io/jordyvd/pen/yLYBvbx
HTML
<p class="p">Some text</p>
<button class="button">Hide it</button>
CSS
.p {
opacity: 1;
transition: opacity 1s;
}
.p.hidden {
opacity: 0;
}
JavaScript
document.querySelector('.button').addEventListener('click', e => {
document.querySelector('.p').classList.toggle('hidden');
});
Click on the button to show/hide the text.
I suggest you look at CSS transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Remove hidden attribute.
If you want the element to invisible by default use.
<p id="errorEmailMsg" style="opacity: 0">Wrong Mail</p>
Hey everyone I have a homework question,
I need to fade in and out an image "gallery-style" using JavaScript. Note: NOT JQuery. I cannot use JQuery, per the assignment outline.
So there's a grid of images (32 of em if you care) they're all 100x100px thumbnails. Each one is in its own div, and the whole thing is nested inside another div, like so:
gallery.html
<div id="imageContent">
<div id="img" class="imageWhite"
onclick="fade(1984)"
onmouseover="highlightWhiteFunction(this)"
onmouseout="unHighlightFunction(this)">
<img src="../Media/Thumbs/1984.jpg"/>
</div>
...31 others just like that
</div> //End of the whole container
So when you click on one of these images, it should fade that image in over the top of everything else. The width of this picture should be 500px, but the height can vary so distortion doesn't occur. Again, I CANNOT use JQuery for this...and yes, I know that'd make life a lot easier.
So far I only have a debug thing to detect that I can at least find which one is clicked on:
gallery.js
function fade(name) {
var theName = name;
console.debug("Clicked " + theName);
}
If the user clicks anywhere on this image, it needs to fade out. If the user clicks another thumbnail, it doesn't need to fade out, it can just disappear, but the other one needs to start fading in.
My thoughts:
Obviously I need a hidden div with width 500, and when these actions occur, I hide/unhide the div as necessary. The gist I've gotten from the professor is that to use JavaScript, you change the opacity in relation to a passage of time that you get from the system.
What I'm looking for in an answer here is maybe some clearer (more detailed) hints on how to go about this. I know how it needs to look, and I'm pretty sure I know the high-level of how to do it, I just don't know how to start doing it with code.
Any help would be appreciated, and I'll be around to answer any follow-up questions.
Again: NO JQuery! :)
Something like this should work
function fadeIn(el, time) {
el.style.opacity = 0;
el.style.display = "block";
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / time;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
}
};
tick();
}
Here is an example:
http://jsfiddle.net/cEDbs/
Just bind the image onclick to call that method with the element.
Here is a CSS based solution. The fade may not be exactly like you want, but can easily be adjusted. Try out the JSFiddle and click an image to see a css transition-- clicking an image fades it larger. Click again fades it back.
http://jsfiddle.net/Rh976/
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img4"/>
JS
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
var img = imgs[i];
img.addEventListener('click',function(e){
if(!this.className.match(/big/)){
this.className += ' big';
} else {
this.className = this.className.replace(/big/,'');
}
});
}
CSS
.img {
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
-o-transition: all 1.0s ease-out;
position:absolute;
width:150px;
height:100px;
z-index:1;
}
.img.img1 { top: 10px; left: 10px; }
.img.img2 { top: 10px; left:170px; }
.img.img3 { top:120px; left: 10px; }
.img.img4 { top:120px; left:170px; }
.img.big {
position:absolute;
width:450px;
height:300px;
top:10px;
left:10px;
z-index:20;
}
I have a CSS class which forms a circle and I am trying to rotate it dynamically from Jquery by adding a css property .It works fine when I click the button for the first time and rest of the time it's idle. I tried using "cssAmination" function and its of no use. I am not able to figure out where I am going wrong. Please help me out in fixing this code. Thanks in advance.
/*Circle code*/
div.circle{
width: 300px;
height: 300px;
-moz-border-radius:150px;
-webkit-border-radius: 150px;
background:#808080;
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}
/*rotate class*/
div.rotateCircle
{
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}
#-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}
//Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
});
}); </script>
<body>
<h3>Labs Project</h3>
<div>
<div id=rotateCircle class="circle">
</div>
<div id=rotateCircle class="horizontalLine">
</div>
<div id=rotateCircle class="verticalLine">
</div>
<div class="divButton">
<table>
<tr>
<td><a class="btn" href="#">HOME</a></td>
<td><a class="btn" href="#">Class</a></td>
<td><a class="btn" href="#">CV</a></td>
<td><a class="btn" href="#">CM</a></td>
</tr>
</table>
</div>
</div>
</body>
You should take a look to the JavaScript events for the animations : https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events
Basically, I've added a class for the animation's name
#rotateCircle.rotate {
-webkit-animation-name: moveCircle;
-moz-animation-name: moveCircle;
-o-animation-name: moveCircle;
animation-name: moveCircle;
}
And instead of adding the CSS in jQuery, you just add the class and remove it when the animation is finished, with the animationend event :
$(function() {
var $rotateCircle = $('div#rotateCircle');
$("a").click(function(){
$rotateCircle.addClass('rotate')
.on('animationend', function() {
$rotateCircle.removeClass('rotate');
});
});
});
(I've made it look a bit nicer too)
Here is the new working fiddle.
NB: The animationend event is prefixed on some browser, here is a gist I've made to support all the different browser (you'll need Modernizr).
There is a css3 transition property that will make this task really simple. I used webkit for my post, change properties accordingly.
CSS
#rotateCircle.rotate {
-webkit-transform: rotate(0);
-webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}
Then with js, all you need is to set the css property to transition on, and it will magically animate to those settings, in this case transform.
$(function() {
var angle = 0;
$("a").click(function(){
angle += 90;
$("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
});
});
I didn't test this code, but the transition property is simple to use, and since I've learned it, I rarely use keyframes/css animation properties anymore.