We Keep Coding

mobile hamburger for mobile not closing

I have 2 issues with this code:
When the submenu on mobile is dropped down the "X" is not closing it back
I sorted the problem with the anchor links (#) that are in the sub level. They close the drop down menu but don't change the "X" back to the "hamburger"
Thank you in advance for your help. The temporary file is this one: http://www.un-poco.com/navtemp
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
} else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
} else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle')
multiTg();
else
cssmenu.addClass('dropdown');
if (settings.sticky === true)
cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($) {
$(document).ready(function() {
if ($(window).width() <= 768) {
$('#cssmenu ul ul li').on('click', function() {
$("#cssmenu ul").hide();
});
}
$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});
});
})(jQuery);

The problem is with your css styling. you dropdown menu has a padding top. you can find the padding here #cssmenu > ul. The reason why the menu was not closing because the click was not fired on your x icon instead it was on your dropdown div. change the padding to margin which will move the entire div below that should work.

Because in mobile view ul dropdown list is over to hamburger menu that's why your click event not trigger.
Try to use margin instead of padding in your ul styling. See below code -
CSS-
#cssmenu > ul {
margin-top: 43px;
float: right;
}
For getting back hamburger icon on dropdown item click you need to just change your #menu-button class like below code -
JS Code -
(function($) {
$(document).ready(function() {
if ($(window).width() <= 768) {
$('#cssmenu ul ul li').on('click', function() {
// add this line only in your code might be solve your issue
$('#cssmenu').find('#menu-button').addClass('menu-opened').removeClass('menu-closed');
$("#cssmenu ul").hide();
});
}
$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});
});
})(jQuery);

jQuery .find() selects correct element but does not display it

I wasn't sure exactly how to phrase this question, so here's the details:
This little thing I've written up here: https://jsfiddle.net/f8thL83r/1/
works great, as long as you only want to show elements in the top menu.
Click on anything under "Graphic Design", and it won't display anything in the pane to the right. Why is it working for the first category and not the second?
Here's some code. I know the way I've done this is probably awful, but I'm just beginning to find my feet with jQuery.
$('#Menu h3').click(function () {
$("#Menu ul ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index()); //index of the li to show
var i = $(this).parent().parent().parent().index(); //index of the ul to show
$currPage = $('#ServMain .list' + i).find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});

It seems other HTML elements of the selected page are not visible.
Below code should fix them
$('#Menu ul ul li a').click(function (e) {
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain ul').not('.list'+i).hide();
$lastPage = $('#ServMain .list' + i).find('.page' + j);
$lastPage.parent().show();
$lastPage.show();
$lastPage.find('div').show();
});
DEMO

The problem is the ul.list is hidden
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain > ul').not('.list'+i).hide();
$currPage = $('#ServMain .list' + i).show().find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});
Demo: Fiddle

Add and remove class to jquery onscroll

I need to add a 'fixed' class for the header on scroll and remove it when it's scrolled back up in the following script, but not sure how best to do it:
<script>
$(document).ready(function () {
var div = $('.header');
var div2 = $('.headerPlaceholder');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
$(div2).css('display', ((p) > start) ? 'block' : 'none');
});
});
</script>
This stop it triggering the event after each scroll down which is what happens now with the CSS specified in the script, hence I need to add a class.
CSS:
.fixed {
position: fixed;
}
Ideas appreciated.

I have translated your js to use css with the application of 1 class to the body
$(document).ready(function () {
var start = $('.header').offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
if( p > start ) {
$('body').addClass('fixed');
} else {
$('body').removeClass('fixed');
}
});
});
CSS
body.fixed .header {
position: fixed;
top: 0;
}
body.fixed .headerPlaceholder {
display: block;
}

The add/remove class method works great.
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.header').addClass("fixed");
} else {
$('.header').removeClass("fixed");
}
});
});
Here's a fiddle showing how it works: http://jsfiddle.net/gisheri/RpPEe/413/

Getting rid of the double click effect

Here's my fiddle. As you can see I've defined a simple click event handler:
$('#traveller > a').click(function(e) {
e.preventDefault();
var $ul = $('#traveller ul');
if($(this).hasClass('handle-next')) {
if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
$ul.animate({top: '-=' + itemHeight});
}
}
else {
if($ul.position().top - parentPadding < 0) {
$ul.animate({top: '+=' + itemHeight});
}
}
});
I've noticed that when I make few double clicks quickly, pressing a.handle-next/a.handle-prev, ul position changes unexpectedly.
Howcome I avoid this behavior?

Just check if $ul is animated:
if($ul.is(':animated')) return;
DEMO

Check if an animation is occuring prior to executing the body of the event handler.
if(!$ul.is(":animated")){
if($(this).hasClass('handle-next')) {
if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
$ul.animate({top: '-=' + itemHeight});
}
}
else {
if($ul.position().top - parentPadding < 0) {
$ul.animate({top: '+=' + itemHeight});
}
}
}
Working Example http://jsfiddle.net/A5u43/19/

You need to lock any action with your traveller, untill animation is finished. Here i used lock variable, but you can use any approach to lock it. For this purpose use callback on animate:
$ul.animate({top: '-=' + itemHeight}, 400, 'swing', function(){
lock = false;
});
Here is the jsfiddle like

