I'm trying to create a simple, clickable pulsating dot. When clicked, it will move the user to another site. Problem is I can't make animation work, I've tried many examples, animate just simply doesn't work. The dot needs to be fully responsive. I already checked whether JQuery and JQueryUI are working.
Code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<img id="dot" class="wrapper__dot" src="images/dot.svg" alt="Click to enter site">
</div>
</body>
</html>
CSS:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
position:relative;
}
.wrapper {
position: absolute;
max-width: 45%;
max-height:45%;
top:50%;
left:50%;
overflow:visible;
}
#dot {
position:relative;
max-width:100%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;
}
JAVASCRIPT:
function pulse() {
$('#dot').animate({
width: 200, height: 200,
opacity: 0.5
}, 700, function() {
$('#dot').animate({
width: 300, height: 300,
opacity: 1
}, 700, function() {
pulse();
});
});
};
pulse();
if (typeof jQuery.ui !== 'undefined') {
console.log('WORKING');
};
I put it in a comment, but I figure it deserves an answer of its own.
I would question whether jQuery is the right tool for the job. A simple animation like this is a task that can be done with finesse, using jQuery sort of feels like taking a sledgehammer to push a thumbtack into a cork board.
Instead, consider using CSS3 animations. They're very simple to set up, and they are basically universally supported (a handful of lesser-used browsers still need to play catch-up).
In this case, your CSS is simple:
#keyframes pulse {
from {
width: 300px;
height: 300px;
opacity: 1;
}
to {
width: 200px;
height: 200px;
opacity: 0.5;
}
}
Now that you have defined the animation, apply it to your element:
#box {
animation: pulse 700ms ease-in-out infinite alternate;
}
In order, those properties are:
Animation name: pulse
Animation duration: 700ms
Animation interpolation: ease-in-out - provides a nice bit of smoothness
Animation repeat: infinite
Animation direction: alternate - animate one way, then back, and so on
The browser will handle the animation natively. This means it will make use of things like its own refresh frames to animate it, which includes bonuses like lowering FPS (often to zero) when the browser tab is hidden to reduce CPU usage and so on. It will animate as smoothly as possible - JavaScript (and jQuery) animations may come close, but will never be quite as smooth.
Regarding browser compatibility (especially older IE)... Is it really worth using that sledgehammer just to provide a little eye candy to people with outdated technology?
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have the beginnings of a simple game in JavaScript, CSS and HTML and the game was working until I created a jump function. OnClick, the character element (generated by the css as the green rectangle) should jump. Instead, it is static and doesn't move.
Initially, I had this code:
.animate{
animation: jump 500ms;
}
in the character's CSS, and it jumped continuously without any user interaction.
What have I done wrong? I assume it is something to do with this:
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
For an answer, I would appreciate the error to be pointed out, with new code and a clear explanation as to how the setTimeout function works. Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
CODE
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump() {
character.classList.add("animate");
setTimeout(function() {
character.classList.remove("animate");
}, 500);
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 1px solid #319b4e;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
The issue, after copying the code and testing it, is that the term
document.getElementById was spelled with a lowercase b, like document.getElementbyId, these two lines should instead be:
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");`
As for setTimeout, it is a built in function , that executes a function (provided in first paramter) after a certain amount of time (specified in second parameter), this function works in the background, so it doesn't block other things from happening.
For more information on setTimeout (I used this website when I first started learning html etc....)
If you want to change it to the up arrow instead, simply add an event listener to check for the keyup event, and check that the keycode matches that for the up arrow (38), and other keys can be checked by console.loging the keyCode for the event, so somewhere in your JavaScript, do
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
So...
The entire snippet is
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
addEventListener("keyup", function(e) {
if(e.keyCode == 38) jump()
})
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Now working
Issue is:your write document.getElementbyId("character") but character b of getElementbyid is small so it through error
so correct is document.getElementById("character")
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
//adding the animate function in the css here, so it is applied to our character
function jump(){
character.classList.add("animate");
setTimeout(function(){
character.classList.remove("animate");
},500);
}
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:1px solid #319b4e;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:380px;
border-radius:20px;
/*animation: jump 500ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
#keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
#keyframes jump{
0%{top:380px;}
30%{top:200px;}
50%{top:200px;}
100%{top:380px;}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Game</h1>
<p>My first ever game</p>
<p>We all have an enemy</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Is setTimeout an existing inbuilt method, and if so where do we find documentation on these things?
Yes, setTimeout is an inbuilt method. You can learn about more in here MDN Web Docs.
how the setTimeout function works
So, setTimeout method accepts a function/code and a delay (in ms) after which it will execute it. Refer to the above link.
It takes the event into event loop that will make it async call.
I will look into the code after a while and get back to you! :D
Bookmark MDN Web Docs, it is really handy!
I am facing issue while developing one of My jQuery task. As....
I have a responsive Image(Working on all mobile device resolution), My Task is when I click on that image, I want to get a image position on which the image clicked.. I tried to complete this task using Page X and page Y behaviour of jQuery.but it gives the different value when I changed the resolution of screen.
Please help me and give me suggestion or provide a sample how can I do this. I guess position should be same even if the resolution would be different.
I'm not sure understand your issue but i think you want to do this
If i wrong please share your codes and more describe your isssue
$(function (){
'use strict';
$('.img1').click(function (){
$('.img2').css({
'z-index': 3
});
});
$('.img2').click(function (){
$(this).css({
'z-index': 1
});
});
});
.box {
position: relative;
width: 10em;
height: 10em;
}
.box .img1,
.box .img2 {
position: absolute;
width: 10em;
height: 10em;
-webkit-background-size: cover;
background-size: cover;
}
.img1 {
background-image: url(https://lh3.googleusercontent.com/-e8VRnumXmR0/AAAAAAAAAAI/AAAAAAAAAUQ/uk_p3w15PNs/photo.jpg?sz=128);
z-index: 2;
}
.img2 {
background-image: url(https://www.gravatar.com/avatar/5768f7edd993f3f1a5363f6d786d5ace?s=128);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<div class="img1"></div>
<div class="img2"></div>
</div>
</body>
</html>
You can simply change the CSS z-index by jquery:
$(target).css({
'z-index': 2
});
This question already has answers here:
jQuery animate backgroundColor
(18 answers)
Closed 9 years ago.
My JQuery: //script.js
$(document).ready(
function()
{
$(".image").bind('mouseenter',
function()
{
$(this).stop().animate(
{
backgroundColor: "blue"
},
{
queue:false,
duration:300,
easing: "swing"
});
});
$(".image").bind('mouseleave',
function()
{
$(this).stop().animate(
{
backgroundColor: "green"
},
{
queue:false,
duration:300,
easing: "swing"
});
});
});
HTML: //index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="image"></div>
</body>
</html>
CSS: //stylesheet.css
body
{
background-image: url("background.jpg");
margin:0 auto;
padding:0;
}
.image
{
background-color: green;
width: 100px;
height: 100px;
}
Nothing happens with the div, but if I try it with css() it works! How can I fix this? Everything gets called correctly, even some stuff after animate() (I added an alert() to check lol) so I have no clue why...
From the official jQuery documentation:
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color() plugin is used). Property values are treated as a
number of pixels unless otherwise specified. The units em and % can be
specified where applicable.
http://api.jquery.com/animate/
I'd suggest using CSS3 transitions to achieve the same effect. jsFiddle example here.
.image {
background-color: green;
width: 100px;
height: 100px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
For transition easing you can check out this link.
I'm trying to accomplish something as simple as putting to div's side by side. The thing is I'm very capable in CSS, however the solutions I'm trying to use do not work as intended, here is the problem.
I'ved used: (so both divs is laying side by side)
display: block; float: left; margin-right: 15px;
And it work flawlessly LOCALLY, the thing is I'm creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it's very important it acts alike in all browsers.
Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side... That don't work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.
So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?
Below is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sidekick</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sidekick.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
CSS:
.eas_sidekick_divs div
{
display: block;
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 850px;
height:600px;
background: #ccc;
}
This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html
Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.
Click on the button of the little banner to the right stating: "exiting me" and you'll see the div expand, the expanded div is the one i want to position to right at all times.
Hope u can help me out! :)
You can use display:inline-block; or display:block; both will work but as you mention "#eas_sidekick_container" width should be equal or should not exceed with parent Element width please correct "#eas_sidekick_container" width.
Here is the corrected code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.eas_sidekick_divs div
{
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 300px;
height:600px;
background: #ccc;
}
</style>
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
I've figured out myself a javascript solution for fixing my issue.
I've used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.
Below is my code:
$(document).ready(function() {
var cssWidth = 1024;
var cssPos = 10;
$("#eas_sidekick_container").hide();
$("#eas_sidekick_container").css(
{
width: '0px',
position: 'absolute',
top: '0px',
left: cssWidth + cssPos
});
$(".eas_sidekick_open").click(
function() {
$("#eas_sidekick_container").show();
$("#eas_sidekick_container").animate({
width: '850px'
});
$('html, body').animate({
scrollLeft: '850'
});
});
$(".eas_sidekick_close").click(
function() {
$("#eas_sidekick_container").animate({
width: '0px'
});
setTimeout( function(){
$("#eas_sidekick_container").css(
'display' , 'none'
);
}, 350);
});
});
this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.
here is my html and css
#box {
width: 200px;
height:300px;
background-color: #00CCFF;
}
#box:hover {
width: 200px;
height:300px;
background-color: #669933;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" </div>
</body>
CSS
.box-normal {
width: 200px;
height:300px;
background-color: #00CCFF;
}
.box-hover {
width: 200px;
height:300px;
background-color: #669933;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box" class="box-normal"> dsfdsf</div>
</body>
JQuery
$(function() {
var delayms = 2000;
$("#box").mouseenter(function(){
if ($("#box").hasClass('box-normal'))
{
$("#box").removeClass('box-normal').addClass('box-hover');
window.setTimeout(function() {
$("#box").removeClass('box-hover').addClass('box-normal');
}, delayms);
}
});
});
You can change the "delayms" variable. ( 2000 means 2 seconds)
Working example: http://jsfiddle.net/jqT7d/1/
Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/
ul.navigator-wrap-inner li.thumbnail_resize:hover {
border-color:#184ACD;
-moz-transition: border-color 0.4s ease-in-out 0s;
}