So when I click once it does both the Jquery codes ... I would like it that when I
click it slides down and stays down until I click again, how to?
I tried click1 and click2 but it is not ideal.
I also tried giving them other id but it wasn't logical.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(1500);
});
});
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp(1500);
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
As you've seen, when you attach multiple handlers they all execute at the same time. Instead, attach one handler and call slideToggle() instead.
Also note that you may want to add a call to stop() in there so that when the element is clicked rapidly the animations do not queue up. Try this:
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").stop(true).slideToggle(1500);
});
});
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
$(document).ready(function(){
$("#flip").click(function(){
if($('#panel').is(':visible')){
$("#panel").slideUp(1500);
}else{
$("#panel").slideDown(1500);
}
});
});
The issue is that there are two click events bound to the div. Instead, you need to keep track of the state (i.e. isUp or isDown) and do it with a single click handler. Something like this:
$(document).ready(function(){
var isDown = false;
$("#flip").click(function(){
if( !isDown ){
$("#panel").slideDown(1500);
isDown = true;
} else {
$("#panel").slideUp(1500);
isDown = false;
}
});
});
Related
I have images (.rv_button) that are acting as buttons to toggle the div's below (#reveal). I want to hover over the button to open the div but right now I can't get the div to stay open. Can someone help me with this?
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').on('mouseenter mouseleave', function(e) {
e.preventDefault();
jQuery("#reveal").fadeToggle()(slow, swing, callback);
jQuery('.rv_button').toggleClass('open');
});
});
Rather than using toggleClass(), on mousenter, remove the open class from all of the buttons and add it to e.target or $(this). And on mouseout just remove it from all the buttons.
Also, remove (slow, swing, callback) or use them as arguments in fadeToggle().
e.g.
jQuery("#reveal").fadeToggle('slow');
And to keep the div to stay open, just wrap the buttons and div in a container and listen for the mouseout event on it instead of the buttons themselves.
$(document).ready(function() {
// Hide the div
$('#reveal').hide();
$('.rv_button').on('mouseenter', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$(e.target).addClass('open');
$("#reveal").fadeIn();
});
$('.container').on('mouseleave', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$("#reveal").fadeOut();
});
});
.container {
width: 400px;
}
#reveal {
width: 400px;
height: 400px;
background-color: beige;
text-align: center;
font-size: 2em;
}
.rv_button {
padding: 1em;
background-color: brown;
width: 400px;
box-sizing: border-box;
}
.open {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="rv_button">Button 1</div>
<div class="rv_button">Button 2</div>
<div class="rv_button">Button 3</div>
<div id="reveal">Reveal</div>
</div>
I have one horizontal div and am trying to scroll to different elements based on id on click.
JS Fiddle Demo
Here are the two main functions I tried:
function scroll1() {
/* Attempt 1 */
$('#scroll-post-1').scrollTo('#2')
}
function scroll2() {
/* Attempt2 */
$('#scroll-post-1').stop().animate({
scrollLeft: $('#3').offset().left
}, 500);
event.preventDefault();
}
See the second attempt in action here:
function scroll1() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#2').offset().left
}, 500);
event.preventDefault();
}
function scroll2() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#3').offset().left
}, 500);
event.preventDefault();
}
function scroll3() {
$('#scroll-post-1').stop().animate({
scrollLeft: $('#4').offset().left
}, 500);
event.preventDefault();
}
.scroll-post {
height: auto;
background-color: grey;
position: relative;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.mydiv {
position: relative;
font-size: 5em;
width: auto;
background-color: red;
display: inline-block;
padding: 2%;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
</head>
<body>
<div class="scroll-post" id="scroll-post-1">
<div class="mydiv" id="1" onclick="scroll1();">Start Here</div>
<div class="mydiv" id="2" onclick="scroll2();">Scroll Here</div>
<div class="mydiv" id="3" onclick="scroll3();">Then Here</div>
<div class="mydiv" id="4">Finally Here</div>
</div>
</body>
</html>
I've tried the $(container).scrollTo(target) method without any luck.
It works for the first element, but not any of the subsequent elements.
The problem is that the .left offset that jQuery was tracking was relative to the container, so it degraded as the element moved.
A better way would be to use the native JavaScript property for the element, offsetLeftMDN.
For example:
scrollLeft: $('#3')[0].offsetLeft
Full Demo of your code with offsetLeft: https://jsfiddle.net/5umvne08/
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle
I'm trying to create a simple 2-D game in Javascript. I'm going to use jQuery to do some animations.
There will be buttons that a player will use to call various functions (Move up/down/left/right, Attack, Defend, etc).
A movement() function will call a secondary function, animateCharacter(), to handle the movement of an image object on screen.
The problem I'm having is that the next command in the movement() function executes before the animateCharacter() function has finished.
I tried to add a callback function, but that didn't fix the situation. I've tried many other things -- setInterval, setTimeout, .delay, etc. Nothing seems to fix this situation. What am I not doing, or what am I doing wrong?
Here's a simplified example of the problem....
What I'm expecting to happen is the user hits [Move the Block], the image of a yellow face moves a bit to the right; then the mainContainer turns into "hello", and then turns into "goodbye."
But what happens instead is: The user hits [Move the Block], the mainContainer immediate says "goodbye", then the animation is never visible, but when the animation finishes, the mainContainer turns into "hello."
If I comment out the final command, the animation is seen and the mainContainer turns into "hello," as expected; but then I don't get to do the that final line of code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<script>
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, function () { callbackSent();});
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("mainContainer").innerHTML = "goodbye";
}
</script>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Try This.
Moved document.getElementById("mainContainer").innerHTML = "goodbye"; to the setTimeout function, that will execute after Hello is printed in the div.
Your code was executing like:
Animate the box with 1500 miliseconds - Animation starts
Change main content to goodBye without waiting for animation completion - Right after animation start
Animation got Completed, so change content to Hello - Animation Completes, though the user never saw it.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({left: "+=50"},1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello";
setTimeout(function(){document.getElementById("mainContainer").innerHTML = "goodbye"; },1000);
};
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#mainContainer {
border: 1px solid gray;
width:100px;
height:100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color:blue;
text-align:center;
background-color:yellow;
position:relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe" onclick="doTask();">Move the Block</button>
</body>
</html>
Your code does what it is told at the moment. You need to introduce a delay before showing goodbye.
// MOVE THE BLOCK TO THE RIGHT
function animateCharacter(callbackSent) {
$("#myObject").animate({
left: "+=50"
}, 1500, callbackSent);
}
// DO THIS WHEN THE BUTTON IS PUSHED
function doTask() {
animateCharacter(function () {
$("#mainContainer").html("hello");
setTimeout(function () {
$("#mainContainer").html("Goodbye");
}, 3000);
});
}
$('#pushMe').click(doTask);
JSFiddle: http://jsfiddle.net/TrueBlueAussie/7tucg2s5/1/
Notes:
I also used jQuery alternatives to shorten the code.
I moved your inline onclick handler to the jQuery equivalent as that is easier to maintain.
You can't put your "goodbye" message directly in #myContainer because this will destroy #myObject. Add another div to hold the message:
HTML:
<div id="mainContainer">
<div id="myObject">:c)</div>
<div id="myText"></div>
</div>
CSS:
#myText {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
JavaScript:
function doTask() {
myCallback = function () { document.getElementById("mainContainer").innerHTML = "hello"; };
animateCharacter(myCallback);
// WORKS FINE IF THIS IS COMMENTED OUT,
// BUT I WANT MORE CODE TO EXECUTE
document.getElementById("myText").innerHTML = "goodbye";
}
Fiddle here: http://jsfiddle.net/robbyn/0qkt0v5r/
Try
function animateCharacter() {
return $("#myObject").animate({
left: "+=50"
}, 1500, function() {
$(this)
.fadeOut(500)
.parent()
.html("<span>hello</span>")
.find("span")
.delay(1500, "fx")
.fadeOut(250, function() {
$(this).html("Goodbye").fadeIn(250)
})
})
}
$("#pushMe").on("click", function() {
animateCharacter()
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
#mainContainer {
border: 1px solid gray;
width: 100px;
height: 100px;
position: relative;
}
#myObject {
border: 1px solid gray;
width: 30px;
height: 30px;
color: blue;
text-align: center;
background-color: yellow;
position: relative;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="myObject">:c)</div>
</div>
<button id="pushMe">Move the Block</button>
</body>
</html>
I use photoswipe plugin. Photoswipe close when i tap close button. But after photoswipe hided, div tap event triggered on image that was under photoswipe div. How i can prevent this behavior?
For example:
<!DOCTYPE HTML >
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.js"></script>
<style type="text/css">
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
})
</script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
How it work
-tap second div
-fired tap event on second div
-second div hide
-fired tap event on first div
What i want
-tap second div
-fired tap event on second div
-second div hide
-nothing happening
What i should do in second div tap handler for prevent firing tap event on first div?
I changed example to see what events triggered
$(function()
{
$('.first').bind('vmousedown',function()
{
info('vmousedown first' )
}).bind('vmouseup', function(){
info('vmouseup first')
})
.bind('click',function(){
info('click first');
}).bind('tap', function(){
info('tap first');
});
$('.second').bind('vmousedown',function()
{
info('vmousedown second' )
}).bind('vmouseup', function(){
info('vmouseup second');
})
.bind('click',function(){
info('click second');
}).bind('tap', function(){
info('tap second');
$(this).hide();
});
});
PC output:
vmousedown second
vmouseup second
click second
tap second
Android :
vmousedown second
vmouseup second
tap second
vmousedown first
vmouseup first
click first
tap first
Well I think the problem is you are using jQM Alpha (jquery.mobile-1.0a4.1.js), upgrading to the latest release I think it works as expected. Also you might bind the tap event .bind('tap', function()
http://jsfiddle.net/LFPNC/
JS
$(function()
{
$('.first').tap(function()
{
$(this).css({backgroundColor : 'green'});
});
$('.second').tap(function()
{
$(this).hide();
});
});
HTML
<!DOCTYPE HTML >
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>
</body>
</html>
CSS
div
{
width: 300px;
height: 300px;
}
.first
{
background-color: black;
}
.second
{
width: 200px;
height: 200px;
position: absolute;
top : 50px;
left: 50px;
background-color: red;
z-index: 2;
}