We Keep Coding

Hide mobile menu with swipe gesture instead of click

I'm trying to hide a hamburger menu with swipe left gesture. By default, we need to touch-click next to it in order to close it. I have loaded a very lightweight library in order for this touch action to work (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library).
// Clicking out of drawer closes it
this.nodes.$page.on(
'click.drawer',
$.proxy(function() {
this.close();
return false;
}, this)
);
// Pressing escape closes drawer
this.nodes.$parent.on(
'keyup.drawer',
$.proxy(function(evt) {
if (evt.keyCode === 27) {
this.close();
}
}, this)
);
// This is my own code - swiping left closes it
$( '#NavDrawer' ).touchwipe({
wipeLeft: function() {
alert("yes, you swiped left on the menu");
// Now what ?
},
});
You can have a live view here : https://themes.shopify.com/themes/venture/styles/outdoors/preview?mobile=true
I first tried to use the actual structure to hide the menu, only with a swipe action, but it got all glitchy. Among other things, I don't understand where the 'keyup.drawer' and 'click.drawer' comes from. Ideally, I'd replicate this piece of code and use 'swipeleft.drawer' instead. Something like this :
// Swiping left method
this.nodes.$page.on(
'swipeleft.drawer',
$.proxy(function() {
this.close();
return false;
}, this)
);
Here's the full code of the global function if it might help :
window.Drawers = (function() {
var Drawer = function(id, position, options) {
var defaults = {
close: '.js-drawer-close',
open: '.js-drawer-open-' + position,
openClass: 'js-drawer-open',
dirOpenClass: 'js-drawer-open-' + position
};
this.nodes = {
$parent: $('body, html'),
$page: $('.page-element'),
$moved: $('.is-moved-by-drawer')
};
this.config = $.extend(defaults, options);
this.position = position;
this.$drawer = $('#' + id);
this.$open = $(this.config.open);
if (!this.$drawer.length) {
return false;
}
this.drawerIsOpen = false;
this.init();
};
Drawer.prototype.init = function() {
this.$open.attr('aria-expanded', 'false');
this.$open.on('click', $.proxy(this.open, this));
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
Drawer.prototype.open = function(evt) {
// Keep track if drawer was opened from a click, or called by another
function
var externalCall = false;
// don't open an opened drawer
if (this.drawerIsOpen) {
return;
}
this.$open.addClass(this.config.openClass);
// Prevent following href if link is clicked
if (evt) {
evt.preventDefault();
} else {
externalCall = true;
}
// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
evt.stopPropagation();
// save the source of the click, we'll focus to this on close
this.$activeSource = $(evt.currentTarget);
}
if (this.drawerIsOpen && !externalCall) {
return this.close();
}
// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.nodes.$moved.addClass('is-transitioning');
this.$drawer.prepareTransition();
this.nodes.$parent.addClass(
this.config.openClass + ' ' + this.config.dirOpenClass
);
this.drawerIsOpen = true;
// Set focus on drawer
slate.a11y.trapFocus({
$container: this.$drawer,
namespace: 'drawer_focus'
});
// Run function when draw opens if set
if (
this.config.onDrawerOpen &&
typeof this.config.onDrawerOpen === 'function'
) {
if (!externalCall) {
this.config.onDrawerOpen();
}
}
if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
this.$activeSource.attr('aria-expanded', 'true');
}
this.bindEvents();
};
Drawer.prototype.close = function() {
// don't close a closed drawer
if (!this.drawerIsOpen) {
return;
}
this.$open.removeClass(this.config.openClass);
// deselect any focused form elements
$(document.activeElement).trigger('blur');
// Ensure closing transition is applied to moved elements, like the nav
this.nodes.$moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });
this.nodes.$parent.removeClass(
this.config.dirOpenClass + ' ' + this.config.openClass
);
this.drawerIsOpen = false;
// Remove focus on drawer
slate.a11y.removeTrapFocus({
$container: this.$drawer,
namespace: 'drawer_focus'
});
if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
this.$activeSource.attr('aria-expanded', 'false');
}
this.unbindEvents();
};
Drawer.prototype.bindEvents = function() {
// Lock scrolling on mobile
this.nodes.$page.on('touchmove.drawer', function() {
return false;
});
// Clicking out of drawer closes it
this.nodes.$page.on(
'click.drawer',
$.proxy(function() {
this.close();
return false;
}, this)
);
// This is my own code - swiping left closes it
$( '#NavDrawer' ).touchwipe({
wipeLeft: function() {
alert("yes, you swiped left on the menu");
// Now what ?
},
});
// Pressing escape closes drawer
this.nodes.$parent.on(
'keyup.drawer',
$.proxy(function(evt) {
if (evt.keyCode === 27) {
this.close();
}
}, this)
);
};
Drawer.prototype.unbindEvents = function() {
this.nodes.$page.off('.drawer');
this.nodes.$parent.off('.drawer');
};
return Drawer;
})();
Any idea how I should tackle this problem ?

