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.

Having trouble implementing cookie save state to JQuery toggle

I've been coming up with a JQuery toggle with the help of Nicolas R that saves the state of the toggle using a cookie but am currently having trouble implementing it as it pulls in the same title for for all the buttons once activated.
Please find below:
HTML:
<div>
Slide Toggle +
<div id="slide1panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
<div>
Slide Toggle +
<div id="slide2panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>
</div>
JQuery
$(document).ready(function() {
// check the cookies when the page loads
// 1st panel
if ($.cookie('currentToggleslide1panel') === 'visible') {
togglePanel($('#slide1panel'), $('#slide1'), true, 0);
}
// 2nd panel
if ($.cookie('currentToggleslide2panel') === 'visible') {
togglePanel($('#slide2panel'), $('#slide2'), true, 0);
}
//handle the clicking of the show/hide toggle button of the 1st panel
$('#slide1').click(function() {
//toggle the panel as required, base on current state
if ($('#slide1').text() === "Slide Toggle +") {
togglePanel($('#slide1panel'), $('#slide1'), true, 'slow');
}
else {
togglePanel($('#slide1panel'), $('#slide1'), false, 'slow');
}
});
//handle the clicking of the show/hide toggle button of the 2nd panel
$('#slide2').click(function() {
//toggle the panel as required, base on current state
if ($('#slide2').text() === "Slide Toggle +") {
togglePanel($('#slide2panel'), $('#slide2'), true, 'slow');
}
else {
togglePanel($('#slide2panel'), $('#slide2'), false, 'slow');
}
});
});
function togglePanel(panel, button, show, toggleSpeed) {
if(toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
panel.slideToggle(toggleSpeed);
} else {
panel.toggle();
}
if (show) {
// Set a cookie containing the panel name
$.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
button.text('Slide Toggle -');
} else {
// Set a cookie containing the panel name
$.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
button.text('Slide Toggle +');
}
}
JS Fiddle
Thanks!

Cozmoz,
I updated the referenced cookie script in your JS Fiddle (see external resources): it seems to work now. When I first tried the cookie was causing a bug.
The text is changing independtly, can you check if you have a bug in the fiddle?
EDIT: new response: the text are different between the panels, in this sample I use the current text and replace the last character by a plus/minus symbol
http://jsfiddle.net/xVa7e/6/
$(document).ready(function() {
// check the cookies when the page loads
// 1st panel
if ($.cookie('currentToggleslide1panel') === 'visible') {
togglePanel($('#slide1panel'), $('#slide1'), 0);
}
// 2nd panel
if ($.cookie('currentToggleslide2panel') === 'visible') {
togglePanel($('#slide2panel'), $('#slide2'), 0);
}
//handle the clicking of the show/hide toggle button of the 1st panel
$('#slide1').click(function() {
//toggle the panel as required
togglePanel($('#slide1panel'), $('#slide1'), 'slow');
});
//handle the clicking of the show/hide toggle button of the 2nd panel
$('#slide2').click(function() {
//toggle the panel as required
togglePanel($('#slide2panel'), $('#slide2'), 'slow');
});
});
function togglePanel(panel, button, toggleSpeed) {
var panelPreviousStateVisible = panel.is(':visible');
// Toggle the div
if (toggleSpeed > 0 || toggleSpeed === 'slow' || toggleSpeed === 'fast') {
panel.slideToggle(toggleSpeed);
} else {
panel.toggle();
}
// Once toggled, set the cookie and the text
if (!panelPreviousStateVisible) {
$.cookie('currentToggle' + panel.attr('id'), 'visible', { path: '/' });
// Set the text by removing the last char and add a minus symbol
button.text(button.text().slice(0,-1) + "-");
} else {
$.cookie('currentToggle' + panel.attr('id'), 'hidden', { path: '/' });
// Set the text by removing the last char and add a plus symbol
button.text(button.text().slice(0,-1) + "+");
}
}

How to implement addthis share with infinte scroll and masonry

i had implemented infinite scroll with masonry i got stucked in addthis share button not working when i scroll to next loading images the addthis button getting displayed but it is not sharing appropriate images.
if i remove following three lines from masonry function
addthis.toolbox('.addthis_toolbox');<br/>
addthis.counter('.addthis_counter');<br/>
addthis.init();
i am only able see addthis share button on first list of images after i scroll to next list of images the addthis share gets hidden
Javascript Code
<script type="text/javascript">var addthis_config = { "data_track_addressbar": false ;</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e142f1d185c5361"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.box',
columnWidth: 95
});
});
$container.infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more photos to load.',
img: 'http://i.imgur.com/6RMhx.gif',
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');
addthis.init();
});
$('.listing_img_wrapper').hover(
function () { $(this).find('.hover_img').fadeIn("slow"); },
function () { $(this).find('.hover_img').fadeOut("slow"); }
);
// console.log("called");
// window.addthis.toolbox('.addthis_toolbox');
}
);
});
</script>

i had solved the solution by adding
addthis.counter('.addthis_counter');
and
if (window.addthis) {
window.addthis.ost = 0;
window.addthis.ready();
}

Infinite scroll jumps to top of page

I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});

Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?

Javascript or jQuery slide to element

When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.

$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}

You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.

Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});