We Keep Coding

Zurb Foundation .sticky stick-to-bottom flashes at top of page on pageload

I have a cookie warning banner on my site that I want to show for users who have not seen it already (check for cookieInformation cookie and if no, show the banner). The issue is that this used to work with a window.onload function, however recently the window.onload never fires. If I use a document.ready, the banner flashes at the top of the screen before sticking to the bottom where it's supposed to be.
I would set a timeout for the function, however, if this is a foundation loading issue, the flash will still occur on slow loading.
Is there a foundation callback function like foundation.ready that I can use to invoke this function?
.container#cookieTin(data-sticky-container)
.cookiebanner.is-hidden.sticky(in-view="$inview == false ? cookieAccept() : '' ", data-sticky='', data-stick-to="bottom", data-options="stickyOn: small;", data-margin-bottom="0", data-closable )
.small-12.medium-6.columns
strong !{ __("cookie.line_1")}
br
span !{ __("cookie.line_2")}
.small-12.medium-6.columns
a.cookieButton.button !{ __("cookie.line_3")}
button.close-button.cookieButton(aria-label='Close alert', type='button', data-close)
span(aria-hidden='true') ×
The JS:
function showCookieBanner() {
$('.cookiebanner').removeClass("is-hidden");
}
$(document).ready(function () {
$(".cookieButton").click(function () {
closePopup();
});
var closePopup = function () {
$('.cookiebanner').css("display", "none");
createCookie('cookieInformation', 'seen', '15');
return false;
}
if (getCookie('cookieInformation') == null) {
showCookieBanner();
}
});
I've tried adding a .no-js class to no avail as well as eventListeners.

Have to double-click on tabs to get tab content

I have tabs on a page that are giving me trouble. I think it is in the js code. Sometimes you have to doubleclick on the tabs, sometimes you don't.
This is using HAML in Rails, which I am not as familiar with. I also didn't write the original code. I am taking over on a project.
Here are the codes:
HAML
#myTabs
%ul.tab-buttons.tab-buttons--boxed.tab-buttons--left.js-tabs.nav-tabs
%li.active.tab-button
%a#tab1.tab-button-link.active{"data-toggle" => "tab", "data-projects" => "not_archived"} Current Projects
%li.tab-button
%a#tab2.tab-button-link{"data-toggle" => "tab", "data-projects" => "archived"} Archived Projects
.tab-content
#tab1C.container
%ul.list-project
= render #projects
#tab2C.container
%ul.list-project
JS
$('.js-tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('.js-tabs li a').click(function(){
var that = this;
var t = $(that).attr('id');
$.get("/projects", {projects: $(that).data("projects")}, function(){},'json')
.done(function(data){
var projects = data.projects;
if($(that).hasClass('inactive')){
$(that).removeClass('inactive');
$(that).addClass('active');
$('#'+t+'C .list-project').html(projects);
$('.container').hide();
$('#'+ t + 'C').fadeIn('slow');
} else {
$(that).removeClass('active');
$(that).addClass('inactive');
$('#'+t+'C .list-project').html(projects);
$('.container').hide();
$('#'+ t + 'C').fadein('slow');
};
$('.open-popup-link').magnificPopup(magnificPopupOptionsPermissionEmail);
})
});
I tried to show the codes in codepen but it isn't showing accurately.
Codepen

Are you finding that you have to double click if you just entered the page, but single click if you refresh the page?
If so, then turboloading may be the problem. A common fix is as follows:
var ready;
ready = function() {
// add your functions and calls here
}
$(document).ready(ready);
$(document).on('page:load', ready);

Jquery Menu that on click toggles class to expand one list level at a time

issue#1 So I have a menu that asks for the Make, model and year of a car. I have got the basic functionality working but my code isn't clean. How can I make this DRYer?
jQuery(document).ready(function( $ ) {
$('li.menu-item-type-custom').on('click', function () {
$(this).closest('ul.sub-menu').toggleClass('expand-menu');
});
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
});
});
issue#2
I also want only one child of each make or model to be shown at a time. Right now if I click on make 1 and make 2 then the text overlaps and it looks bad. I tried
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
if( $(this).hasClass("expand-menu") ) {
$(this).siblings().removeClass("expand-menu")
} else{}
});
but my approach is wrong and it isn't working
DEMO:
http://jsfiddle.net/BbF9K/
Thanks for the help

