Develop Reference

Swipe element down and up to delete/remove element using hammer.js and jQuery?

I'm trying to swipe an element up/down to delete it.
I am using hammer.js and jQuery.
So far I can delete the element using swipe left/right which works fine.
But I need to achieve the exact same thing using swipe up/down.
I have created this working example here:
https://codepen.io/anon/pen/YJPPyB
click on the button and an element will appear and then Swipe left/right to delete it.
With the code above, I tried the followings but it doesn't work as expected:
$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
and
$toast
.removeClass('panning')
.animate({ bottom: 0, opacity: 1 }, {
duration: 300,
specialEasing: 'easeOutExpo',
queue: false
});
Can someone please advice on this issue?
Thanks in advance.
EDIT:
When I change this:
hammerHandler.on('pan', function (event) {
To this:
hammerHandler.on('pandow', function (event) {
I can move the element when I pandown but I dont know why it is very wonky!
This is how I swipe down now but it somtimes freezes the whole page and I dont undertand why!
hammerHandler.on('pandown', function (event) {
// Change toast state
$toast.addClass('panning');
var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
if (opacityPercent < 0)
opacityPercent = 0;
$toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
});

DIV moving up and down using javascript

Good day,
I'm building a website where I would like to have a div moving down and back up on a click(clicking on another div area).
It regards the header of a page with an account image inside (the header contains from left to right: logo, horizontal menu, shopping cart and account symbol)
when I click the account symbol I want the header to slide down (60 pixels) and I want another div (with account related links in it) to show up above the header that just slid down.
I've achieved something but I'm really not happy with it:
<script>
jQuery(document).ready(function($){
$(".account").click(function);
$("#accountbar").slideToggle( "slow");
$("#topheader").toggleClass("topheader topheaderdown");
$("#contentarea").toggleClass("content contentdown");
});
});
</script>
1) So what this does it loads the new account bar (height 60px) and slides this one down.
2) It displays the topheader down another 60px (css style rule top: 60px)
3) It also displays the rest of the content (the main content) down 120 pixels lower than normal when both the account bar and topheader are being displayed (by default this value is 60px, so only for the topheader)
I want things to "smoothly" slide down and back up when clicking on the account image. I got this far (for the smoothly moving down the topheader part):
<script>
jQuery(document).ready(function($){
$("#account").on('click',function(){
$("#accountinner").toggle(function() {
$("#topheaderid").animate({ top: '-=60px' }, 500);
},function() {
$("#topheaderid").animate({ top: '+=60px' }, 500);
})
});
});
</script>
PROBLEM 1: the above is only moving the topheader down further and further every time I click on it (not going back up 60px again as specified)...
PROBLEM 2: The above is also somehow sliding my account image to the right (out of screen)
And I would like to implement the other rules in this too, so that on a click the topheader just moves down smoothly with 60px, up the top appears the account navigation in a new div (accountbar) AND the content (class content) moves down another 60px. As said before using "slidetoggle" and "toggleclass" works but I much rather have the "animate" function do the job as this looks awesome.
I have implemented these rules from the first script but it does not happen "smoothly" obviously and the topheader just keeps on going down...
I hope this is enough info and someone can help :)
When this works I want to extend this with a search button as well that appears below the topheader on click.
https://jsfiddle.net/d14tcb9n
Thanks.

You can trigger the animations like:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
});
remove the display none from the hidden div and change the height to 0
demo:https://jsfiddle.net/o1cvho6m/

unable to setTimout on .animate

Currently im trying to set a page so that on click of a button one div .animates up and another .animates down in the place the old div was which has been successful. The problem is they both do this at the same time making the animation a bit messy. What I want to do is have the animation pause for about 2 seconds just after the first div has moved up and then bring down the second div. Here is my code so far:
$(document).ready(function() {
$('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
$(document).ready(function() {
$(".homecontainer").show();
});
$(document).ready(function() {
$('#about').click(function go() {
$('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({
queue: false,
duration: 'slow'
});
$('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
'margin-Top': "-1000px" //moves left
});
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': "115px" //moves left
});
});
});
I have tried inserting a .delay(2000)just before the .fadeIn here:
$('.aboutcontainer ').fadeIn
and another one before the .animate here:
$('.aboutcontainer').animate
.delay does not seem to work at all (im using the lates jQuery version)
The weird thing is I have tried using a setTimeout() function like so:
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$('.aboutcontainer').animate({
'margin-Top': '115px' //moves left
});
}, 2000);
When I do the .fadeIn pauses for the 2 seconds but the .animate does not. Can someone please let me know what im doing wrong here?

