I'm making a simple javascript game where you click the ball, it goes up, and you have to click it again before it touches the ground. How do I make it so that you click the ball on the way down and it stop the last request and begin moving back up again?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function moveBall() {
$.fx.speeds._default = 3000;
$("#ball").animate({bottom:'360px'});
$("#ball").animate({bottom:'0px'});
setTimeout( function(){
document.getElementById("block").innerHTML = "Game Over";
}, 6000 );
}
</script>
<style>
#ballGame {
height:350px;
width:350px;
border-style:solid;
border-width:5px;
overflow:hidden;
}
#ball {
background:#98bf21;
height:50px;
width:50px;
position:relative;
border-radius:100px;
outline:0;
}
#block {
height:300px;
}
</style>
<div id="ballGame">
<center>
<div id="block"></div>
<button id="ball" onclick="moveBall()"></button>
</center>
</div>
Try $("#ball").stop(true, false) at the beginning of your moveBall function.
See the jQuery doc : http://api.jquery.com/stop/
Since you are already using jQuery, I would clean up the code a little first; you don't need to call a function (onclick="moveBall()") within the HTML code. Instead, just create a click-function:
$('#ball').click(function() {
$('#ball').stop(true);
$("#ball").animate({bottom:'360px'});
$("#ball").animate({bottom:'0px'}, function() {
$('#block').text("Game Over");
});
}
I also changed the part where it shows the text "Game Over", so that it only appears when the animation that brings the ball down is complete.
Here's a fiddle: http://jsfiddle.net/Niffler/a71xf13k/
Related
The problem is in the snippet that begins with the "mouseup' event. I'm trying to get the alert to show when I drag and drop a .tile image, snapping it onto the .amherst div. The image snaps onto the div, but no alert shows.
I'm a real beginner programming in Javascript/jQuery. I did not know how to include the position() function in a conditional, but found examples on the web--but I'm still not sure that I've got that part of it right. And I'm not sure about the use of 'this' here.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{
position:relative;
}
.tampa{
position:absolute;
top:418px;
left:907px;
width:250;
}
.tile{
width:47px;
height:47px;
}
#tile0{
position:absolute;
top:590px;
left:328px;
}
#tileH{
position:absolute;
top:590px;
left:375px;
}
#tileF{
position:absolute;
top:590px;
left:422px;
}
#tileR{
position:absolute;
top:590px;
left:469px;
}
.img{
width:100%;
height:auto;
}
.amherst{
position:absolute;
top:417px;
left:827px;
}
</style>
<script src="jQ/jQuery.js"></script>
<script src="jQ/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$("document").ready(function(){
$('.tile').mouseup(function(){
if ($(this).position().top==417 &&
$(this).position().left==827){
alert("Hello");
}
});
$('.tampa').click(function(){
if ($('.tampa').attr('src')== 'GamePremiseOff.jpg'){
$('.tampa').attr('src', 'GameConclusionOff.jpg');
} else if ($('.tampa').attr('src')== 'GameConclusionOff.jpg'){
$('.tampa').attr('src', 'GamePremiseOff.jpg');
}
});
$('#tile0').draggable({snap:".amherst"});
$('#tileH').draggable({snap:".amherst"});
$('#tileF').draggable({snap:".amherst"});
$('#tileR').draggable({snap:".amherst"});
});
</script>
</head>
<body>
<div class="amherst"></div>
<div class="container">
<img src='GameboardCompleteDemo.jpg' width='1620' height='740'>
<img class='tampa' src='GamePremiseOff.jpg'>
<img id='tile0' class='tile' src='GameTile0.jpg'>
<img id='tileH' class='tile' src='GameTileH.jpg'>
<img id='tileF' class='tile' src='GameTileF.jpg'>
<img id='tileR' class='tile' src='GameTileR.jpg'>
</div>
</body>
</html>
I wanted the alert to show, but it doesn't, and I get no error messages
Your $('.tile').mouseup (with that very strict positioning), is very likely to never call an alert.
If you want to, you need to call it after draggable has finished, meaning either callbacks or jQuery stop event like in this the demo: http://www.tutorialspark.com/jqueryUI/jQuery_UI_Draggable_Start_Stop_Events.php . Try writing the alert in the stop function, like so:
stop: function() {
alert('hi')
}
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I have a problem with animation, when I scroll the page. You can see it above.
Click "show notice" button and wait about 2 seconds, then the notice will start to hide. Scroll up and down and you will see the notification is jumping up and down. What do I need to do to have notice always in the bottom of website window, even during scrolling?
JSFIDDLE
HTML
<input type="button" value="show notice">
<div id="notice"><p>Notice</p></div>
CSS
body {
height:3000px;
}
#notice {
display:none;
position:absolute;
top:0;
left:0;
width:100px;
height:40px;
background:green;
text-align:center;
font:12px Verdana; color:white;
}
#notice p {
}
JS
function shownotice(){
if(typeof(ntimeout)!='undefined')
clearTimeout(ntimeout);
$('#notice').css({'height':'0px', 'top':h+$(window).scrollTop()+'px'}).show().animate({'height':'+=40px', 'top':'-=40px'}, {duration:300});
ntimeout=setTimeout(function(){hidenotice();}, 2000);
}
function hidenotice(){
$('#notice').animate({'height':'-=40px', 'top':'+=40px'}, {duration:10600, complete:function(){$(this).hide();}});
}
$(function(){
h=window.innerHeight||document.body.clientHeight;
$('#notice').css({'top':h-$('#notice').height()+'px'});
$('input').on('click', function(){shownotice();});
$(window).scroll(function(){$('#notice').css({'top':h-$('#notice').height()+$(window).scrollTop()+'px'})});
});
http://jsfiddle.net/sn1xfwxm/11/
changes to your original fiddle:
#notice {
position:fixed;
removed the display: none, also!
the resulting js is much more simple:
$("#notice").hide(); //hide the notice on document load
$("#show").click(function () {
$("#notice").stop(true, true).slideDown();
});
$("#hide").click(function () {
$("#notice").stop(true, true).slideUp();
});
I wrote the following code that includes a "down arrow" which when pressed, is meant to scroll the page down one section at a time. It only seems to work once though - can anyone see what I've done wrong?
Note: The body height intentional and is enough to support my needs.
<STYLE>
*{margin:0;padding:0}
body{height:1000px; width:2000px; overflow:hidden;}
SECTION{border: 1px dashed black; height:100px; width:300px; overflow:auto; float:top;}
.int{position:relative; width:100px;height:100px;background:#fff; float:left;}
</STYLE>
<SECTION ID="1">1</SECTION>
<SECTION ID="2">2</SECTION>
<SECTION ID="3">3</SECTION>
<SCRIPT SRC="jquery.js"></SCRIPT>
<SCRIPT SRC="jquery.easing.1.3.min.js"></SCRIPT>
<SCRIPT>
function scroll($dir){
// This is the main scroll function
if($dir=="down")
$('html,body').stop().animate({
scrollTop: $('html,body').offset().top + $("SECTION#1").height()
}, 800, "easeInQuart");
}
// Function which controls key-based navigation
$(document).on("keydown", function(e) {
if(e.which == 40) scroll("down");
});
</SCRIPT>
$('html,body').offset().top + $("SECTION#1").height() always returns the same value. So that is why it is not working.
As a solution, try $(document).offset().top or use a counter like so:
var currentPage = 0;
function scrollDown() {
$(...).animate({scrollTop: pageHeight * (currentPage++)});
}
I am trying to get an animation effect where current content fades out, and is then replaced by content sliding in from the right side of the screen. My current effort:
http://jsfiddle.net/LKazq/3/
<p>header</p>
<div id="wrapper">
<div style="height: 400px; background-color: red;">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
$('#next').click(function () {
var current = $('#wrapper :first-child');
var next = $('<div>').css("height", "400px").css("background-color", "blue");
next.hide();
current.fadeOut(800, function () {
current.remove();
$('#wrapper').prepend(next);
next.show("slide", { direction: "right" }, 800);
});
});
Two problems:
The removed element is still taking up space; notice how the footer gets pushed down.
Is there anyway to suppress the horizontal scroll bar?
Any tips on better ways to do this are appreciated. Thanks!
The reason for the vertical scroll back is because of an additional UI wrapper that jQuery UI puts in place.
You can do this with regular jQuery and it should be just fine:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').css({
height:400,
backgroundColor:'blue',
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800);
});
});
Updated jsFiddle.
That's the quick-fix way to do it. An additional step is to externalize your CSS into classes (which you really, really should do instead of inline styles) to make things a bit cleaner:
HTML:
<p>header</p>
<div id="wrapper">
<div class="first">
<p>Here is some text!</p>
<button id="next">And a button!</button>
</div>
</div>
<p>footer</p>
CSS:
wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
}
Better jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second').css({
marginLeft:'100%',
display:'none'
});
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().animate({marginLeft:0},800,function(){
$(this).removeAttr('style');
});
});
});
Here is a second jsFiddle for that.
And finally the best (although not ancient-browser compliant) way to do it, by maximizing CSS.
CSS:
#wrapper {
overflow:auto;
overflow-x:hidden;
}
.first {
height:400px;
background-color:red;
}
.second {
height:400px;
background-color:blue;
margin-left:0;
-webkit-transition:margin-left 800ms;
-moz-transition:margin-left 800ms;
-o-transition:margin-left 800ms;
transition:margin-left 800ms;
}
.secondPushed {
margin-left:100%;
}
Smaller jQuery:
$('#next').on('click',function(){
var wrapper = $('#wrapper'),
current = wrapper.children().first(),
next = $('<div>').addClass('second secondPushed').hide();
current.fadeOut(800, function () {
$(this).remove();
wrapper.prepend(next);
next.show().removeClass('secondPushed');
});
});
This is the best from an overhead perspective, and its the way to do it in the modern web world, but it doesn't work on IE9 and below.
Here's a jsFiddle for that one.