I tried to do some animation with click function button and left/right arrow keyboard, just a simple left-right sliding animation. At first those script works perfectly, til I edit here and there, but not these JS.
When I run it again, only the keyboard based animation works, the button click animation wont work anymore.
$(document).ready(function(){
$('.btnright').click(function(){
$('.project').animate({
left: '-=150px',
});
});
$('.btnleft').click(function(){
$('.project').animate({
left: '+=150px',
});
});
});
I do test the the click function with alert, but the alert wont work too.
$(document).ready(function(){
$('.btnright').click(function(){
alert('right');
});
$('.btnleft').click(function(){
alert('left');
});
});
And I already check if I used the wrong class, but now, it's just allright.
<div class="btnright"><span class="material-icons">keyboard_arrow_right</span></div>
<div class="btnleft"><span class="material-icons">keyboard_arrow_left</span></div>
Here are the keyboard animation script, this keyboard script works fine
$(document).on("keydown", function(event) {
var x = event.keyCode;
if (x == 37) { // left
$('.project').animate({
left: '+=150px',
});
} else if (x == 39) { // right
$('.project').animate({
left: '-=150px',
});
}
});
Maybe I'm missing something. I'll appreciate for ya'll help. Thx.
Remove the trailing comma from your options object. Also, you need to specify the duration for the animation. Also, .project would need to be absolutely or relatively positioned (instead of default of static) for left to have an effect. So:
$('.btnright').click(function(){
$('.project').animate({
left: '-=150px'
}, 500);
});
With CSS:
.project {
position: relative;
}
Instead of:
$('.btnright').click(function(){
$('.project').animate({
left: '-=150px',
});
});
Codepen: http://codepen.io/anon/pen/WQzazR
Related
I'm using jQuery 191 and Hammer JS 204. I have the following example scenario
<div> class="myDiv">
<div class="content">
<img>
</div>
</div>
Example JS
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
});
$('.content img').on('click', function(){
console.log('i was clicked');
});
When I click on the image to start panning myDiv, Right after panend, the myDiv img click event gets fired.
I've tried to stopPropagation and stopImmediatePropagation but still couldn't get it to stop firing the click after i finish panning.
var hammering = false;
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
hammering = true;
}).bind("panend", function(h) {
setTimeout(function(){
hammering = false;
}, 300);
});
$('.content img').on('click', function(){
if(hammering) return false;
console.log('i was clicked');
});
Another way to avoid this ghost click is to create a pseudo class over the hammer target.
for example you can add class and the style something like
`.block:after {
content: " ";
background: transparent;
top: 0;
left: 0;
width: 250px;
height: 100%;
z-index: 2;
display: block;
position: absolute;
}`
when panstart and remove it when panend.
hope this trick will help others.
I find out a easy way could prevent click event while hammer.js panning:
disable div pointer-events while pan start, then enable it while pan end.
...
myPanGesture.on("panstart", function(ev) {
$(".tab-pane.active").css({'pointer-events':'none'});
});
...
myPanGesture.on("panend", function(ev) {
$(".tab-pane.active").css({'pointer-events':'auto'});
});
...
<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.
well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});
Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});
Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/
I'm currently working on a small project, with draggable divs. The code I've created seems to not be working, and it causes JQuery to stop responding.
Is there a nice and easy way to do this without using .draggable?
var hold = false;
//Drag Elements
$('#example').mousedown(function(){
hold = true;
});
$('#example').mouseup(function(){
hold = false;
});
$(document).on('mousemove', function(e){
$('#example').css({
while(hold){
left: e.pageX-50,
top: e.pageY-50
}
});
});
Thanks
Since Javascript is single-threaded, your while loop never exits, because the mouseup handler can't run while you're stuck in the mousemove handler.
Change while to if:
$(document).on('mousemove', function(e){
if (hold) {
$('#example').css({
left: e.pageX-50,
top: e.pageY-50
});
}
});
I'm trying to animate and image up and then down with jQuery.
It should behave like this:
When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.
html
<div id="slidebottom" class="slide">
<div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
</div>
jQuery
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
});
});
How can I reverse the animation after click two? At the moment every time I click, the container moves up.
You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:
$(document).ready(function(){
$('.try').toggle(function() {
$(".inner").animate({top: '-=100px'}, 2000);
}, function() {
$(".inner").animate({top: '+=100px'}, 2000);
});
});
However, I personally would use a class and CSS3 Transitions.
Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.
var clicked = false
$('.try').click(function () {
if (clicked == true) {
$(".inner").animate({
top: '0px'
}, 2000);
clicked = false;
} else {
$(".inner").animate({
top: '-100px'
}, 2000);
clicked = true;
}
});
Just put another code line underneath the first and it will animate them in order
$(document).ready(function() {
$('.try').click(function() {
$(".inner").animate({
top: '-=100px'
}, 2000);
$(".inner").animate({
top: '+=100px'
}, 2000);
});
});
I'm trying to create a simple toggling sidebar using jquery, where it expands and contracts when a button is pressed. The button also changes to another type of button when pressed. The sidebar will expand, but for some reason, it will not move back to it's original position.
You can see a copy of the javascript and html at http://www.jqueryhelp.com/viewtopic.php?p=4241#4241
Here is the working code, thanks Bendeway! :D
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 100}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
try instead of right use left with a negative number. in addition I would recommend using preventDefault instead of returning false.
$(".active").click(function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide");
});
Update
Another piece i just noticed is that your attaching a click event to the .active button, when the document is ready, but there is no .active button when the document is ready that comes in after you change it. There are a couple options here.
First is to use the new live feature of jquery 1.3
$(".btn-slide").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: 250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
$(".active").live('click', function(e){
e.preventDefault();
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
$(this).toggleClass("btn-slide").toggleClass("active");
});
The other option would be to have set the click event on a different modifier (eg. on the id, maybe).
<span>News <img src="img/overlay.png" id="sliderButton" class="btn-slide" alt="" /></span>
then use this to handle the click
$("#sliderButton").click(function(e){
e.preventDefault();
$(this).is('.btn-slide').each(function() {
$("#sidebar").animate({opacity: "show", left: 250}, "slow");
});
$(this).is('.active').each(function() {
$("#sidebar").animate({opacity: "hide", left: -250}, "slow");
});
$(this).toggleClass("active").toggleClass('btn-slide');
});
or even more concise
$("#sliderButton").click(function(e){
e.preventDefault();
var animationSettings = {opacity: "show", left: 250};
if ($(this).hasClass('active') )
{
animationSettings = {opacity: "hide", left: -250};
}
$("#sidebar").animate(animationSettings , "slow");
$(this).toggleClass("active").toggleClass('btn-slide');
});
The final option that I can think of would be to set the click events after you change them, but I wouldn't do that so I'm not going to supply a sample.
Lastly, I would put in alert into your active callback and make sure that your active button event is actually firing.
The way your logic is written, I think you need to do a 'toggleClass' on both classes inside your click handlers which will add one and remove the other. For example, when your "active" item is clicked you toggle (add) the btn-slide class, but this will leave the "active" class in place too.
Of course instead of using "toggleClass" you could also use "addClass" and "removeClass" to be more explicit.
I recommend using a tool like Firebug to watch what's happening inside your DOM.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").animate({opacity: "show", left: "250"}, "slow");
$(this).toggleClass("active"); // add class
$(this).toggleClass("btn-slide"); // remove class
return false;
});
});
$(document).ready(function(){
$(".active").click(function(){
$("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
$(this).toggleClass("active"); // remove class
$(this).toggleClass("btn-slide"); // add class
return false;
});
});
This works.
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#sidebar").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
$(function() {
var ecswitch = 1;
/* prevent the annoying scroll back up thing */
$("#ec").click(function(e) {
e.preventDefault();
var x = $("#main").width(); // get element width
var y = $("#main").height(); // get element height
if (ecswitch == 1) {
$("#main").animate({
opacity: 0,
hieght: "0",
width: "0"
}, 1300);
ecswitch = 0;
} else {
$("#main").animate({
opacity: 1,
hieght: y,
width: x
}, 1300);
ecswitch = 1;
}
});
});
#main {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
Expand / Contract
<div id="main">
Watch Me Shrink Or Grow
</div>
</div>
I chose to do this a little differently. this initializes with the height of our experiment being 200px and the width is automatic. When you click the hyperlink the experiment is hidden in 1.3 seconds and a switch is set to 0. when you click again it comes back over a period of 1.3 seconds and the switch gets set back to 1. like a light switch. I used the animate here because a simple fade or hide got me bored...
The reason why I got the widths and heights of the element before zero-ing them was if said width:100%" and height: "100%" in my animate it would set it to 100% of the page's width and height...we don't want that.
NOTE: I am also using the opacity over a time period. quite nice for fading as well :)