We Keep Coding

Page jumps up when clicking on hamburger menu

I am building a template which can be seen here: http://www.alessandrosantese.com/aldemair-productions/
when you scroll down and you click on the hamburger menu to open the off-canvas menu (foundation 6) the page jumps up.
This is my js so faR:
$(document).foundation();
$(document).ready(function(){
function carouselInit() {
if($('.single-project').length > 4 && !$('.slick-initialized').length) {
$('.single-item').slick({
responsive: [
{
breakpoint: 1024,
settings: 'unslick'
}]
});
}
else {
console.log('4');
}
}
$('.hamburger').on('click', function(){
if($('header').hasClass('fixed')){
$('header').removeClass('fixed').addClass('absolute');
$(this).toggleClass('open');
}
else {
$('header').removeClass('absolute').addClass('fixed');
$(this).toggleClass('open');
}
});
carouselInit();
var resizeId;
$(window).resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(carouselInit, 500);
});
});
When clicking on the hamburger icon the all page shouldn't jump up.

This is the piece of code that makes the page jump:
// Elements with [data-toggle] will toggle a plugin that supports it when clicked.
$(document).on('click.zf.trigger', '[data-toggle]', function () {
triggers($(this), 'toggle');
});
When you click on the hamburger menu it triggers 'toggle.zf.trigger' on the element with id 'sth'. This further goes into the open function that has this piece of code:
if (this.options.forceTop) {
$('body').scrollTop(0);
}
Guess what it does? :) I can only assume that setting OffCanvas forceTop option to false will remove this behaviour.

Magnific PopUp Inline Gallery

i am using the magnific Popup Plugin (http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup)
May i put my code in here first:
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
// Delay in milliseconds before popup is removed
removalDelay: 600,
// Class that is added to popup wrapper and background
// make it unique to apply your CSS animations just to this exact popup
mainClass: 'mfp-fade',
type:'inline',
midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.,
callbacks: {
beforeOpen: function() {
if($(".image-container img").attr("title") != "" && $('.image-container img').length > 0){
if ($('.imagetitle').length > 0) {
// it exists
}else{
$(".image-container").append("<span class='imagetitle'>"+$(".image-container img").attr("title")+"</span>");
$(".image-container span.imagetitle").css({
"left": $(".image-container img").position().left+"px",
"margin-top":10+"px",
"margin-bottom":10+"px"
});
}
}
//Make it a Gallery! - Whoop Whoop
if($("div.white-popup").length > 1){
$("div.white-popup").append("<div class='popupgalleryarrowleft'> </div>");
$("div.white-popup").append("<div class='popupgalleryarrowright'> </div>");
}
},
open: function(){
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
}
}
});
});
So i want to have an inline gallery. It works everything fine, but this part doesnt:
// Klick Function für die Gallery einbauen!
$(".popupgalleryarrowleft").click(function(){
$.magnificPopup.instance.prev();
});
$(".popupgalleryarrowright").click(function(){
$.magnificPopup.instance.next();
});
I am just trying to get the next instance, when there is one. When i am running this code via firebug on runtime, it works!
Can anyone help me with this? Hopefully.
Greetings David

was looking for the same thing.
I think here what you are looking for http://codepen.io/anon/pen/kInjm
$('.open-gallery-link').click(function() {
var items = [];
$( $(this).attr('href') ).find('.slide').each(function() {
items.push( {
src: $(this)
} );
});
$.magnificPopup.open({
items:items,
gallery: {
enabled: true
}
});
});

I needed to create a custom navigation for galleries, so I played with using $.magnificPopup.instance.next();. It does work when put into a click handler for a gallery.
Otherwise, there is no "next instance" to find because it doesn't exist yet.
This will navigate to the next gallery image when clicking on bottom/title bar (see it on codepen):
$('.gallery').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
});
$('.gallery').click(function() {
$('.mfp-bottom-bar').click(function() {
$.magnificPopup.instance.next();
});
return false;
});
And here's a more complete example on Codepen, with multiple galleries.
This one also adjusts for the height of the custom navigation and padding in the popup, using callbacks. Useful because the navigation button in my project had significant height and was being cut off by the bottom of the screen. (By default, only the image height itself is used to calculate how the popup fits in the viewport.)
Hope this is useful to someone. I know the question was two years ago, but maybe others will also find it by Googling, like I did.

touchswipe swipe along with click function on the same element

is it possible to utilize touchswipe on an element that already has a click function?
$('#myelem').click(function() {
// do stuff
});
I tried using:
$('#myelem').on ('click swipe', function() {
// do stuff
});
..but I don't know how to load touchswipe's options then. :/
Also, is it possible to have touchswipe on an image element?
I would be greatful for any help I can get.