You could just prevent it with a $ul.stop(); just before you define who $ul is
here's the fiddle
var $ul = $('#traveller ul');
$ul.stop(true,true);
http://jsfiddle.net/A5u43/23/

jQuery - Auto Scroll gallery

I'm in a bit of trouble and need help. I basically have a carousel (scrolling) type gallery with three images. You only see one image at a time, and to see the next image, you have to click the link that relates to that image or click on the current image itself to see the next image. This would make it scroll one image along and the li containing the image gets a class of 'active'.
I've been asked to add Auto Scroll functionality and I'm a bit stuck?
They basically want it to auto scroll 1 image every 2/3 seconds if the user is not using the links to scroll the gallery.
Any help would be MASSIVELY appreciated :)
I am not allowed to use a plug-in or anything either, I have to alter the current code :S
To be honest I know this is probably a hopeless case, but if there is somebody out there that could solve this it would be really appreciated.
The scrolling/gallery functionality is towards the bottom.
$(document).ready(function() {
Cufon.replace('.section-1 h2, .section-2 h3, .follow h3, .follow h4, .overlay h3, .overlay h4');
$.friends.people.init();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest($.friends.people.overlay.request);
});
$.friends.people = {
init: function() {
this.slide_anchors();
this.gallery.init();
$.friends.tooltips.init();
this.overlay.init();
this.label_value.init();
},
slide_anchors: function() {
$('a.down, a.up').click(function(event) {
event.preventDefault();
var speed = 400;
var target = $(this).attr('href');
var dest = $(target).offset().top;
$('html:not(:animated), body:not(:animated)').animate(
{ scrollTop: dest },
speed,
function() {
window.location.hash = target;
}
);
return false;
});
},
overlay: {
email_btn: null,
sms_btn: null,
init: function() {
this.close();
$('a.sms').click(function() {
__doPostBack($.friends.people.overlay.sms_btn, '');
$('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
return false;
});
$('a.email').click(function() {
__doPostBack($.friends.people.overlay.email_btn, '');
$('.overlay-wrap').fadeIn(250, function(){$.friends.people.label_value.init()});
return false;
});
$('.section-2 a.sms, .section-2 a.email').click(function() {
$('a.up').click();
return false;
});
},
close: function() {
$('a.overlay-close').click(function() {
$('.overlay-wrap').fadeOut(250);
return false;
});
},
request: function() {
$.friends.people.label_value.init();
$.friends.people.overlay.close();
Cufon.replace('.overlay h3, .overlay h4');
$.friends.external_links();
}
},
label_value: {
init: function() {
$('.labelValue').each(function() {
var text = $(this).text().replace(/^\s+|\s+$/g, '');
var $textbox = $('#'+$(this).attr('for'));
if($textbox.val() == "") $textbox.val(text);
$textbox.focus(function() {
if($(this).val() == text) $(this).val("");
});
$textbox.blur(function() {
if($textbox.val() == "") $textbox.val(text);
});
});
}
},
gallery: {
i: null,
width: null,
moving: false,
speed: 500,
init: function() {
this.i = $('.section-2 .col-2 .images img').length;
if (this.i > 1) {
this.resize_div();
this.add_nav();
}
},
resize_div: function() {
this.width = $('.section-2 .col-2 .images img:first').width();
$('.section-2 .col-2 .images').width((this.i * this.width) + 'px');
},
add_nav: function() { /* rewrite this with .each() */
var html = '<ul class="image-nav">';
for (x = 0; x < this.i; x++) {
html = html + '<li></li>';
}
html = html + '</ul>';
$('.section-2 .col-2').append(html).find('li:first').addClass('active');
$('.section-2 .col-2 ul.image-nav li a').click(function() {
if (!$.friends.people.gallery.moving) {
$.friends.people.gallery.moving = true;
$.friends.people.gallery.scroll($('.section-2 .col-2 ul.image-nav li a').index(this));
}
return false;
});
$('.section-2 .col-2 .images img').click(function() {
if (!$.friends.people.gallery.moving) {
$.friends.people.gallery.moving = true;
var current = $('.section-2 .col-2 .images img').index(this);
if (current >= ($('.section-2 .col-2 .images img').length - 1)) {
var target = 0; console.log('asd');
} else {
var target = current + 1;
}
$.friends.people.gallery.scroll(target);
}
return false;
});
},
scroll: function(img) {
$('.section-2 .col-2 ul.image-nav li').removeClass('active');
$('.section-2 .col-2 ul.image-nav li:eq(' + img + ')').addClass('active');
$('.section-2 .col-2 .images').animate(
{ marginLeft: -($.friends.people.gallery.width * img) },
$.friends.people.gallery.speed,
function() {
$.friends.people.gallery.moving = false;
}
);
}
}
}

You could try using a setInterval:
window.setInterval(function() {
// calling your scrolling-to-next-image function
}, 2000);
This would call an anonymus function including your "scroll-to-next-image" function every 2 seconds.
Probably you need a clearInterval when the user starts using the "next" / "previous" buttons again.
More information on this topic can be found here: https://developer.mozilla.org/en/DOM/window.setInterval