I am trying to get the source of an image to use in a bigger image and the problem is that it just says that it is undefined when it is not. Here is my code and I appreciate the help in advance.
edit
It appears the code works perfectly in the code snippet but not here when I open the index file ;(, I have no idea why this is happening... halp me! D:, also, when I inspect the element with my own index.html file, it says that the source is equal to undefined
var src = $('.button').attr('src');
$(document).ready(function() {
$('.button').click(function() {
$('.backdrop').animate({
'opacity': '.5'
}, 300, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.box, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + src + '">');
});
});
$(document).ready(function() {
$('.backdrop').click(function() {
close_box();
});
$('.close').click(function() {
close_box();
});
});
function close_box() {
$('.backdrop, .box').animate({
'opacity': '0'
}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
});
}
.backdrop {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box {
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close {
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.button {
border-radius: 30px;
height: 300px;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg">
<div class="backdrop"></div>
<div class="box">
</div>
</body>
</html>
You set the var src = $('.button').attr('src'); before DOM has loaded, and is therefore not defined.
Try moving it inside $(document).ready()
$(document).ready(function() {
var src = $('.button').attr('src');
...
});
Thanks to one of the comments, I figured it out, I just had to have the var inside of the document.ready function :D
Related
Hi i'm trying to make some web.
It's a simple game
just drag the answer to the blank and if is the correct answer, the answer is in the blank.
ex image ,,, like this )
enter image description here
enter image description here
This is my current code.
I can drag the img. but can't put in answer to the blank.
html code -----
var css_test_idx = 10;
var pt1 = $("#pt1");
$('#n1')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
});
$("#n1")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
$('#n2')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n2")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n3')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n3")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n4')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n4").draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
}).css('cursor', 'move');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<style>
#leftbox {
float: left;
width: 170px;
height: 170px;
height: 250;
margin: 5px;
border: 3px solid blue;
}
#clock {
position: static;
width: 900px;
height: 650px;
margin-top: 50px
}
#box {
position: relative;
margin-left: 300px;
}
#n1 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n2 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n3 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n4 {
width: 150px;
height: 150px;
margin-left: 50px
}
#blank {
width: 100%;
height: 100px
}
</style>
</head>
<body>
<center><img id="clock" src="image/clock.png"></div>
</center>
<div id="leftbox"></div>
<center>
<div class="box">
<img id="n1" src="image/n1.png" />
<img id="n2" src="image/n2.png" />
<img id="n3" src="image/n3.png" />
<img id="n4" src="image/n4.png" />
</div>
</center>
<script src="temp2.js" type="text/javascript"></script>
</body>
</html>
-- you can't run this code here because i use node express.
help~
Why is it that if I give a variable a "0", then in the html the number is "10"? I'm using jQuery and JavaScript both, but as you can see the number in the middle is "10" after I reload the page. It's always "10" and not changing.
I'm trying so that that purple square goes in circles 10 times and I want the middle number to change every round up by one. How can I achieve that?
let calc = 0;
for (let i = 0; i < 11; i++) {
$('#animate').click(function() {
$(this).animate({
top: '350px'
});
$(this).animate({
left: '350px'
});
$(this).animate({
top: '0px'
});
$(this).animate({
left: '0px'
});
});
document.getElementById("szam").innerHTML = calc;
calc++;
}
#container {
height: 400px;
width: 400px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 100px;
left: 170px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>Hello</p>
</div>
<h1 id="szam">0</h1>
</div>
Here's a screenshot:
The loop runs relatively quickly, but the animations are queued by default. This means that the code iterates i from 0 to 10 and queues each animation, but displays 10 almost immediately because the loop happens so fast. On the other hand, each animation waits for the previous animation to finish before it starts. So the animation takes much more time to complete than the loop itself.
To demonstrate with the code below, notice that the "Loop is done" message seems to appear as soon as the trigger is clicked.
One solution is to use the complete callback of jQuery's animate to advance the counter when each cycle is complete.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
.animate( properties [, duration ] [, easing ] [, complete ] )
var calc = 0;
var elm = document.getElementById("szam");
function advance() {
calc++;
elm.innerHTML = calc;
}
$('#animate').click(function() {
for (var i = 1; i <= 10; i++) {
$(this).animate({
top: '150px'
}).animate({
left: '150px'
}).animate({
top: '0'
}).animate({
left: '0'
}, advance);
}
console.log('Loop is done.');
});
#container {
height: 200px;
width: 200px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
cursor: pointer;
color: white;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 15px;
left: 85px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>CLICK</p>
</div>
<h1 id="szam">0</h1>
</div>
I've been working on a fairly simple game which resembles whack a mole but instead uses snakes. I've tried and tried but can't work out why the game won't start when I try and open it through a browser. The problem seems to be with adding in the try_again feature as the game works fine until I try and add this facility but I can' t see exactly what the root cause is. Any help is gratefully received!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body{
height: 100%;
width: 100%;
overflow: hidden;
}
.snake {
background-color: rgb(36, 176, 79);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image: url(snake.png);
background-repeat: no-repeat;
background-size: 100%;
}
#snake1{ left:10%; }
#snake2{ left:45%; }
#snake3{ left:80%; }
.score{ font-family: arial; font-size: 5vw; position: absolute; right: 50%;}
</style>
<script>
jQuery(document).ready(function(){
var add = 0;
function game_over(){
jQuery(".snake").stop().animate({"top";"100%"}, 300);
jQuery(".score").html("Game Over Motherfucker!");
jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");
}
function start(){
add = 0;
jQuery(".score").html("Score: " + add);
jQuery(".snake").animate({"top": "0%"}, 5000, function(){
game_over();
jQuery(".try_again").click(function(){start();});
});
}
jQuery(".snake").hover(function(){
jQuery(this).css("background-image", "url(hurt.png)");
jQuery(this).stop().animate({"top":"100%"}, 300, function(){
add = add - (-1);
jQuery(".score").html("Score: " + add);
jQuery(this).css("background-image", "url(snake.png)");
jQuery(".snake").animate({"top": "0%"}, 5000, function(){
game_over();
jQuery(".try_again").click(function(){start();});
});
});
});
start();
}
});
</script>
</head>
<body>
<div class="score"> Score: 0 </div>
<div class="snake" id="snake1"></div>
<div class="snake" id="snake2"></div>
<div class="snake" id="snake3"></div>
</body>
</html>
You have some syntax errors
1) jQuery(".snake").stop().animate({"top";"100%"}, 300);
should be
jQuery(".snake").stop().animate({"top":"100%"}, 300);
2)
start();
}//this is in addition you should remove it
});
</script>
Below is the fixed code :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.snake {
background-color: rgb(36, 176, 79);
border-radius: 100px 100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image: url(snake.png);
background-repeat: no-repeat;
background-size: 100%;
}
#snake1 {
left: 10%;
}
#snake2 {
left: 45%;
}
#snake3 {
left: 80%;
}
.score {
font-family: arial;
font-size: 5vw;
position: absolute;
right: 50%;
}
</style>
<script>
jQuery(document).ready(function() {
var add = 0;
function game_over() {
jQuery(".snake").stop().animate({
"top":"100%"
}, 300);
jQuery(".score").html("Game Over Motherfucker!");
jQuery(".score").append("<div class= 'try_again'>TRY AGAIN</div>");
}
function start() {
add = 0;
jQuery(".score").html("Score: " + add);
jQuery(".snake").animate({
"top": "0%"
}, 5000, function() {
game_over();
jQuery(".try_again").click(function() {
start();
});
});
}
jQuery(".snake").hover(function() {
jQuery(this).css("background-image", "url(hurt.png)");
jQuery(this).stop().animate({
"top": "100%"
}, 300, function() {
add = add - (-1);
jQuery(".score").html("Score: " + add);
jQuery(this).css("background-image", "url(snake.png)");
jQuery(".snake").animate({
"top": "0%"
}, 5000, function() {
game_over();
jQuery(".try_again").click(function() {
start();
});
});
});
});
start();
});
</script>
</head>
<body>
<div class="score"> Score: 0 </div>
<div class="snake" id="snake1"></div>
<div class="snake" id="snake2"></div>
<div class="snake" id="snake3"></div>
</body>
</html>
There are a couple of syntax errors:
1)
$(".snake").stop().animate({"top";"100%"}, 300);
should be
$(".snake").stop().animate({"top":"100%"}, 300);
(replaced ; with :)
2)
start();
}
The } is an orphan and needs removing.
Correct those and it appears to work fine. You can see these errors for yourself by opening your browser developer tools (press F12 on most desktop browsers) and looking at the console. This should really be your first step when anything doesn't work.
I am using the code below to toggle a div out of screen partially, and back in screen fully. This code tells how far "sidebar" is to move offscreen. But in my case this functionality has a problem, due to media queries applied to sidebar width. Therefore I need the code not to state how far over sidebar will move, but how much of sidebar will be left onscreen in pixels. The demo here (with the media queries).
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-55%'
});
}
});
});
Simple maths:
Say you want the side bar to have 40px left on the screen, and the rest hidden. So you want to move it left by (width - 40). I.e.
$(document).ready(function () {
$("#toggle").click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active');
$("#sidebar").animate({
left: '0%'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: - ($("#sidebar").width() - 40)
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>
Instead of setting negative left value in percentages, use the width of your element and set the left value according to the width of your element:
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
Check this snippet:
$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$("#sidebar").animate({
left: '0'
});
} else {
$(this).addClass('active');
$("#sidebar").animate({
left: '-' + ($("#sidebar").width()*0.55) + 'px'
});
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#sidebar {
width: 70%;
height: 80%;
position: relative;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>
SOLVED!!
SEE DEMO HERE
$(document).ready(function() {
$("#togglebutton").click(function() {
var $container = $('#myToggleDiv');
$container.toggleClass('hide');
});
});
I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.
var left = $('#coolDiv').offset().left;
$("#b1").click(
function() {
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, "slow");
}
);
$("#b2").click(
function() {
$("#coolDiv").css({
right: right
}).animate({
"right": "0px"
}, "slow");
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>
http://jsfiddle.net/XqqtN/5385/
Set the left CSS to the window width minus the width of the box.
$("#b1").click(function() {
// Get the current left of the div
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
left: 0
}, "slow");
});
$("#b2").click(function() {
var left = $(window).width() - $('#coolDiv').width();
$("#coolDiv").css({
left: 0
}).animate({
left: left
}, "slow");
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Optimized Code:
// Common function to animate Div on both button clicks
function animateDiv(left, right) {
$('#coolDiv').css({
left: left
}).stop(true, true).animate({
left: right
}, 'slow');
}
$('#b1').click(function() {
animateDiv($('#coolDiv').offset().left, 0);
});
$('#b2').click(function() {
animateDiv(0, $(window).width() - $('#coolDiv').width());
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Can you try something simple like this?
$(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
You can use setInterval to make it work a lot of times.
$(function () {
setInterval(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
}, 2000);
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
This is your updated code. Make changes like following:
$("#b1").click(
function() {
$("#coolDiv").animate({
"left": "0px"
},
"slow"
);
$("#coolDiv").css('right', '');
}
);
$("#b2").click(
function() {
$("#coolDiv").animate({
"right": "0px"
},
"slow"
);
$("#coolDiv").css('left', '');
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>
Hope it helps.