I was having a similar problem but only on android devices. I managed to get it working with TouchSwipe-Jquery-Plugin https://github.com/mattbryson/TouchSwipe-Jquery-Plugin and the following code:
$('#myelem').swipe( {
click:function(event,target){
myFunction();
},
swipeLeft: function() {
myFunction();
},
swipeRight: function() {
// do something on right swipe
},
allowPageScroll: 'vertical'
});
function myFunction() {
// do something
};
more info

fancyBox v2: How do I prevent background scrolling in Chrome?

I'm using fancyBox v2.1.4. In Chrome it's allowing scrolling of the main page when the fancyBox is open.
I'm utilizing the locked: true but that doesn't seem to solve the issue. I have also considered using e.preventDefault to disable certain scrolling abilities as another option:
$(document).ready(function() {
$('.fancybox').fancybox({
'closeClick': false,
'scrolling': 'no',
helpers: {
overlay: {
closeClick: false,
locked: true
}
},
beforeShow: function() {
// considering some type of functionality here to prevent default
// of mousewheel
},
afterClose: function() {
// restore default action of mousewheel, although my initial attempts
// at this did not work
}
});
});

this code worked for me:
<script type="text/javascript">
$(document).ready(function() {
$(".lightbox").fancybox({
scrolling: "no",
openEffect: "elastic",
padding: 0,
closeEffect: "elastic",
afterShow: function(){
document.ontouchstart = function(e){
//prevent scrolling
e.preventDefault();
}
},
afterClose: function(){
document.ontouchstart = function(e){
//default scroll behaviour
}
},
helpers: {
overlay: {
locked: true
}
}
});
});
</script>

I've got a possible solution to your (and also my) problem. Before this, I was able to scroll the page behind the fancyBox on Android devices in the default browser. With this little 'hack' the user can't scroll the background page anymore, but it's a little bit glitchy though because of the speed the browser catches 'scroll' events.
UPDATE: On computer browsers this fix works like a charm. It's only the Android browser that glitches.
jQuery(document).ready(function($) {
var scrolltop, htmlOrBody;
var antiscrollevent = function(e) {
e.preventDefault();
$(htmlOrBody).scrollTop(scrolltop);
};
// links met een popover
$("a.popup").fancybox({
type: 'ajax',
beforeShow: function() {
// considering some type of functionality here to prevent default of
// mousewheel
htmlOrBody = $('body').scrollTop() != 0 ? 'body' : 'html';
scrolltop = $(htmlOrBody).scrollTop();
$(window).on('scroll', antiscrollevent);
},
afterClose: function() {
// restore default action of mousewheel, although my initial attempts
// at this did not work
$(window).off('scroll', antiscrollevent);
}
});
});

Worked for me perfectly:
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});

This code works fine for me in Chrome (Windows Version 29.0.1547.57 m)
$(document).ready(function () {
$('.fancybox').fancybox({
closeClick: false,
scrolling: 'no',
helpers: {
overlay: {
closeClick: false //,
// locked: true // default behavior
}
}
});
});
See JSFIDDLE (in Chrome)

Many of the things I tried ended up disabling all interaction on mobile, making the FancyBox impossible to close.
I ended up overriding jQuery's scroll event on afterShow. This preserved interaction with FancyBox content while disabling scrolling of the body. Tested on Android Browser and Mobile Safari:
afterShow: function(){
$(document).on('scroll','body',function(e){
e.preventDefault();
});
}
Reset this on afterClose by repeating the scroll function without e.preventDefault();

You can use the scrollOutside setting:
.fancybox({
scrolling: "no",
scrollOutside: "false"
});
the scrolling setting prevents the vertical scrollbar to show.

qtip2 modal dialog not hiding

I am using qtip2 for alert, confirm, dialogue functionality. Now I want to as (blockui plugin) block the view of the page until some process completes (e. ajax start etc). For that I am using following code
function blockPageDialog(content, title) {
/*
* mainbody is the id of the body section of html
*/
$('#mainbody').qtip(
{
content: {
text: '<img src="/Content/images/ajax-loader.gif"/>'
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false //dont hide on escape button
}
},
hide: true, // We'll hide it maunally
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
// $('button', api.elements.content).click(api.hide);
}
// Destroy the tooltip once it's hidden as we no longer need it!
, hide: function (event, api) { api.destroy(); }
}
});
}
and I am calling above function as
blockPageDialog(imageToShowProcessing );
which is blocking page as expected.
Now I want to hide/destroy the blocking dialog created on completion of process (e. ajax complete) or on button click which not part of the dialog (thats why I commented code for button in dialog).
I tried following things
$('#mainbody').qtip('hide');
$('#mainbody').qtip('api').hide();
both are not working.
I am using jquery 1.9.1, qtip2 update (2.1) which solves $.browser error
Please guide me to to solve the problem

try $('#mainbody').qtip('destroy');