I'm too tired to sort out all your classes, so I just used hide() and show(). Feel free to translate it back into CSS-driven statements.
http://jsfiddle.net/isherwood/BbF9K/2/
jQuery(document).ready(function ($) {
$('li.menu-item-type-custom').on('click', function () {
$(this).siblings().find('ul.sub-menu').hide();
$(this).children('ul.sub-menu').show();
});
});
Here's a version with slide effects:
http://jsfiddle.net/isherwood/BbF9K/3/
You could also tighten up your jQuery like so:
http://jsfiddle.net/isherwood/BbF9K/4/
jQuery(function($) {
$('li.menu-item-type-custom').click(function () {
$(this).siblings().find('ul.sub-menu').slideUp();
$(this).children('ul.sub-menu').slideDown();
});
});

jQuery function for app style slide in menus

My name is Adam, I'm new to Stack Exchange, but have found this site very useful for many past problems I have had.
I'm having a problem with a jquery function and thought I'd seek advice here. I have a pretty decent knowledge of html & css, a little of php, but virtually none of javascript or jquery.
I'm currently working on a site that uses specific html tags to enable dynamic content as php isn't permitted. Javascript is however so I've been looking it. I don't have a live example to show you here as I can only preview the design from within my account, however I have pasted the script below.
I wanted to create a responsive design, fluid down to mobile. Following recent design trends, I wanted to create 'Slide in/out' style menus from the side of the screen (think Facebook Mobile, Dolphin Browser). After viewing some examples, I wrote a function which altered the CSS, moving the main div#site template to the right, revealing the left menu. Everything was ok and it worked fine.
Today I decided it would be nice to have 2 slide out menus, one on the left, the other, on the right.
I added to the function what I thought was going to work, and it sort of does.
I have a button (with class .open-sidebar-right) to slide the main site (div#site) to the left, revealing the right hand menu. I can then click either the same button or the div#site to close the menu.
The problem occurs when I click on the left button. The left menu opens and closes absolutely perfectly, however it renders the right button totally useless and doesn't function at all.
I've tried writing it as two separate functions, using one variable for both menus with different values, and it always renders the right button useless after using the left button.
As I mentioned earlier, I have virtually no knowledge of Javascript or jQuery, so it's probably poorly coded, but I can't understand why this wouldn't work.
If anyone has any advice or suggestions I would really appreciate it.
Thanks in advance, Adam.
jQuery(function () {
var sidebarleft;
var sidebarright;
// ------------
// Left sidebar
jQuery(".open-sidebar-left").click(function () {
if (!sidebarleft) {
jQuery("#site").css({
'left':'50%',
});
sidebarleft = true;
return false;
} else {
jQuery("#site").css({
'left':'0%',
});
sidebarleft = false;
return false;
}
});
// ------------
// Right sidebar
jQuery(".open-sidebar-right").click(function () {
if (!sidebarright) {
jQuery("#site").css({
'right':'50%',
});
sidebarright = true;
return false;
} else {
jQuery("#site").css({
'right':'0%',
});
sidebarright = false;
return false;
}
});
// ----------------------------------
// Close sidebars by clicking on site
jQuery("#site").click(function () {
if (sidebarleft) {
jQuery("#site").css({
'left':'0%',
});
sidebarleft = false;
return false;
} else if (sidebarright) {
jQuery("#site").css({
'right':'0%',
});
sidebarright = false;
return false;
}
});
});

Adam,
#zgood says your code is good, but I thought I'd point out a few errors and make some suggestions which may solve your problem:
$(document).ready(function(){ // in the jQuery doc, they don't suggest you use $(<func>)
var sidebarleft = false, // sidebarleft and sidebarright has to be equal to something
sidebarright = false; // either true or false (I would use false since you're testing false in your conditional
$(".open-sidebar-left").click(function() {
if( !sidebarleft ) {
$("#site").css({
left: '50%' // remove the comma, and do not put quotes around single-word identifiers
});
sidebarleft = true;
return false;
} else {
$("#site").css({
left: '0'
});
sidebarleft = false;
return false;
}
});
$(".open-sidebar-right").click(function() {
if( !sidebarright ) {
$("#site").css({
right: '50%' // remove the comma, and do not put quotes around single-word identifiers
});
sidebarright = true;
return false;
} else {
$("#site").css({
right: '0'
});
sidebarright = false;
return false;
}
});
});
So as you can see in the comments in the code above,
jQuery says it's valid, but not suggested that you use jQuery(function(){}); so query the document element then test for ready, then call a function
sidebarright and sidebarleft were undefined (neither true or false) so your
if statements don't make sense.
In the css() declaration, you shouldn't put a comma on the last element. Only put commas if there are more than one element.
I would also suggest using animate() instead of css(), and also (if you're using Chrome) use the inspector and (if you're using Firefox) use FireBug to test for any errors in your javascript code. Hope this helps.

Your code is right, the problem seems to be a CSS issue.
When you click your left button your click event is adding an inline style to your #site div like so:
<div id="site" style="left:50%;">
Then when you click your right button your code appends the new style to your #site div like so:
<div id="site" style="left: 0%; right: 50%;">
See the problem?
To fix this you must do two things. Since you didn't post your CSS, I don't know how you have your #site styled, but remove any left or right style from your #site style declaration.
Next update your jQuery code to remove any previous inline styles like so:
// ------------
// Left sidebar
jQuery(".open-sidebar-left").click(function () {
jQuery("#site").removeAttr('style');
if (!sidebarleft) {
jQuery("#site").css({
'left':'50%',
});
sidebarleft = true;
return false;
} else {
jQuery("#site").css({
'left':'0%',
});
sidebarleft = false;
return false;
}
});
AND
jQuery(".open-sidebar-right").click(function () {
jQuery("#site").removeAttr('style');
if (!sidebarright) {
jQuery("#site").css({
'right':'50%',
});
sidebarright = true;
return false;
} else {
jQuery("#site").css({
'right':'0%',
});
sidebarright = false;
return false;
}
});
removeAttr is your friend here. Also you may want to use an animate instead of just changing the css values, but thats your call
jQuery .animate()

Close menu with click off menu itself

I'm not the best when it comes to JavaScript, and stuck with finding a solution. I have seen similar questions asked here, but when I try to implement it in my case it either breaks the menu or just makes no difference.
I'm trying to get a menu (which opens on a click), to close not only with a repeated click on parent menu tab, but with a click outside the menu, i.e., anywhere.
My code is:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
This snippet is in the middle of a lot more JavaScript and this is the default working version. The click from user changes the class name of the menu container which determines if it's displayed or not. From another post on here, I tried implementing the following to no avail to try and allow the click off to alter the class name as well:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
ev.stopPropagation();
$(document).one('click', function() {
element.className='updates_pulldown';
});
}
Any advice on tackling this? I'd like to learn more JavaScript as I seem to be working with it more and more.

I hope you are still looking for a solution. Here's a working demo of this http://jsfiddle.net/sU9ZJ/6/
(function(win, doc) {
var lis = $('#menu>ul>li>a').on('click', function(e) {
e.preventDefault();
var a = $(this);
var li = $(this).parent();
function close(dev) {
if (!(dev && li.has(dev.target)[0])) {
li.addClass('inactive').removeClass('active');
doc.off('click', close);
a.trigger('close');
}
}
function open(dev) {
li.addClass('active');
doc.on('click', close);
a.trigger('open');
}
if (li.hasClass('active')) { close() }
else { open(); }
})
})(this, $(document))
I have also added a couple of events that you can use when it opens or closes
$('#menu>ul>li>a').on('open', function(e) {
console.log('menu open', this)
}).on('close', function(e) {
console.log('menu closed', this)
})
Sorry, this depends on jQuery. too lazy to write a native version :). Also this is not tested in IE, but shouldn't be too hard to make it work on those if it doesn't.