Accordion Functionality

I've put together an accordion script that works quite nicely (haven't cross-browser tested) and allows for lots of content inside each drawer to be accessed and visible on screen. A lot of times accordions open and cause issues with positioning after opening. Anyway, the code I'm using has a toggle active function and a scroll function being called on click.
function toggleActive(link){ // Set anchor to active
if ( $(link).hasClass("active") ) {
$(link).removeClass("active");
} else {
$(link).addClass("active");
};
};
function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed
time = typeof(time) != 'undefined' ? time : 1000;
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $(selector);
offset = element.offset();
offsetTop = offset.top + verticalOffset;
$('html, body').animate({scrollTop: offsetTop }, time);
}
$('#accordion a').click(function(e) {
var link = '#' + event.target.id
$(".tab-content").slideUp();
$(".tab").removeClass("active");
toggleActive(link);
$(link).next().slideToggle("fast");
setTimeout(function() {
scrollToElement($(link), 500);
}, 500);
e.preventDefault();
});
So when clicked, all of the tabs are closed and made inactive, then the targeted "drawer" is opened and made active. If for any reason you click an already "active" drawer, it runs through the script again. What I'd like to do is place an IF statement that determines if what you just clicked is already open, and then simply close that drawer. Thanks in advance. I don't know why this is causing me headaches.
JSFiddle

As I understand you need another function as below:
function isAlreadyActive(link)
{
if ( $(link).hasClass("active") ) {
$(link).removeClass("active");
return true;
} else {
return false;
};
}
And you should call that function in your click event. This function will check if the link already active, if so just deactivates it and changes as you want.
$('#accordion a').click(function(e) {
var link = '#' + event.target.id
/* if it is already active, just deactivate it and exit*/
if(isAlreadyActive(link)){
return false;
}
$(".tab-content").slideUp();
$(".tab").removeClass("active");
toggleActive(link);
$(link).next().slideToggle("fast");
setTimeout(function() {
scrollToElement($(link), 500);
}, 500);
e.preventDefault();
});
I hope this helps.

Show a div only once per visit / set cookie

I'm trying to set an element so it's being shown only once per visit. It's a scroll down arrow on my homepage and so once the user gets it it won't be necessary to keep it anymore. So I don't want it to be shown while the user is surfing on my website however, when he visits it again in the future it's there again. I'm a newbie and can't quite solve it.
My code:
setTimeout(function () {
$('.scroll_down').show()
}, 2000);
var $element = $('.scroll_down'); // fade out / in on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$element.fadeOut(1000);
}
});
I also would like the arrow to fade in but my attempts were not successful. Thanks guys

Please write cookie code as follow:
jQuery(document).ready(function($){
if($.cookie('show_div_once') != 'yes'){
your_code_for_show_div;
}
$.cookie('show_div_once', 'yes', { path: '/', expires: 365 });
});

