Develop Reference

Prevent Swiping/Dragging of slides in PhotoSwipe

I can not seem to get Photoswipe to prevent a drag/swipe from changing slides (so only the arrows go to the previous/next slides)
The issue is that I've got a HTML slide with touch events inside it, but photoswipe's touch events are superseding them and while dragging around in the content of the slide, the entire slide moves too...
I thought this event was supposed to prevent it?
pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
preventObj.prevent = true;
});
I also tried the 'isClickableElement' option, but that doesn't seem to help, either...

This method isn't ideal, but if you're looking to disable swiping/dragging without having to use a modified version of PhotoSwipe, this worked for me:
var allowSwipe = false;
function preventSwipe (e) {
if (!allowSwipe) {
e.preventDefault();
e.stopPropagation();
}
}
pswp.container.addEventListener('pointerdown', preventSwipe);
pswp.container.addEventListener('MSPointerDown', preventSwipe);
pswp.container.addEventListener('touchstart', preventSwipe);
pswp.container.addEventListener('mousedown', preventSwipe);
Or if you're using jQuery:
var allowSwipe = false;
$(pswp.container).on('pointerdown MSPointerDown touchstart mousedown', function () {
return allowSwipe;
});
Using the allowSwipe variable, you can re-enable swiping at any point by setting it to true.

How to animated/smooth scroll to div using scrolltop

Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.

Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation

preventDefault() on touchstart without disabling scrolling

I use the following script to prevent the first tap on a link:
$(document).ready(function () {
$('#container a').bind("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().parent().data('clicked') == $link_id) {
return true;
} else {
e.preventDefault();
}
});
});
Because these links [#container a] are covering the whole screen I am not able to scroll on touch devices.
Is there a way to keep the scrolling behavior working if the user scrolls (touchmove / swipe / drag / …)?
Maybe there is another way / script to get the effect I want without disabling scrolling…?

I found another solution to this problem by using quo.js this library will handle tap event without effecting on scrolling functionality
the code will be like this
$(document).ready(function () {
$$('#container a').tap(function(){
//your function here
});
});

Fancybox plugin and $(window).scroll

I'm using the fancybox plugin without image resizing by window height. The gallery images are the right resolution with a height about 800-2000px. So user should scroll every picture in the stack. To make it easier I decided to insert a scrollToTop button. But it didn't work, because fancybox somehow blocks the scroll event. I just tried recreating the scroll event by doing:
$(window).scroll(function() {
alert('Scroll');
});
But it didn't work either.

I guess you should initialize your scrollToTop button within a fancybox (afterShow) callback like :
afterShow: function() {
$("#scrollButtonID").on("click", function() {
$(".fancybox-overlay").scrollTop(0); // or whatever value
});
}
Notice that instead of targeting $(window) we are actually moving to the top of the fancybox overlay $(".fancybox-overlay")
See this jsfiddle
In my DEMO I set the button as an appended element of the fancybox overlay but you could set it as the title of fancybox too. For a smoother transition you could animate the scroll event, but that is cosmetic ;)

You can also use vanilla javascript for this:
window.onscroll = function () {
alert('Scroll');
}

Try binding with .on()?
$(document).on('scroll', function() {
alert('Scroll....');
});

FancyBox - jQuery Plugin
Version: 1.3.4 (11/11/2010)
line from 1073 to 1083, i disable part of code
/*if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}*/

jQuery JS scroll to top on click works only once?

I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?

Maybe you could use internal links (href="#top") instead of binding events with jQuery.

jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this