At your site .aboutcontainer has margin-top: 115px; at main.css:131.
So animation from margin-top: 115px; to margin-top: 115px; actually does nothing.
You can set, for example, margin-top: -1000px for .aboutcontainer and see the animation in action.

You are missing the time paramater for animation,
Try to add the timing for animation like below.
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 'slow'
});
$(".aboutcontainer").animate({
marginTop: "115px",
}, 750);//Look at here..
}, 2000 );
here is the jsfiddle, check it http://jsfiddle.net/ganeshgaxy/d6g1empb/

jQuery mobile disable vertical scroll after transition

I have a Problem concerning scrolling in jQuery mobile.
I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:
#navbar | #header (with Button #showNavBar)
| #content
|
| #footer
At first the #navbar is behind behind my content area (with header and footer).
By clicking the Button #showNavBar I am doing the following:
header.animate({
left: "200px"
}, { duration: 300, queue: false });
content.animate({
left: "200px"
}, { duration: 300, queue: false });
So the users can see the navbar on the left side. To this point everything works well.
But trouble starts. Now it is possible to scroll to the right side to see the full content area.
But it isn't possible to scroll the header...
Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.

try
$(document).delegate('.ui-content', 'touchmove', false);​

Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.
Here is how I do it right now. The body gets a new width in the animation.
var viewport = {
width : $(window).width(),
height : $(window).height()
};
function openme() {
$(function () {
topbar.animate({
left: "200px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "200px", width: (parseInt(viewport['width']) - 200) + "px",
}, { duration: 300, queue: false });
console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px", width: "100%",
}, { duration: 180, queue: false });
console.log("close me");
});
}
Hope this helps anybody.
Thanks to Rachel for beeing so patient and giving me a help!

Jquery hover action diappears when going to next div

Im new to learning JQuery. Im doing a sample from JQuery Novice to Ninja and Im getting an error when I move my mouse over then next item. The #navigation_blob dissapears it could be a css problem for all I know but run the code tell me what you think I need to do. Im using the easing plugin
$(document).ready(function () {
$('<div id="navigation_blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');
$('#navigation a').hover(function () {
$('#navigation_blob').animate(
{ width: $(this).width() + 10, left: $(this).position().left },
{ duration: 'slow', easing: 'easeOutElastic', queue: false }
)
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
{duration: 'slow', easing: 'easeOutCirc', queue: false}
)
.animate({
left: $('#navigation li:first a').position().left }, 'fast'
);
});
});
<style type="text/css">
#navigation li
{
display:inline-block
}
#navigation_blob
{
background-color:Blue; position:absolute; float:left
}
</style>
<ul id="navigation"><li>Home</li><li>About Us</li><li>Buy!</li><li>Gift Ideas</li></ul>

I think your problem is the width: 'hide' in the first .animate() of the second .hover() function:
//...
}, function () {
$('#navigation_blob')
.stop(true)
.animate(
{width: 'hide'},
//...
I think your blob will, essentially, have display: none; once that animation completes so further manipulations of its width or position will have no visible effect. If you say {width: 0} it should work okay: http://jsfiddle.net/ambiguous/YaVzd/
You can also try adding an explicit .show() before the hover-in animation but that produces some odd effects: http://jsfiddle.net/ambiguous/uH9yJ/1/

It looks like the version of jQuery is the culprit here. In this fiddle everything looks fine (using jQuery 1.4.2). However, if you change the version to 1.4.4 (the latest version), things start acting weird. Additionally, I downloaded the code from this book and it looks like the version of jQuery that this sample is using 1.4.
This makes sense if the author's update log is correct. According to the plugin's website, the last update was 12/11/07, which may mean development has stopped, but at the very least it probably means the plugin is out of date.
Hope that helps.