I used localStorage
firstSiteLoad = (function() {
var checkSupport;
checkSupport = function() {
var e, error, support;
try {
support = 'localStorage' in window && (window['localStorage'] != null);
} catch (error) {
e = error;
support = false;
}
return support;
};
return function() {
if (!checkSupport()) {
return false;
}
if (localStorage.getItem("not_first_load")) {
return false;
} else {
localStorage.setItem("not_first_load", 'true');
return true;
}
};
})();
you can use it by if (firstSiteLoad()) { //your code }

Load on bottom of div is not working properly

So this question is not necessarily how to get it to work, because it does. But it is very very buggy. The problem I'm having is that when you scroll down, it sometimes takes a while to load so that the function reactivates or something. Either way the variable is reset and it loads like 5 pages in a row. So it's buggy. I have the code here:
var ldid = 10;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight) {
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
}));
}
})
}
);

You can use a flag.
If it is loading you can set it to true.
If loading finished you set it back to false
and you make ajax request only if it is false.
var ldid = 10,
isPageLoading = false;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight && !isPageLoading) {
isPageLoading = true;
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
isPageLoading = false;
}));
}
})
}
);

If you want to set your Div tag at the end of the "allpostcontainer" div then put below script in your page.
(#bottom is Div tag id which you need to display at the bottom. #allpostcontainer is div tag id which is main Div with scroll)
<script>
$(document).ready(function () {
$('#bottom').css('position', 'absolute');
$('#bottom').css('top', $('#allpostcontainer').height() - $('#bottom').height());
});
</script>
Please let me know if you have any query.
Thank you...

is there any easy way to get fancybox 2 to animate left to right instead of up and down?

I have a project i'm working on and using fancybox 2 (which is pretty great).
That said, one annoyance is that the arrows in a gallery point left and right, but the animation moves up and down. i'd really love to animate the new content in from the left, rather than the top.
Before i pull apart the default rollout of fancybox and start overwriting oncompletes and the such, is there something i'm missing?

The latest source code - https://github.com/fancyapps/fancyBox/zipball/master
Includes different animation directions depending on the way you navigate (using scroll mouse or keyboard navigation keys).
You can get horizontal transitions using the left and right key arrows.
No need to hack or customize your own fancybox version.

So, here's how i did it, if anyone else runs into this question later.
example: The Fremont
in the plugins.js file, i've made my own version of the fancybox script. changeIn and changeOut are updated as so:
if(!isForward){
// move left (backwards)
startPos.left = (parseInt(startPos.left, 10) + 1500) + 'px';
wrap.css(startPos).show().animate({
opacity: 1,
left: '-=1500px'
}, {
duration: current.nextSpeed,
complete: F._afterZoomIn
});
} else {
// move right (forwards)
startPos.left = (parseInt(startPos.left, 10) - 1500) + 'px';
wrap.css(startPos).show().animate({
opacity: 1,
left: '+=1500px'
}, {
duration: current.nextSpeed,
complete: F._afterZoomIn
});
}
and changeOut looks like this now:
changeOut: function () {
var wrap = F.wrap,
current = F.current,
cleanUp = function () {
$(this).trigger('onReset').remove();
};
wrap.removeClass('fancybox-opened');
var leftAmt;
if(isForward){
leftAmt = '+=1500px';
} else {
leftAmt = '-=1500px';
}
if (current.prevEffect === 'elastic') {
wrap.animate({
'opacity': 0,
left: leftAmt
}, {
duration: current.prevSpeed,
complete: cleanUp
});
}
isForward is defined in the next/prev function
next: function () {
if (F.current) {
F.jumpto(F.current.index + 1);
isForward = true;
}
},
prev: function () {
if (F.current) {
F.jumpto(F.current.index - 1);
isForward = false;
}
},
and that's that. enjoy!

Good idea. Just, there is a bug in you code. you must put
isForward = false; or isForward = true;
before
F.jumpto(F.current.index - 1); or F.jumpto(F.current.index + 1);
in both next and prev function. Since it break your code when you press next and then you press prev. you can try it.
next: function () {
if (F.current) {
isForward = true;
F.jumpto(F.current.index + 1);
}
},
prev: function () {
if (F.current) {
isForward = false;
F.jumpto(F.current.index - 1);
}
},

Check the API, maybe there's an option for it?
If not, find the part of the code that does the animation and replace it with your own.