Foundation and smoothstate doesn't open reveal modal - javascript

I'm using FoundationPress and smoothstate on my WordPress page. Now on mobile, I created a menu using hamburgers and reveal modal and works fine but after clicking on something, the menu won't open anymore. I think this is because of the smoothstate.js not reloading the script.
As an option of the smoothstate, I have this script:
onAfter: function($container, $newContent) {
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$('#abnavmodal').foundation('toggle');
event.preventDefault();
});
Here's my website. Note that the menu only appears on mobile.

I fixed the script by changing to the new Foundation 6 programmatic use plugin declaration
Here's my final script:
onAfter: function($container, $newContent) {
var $modal = new Foundation.Reveal($('#abnavmodal'), {
animationIn: 'slide-in-left',
animationOut: 'slide-out-left'
});
// Hamburgers
$( "#ham" ).click(function() {
$(".hamburger").toggleClass("is-active"); //you can list several class names
$modal.toggle();
event.preventDefault();
});
});

Related

Mobile navigation bar won't pull out?

I'm trying to create a mobile navigation menu, but for some odd reason, the code won't work. I feel like it's something with the css, but I'm not sure. I created a JS Fiddle to play with it. I want the menu to open when you click the little button. The JavaScript must not be reading the request...
Java Script
jQuery(document).ready(function () {
jQuery("#hamburger").click(function () {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
var contentWidth = jQuery('#content').width();
jQuery('#content').css('width', contentWidth);
jQuery('#contentLayer').css('display', 'block');
jQuery('#container').bind('touchmove', function (e) {
e.preventDefault();
});
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
jQuery("#contentLayer").click(function () {
jQuery('#container').unbind('touchmove');
jQuery("#container").animate({"marginLeft": ["-1", 'easeOutExpo']}, {
duration: 700,
complete: function () {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
});
It looks like you don't have jquery loaded in your jfiddle. When I loaded jQuery it worked for me.
Click on Javascript and then "FRAMEWORKS & EXTENSIONS" and add jQuery 1.12 at least.

Super simple jQuery tabs - without UI - collapse on page load

I'd like all tabs to be collapsed on page load. Right now the first one is open by default:
$(document).ready(function($) {
$('#forms').find('.forms-toggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
HTML and CSS are here:
https://jsfiddle.net/re8x8cx3/
Place this inside dom ready,
$(".forms-content").hide();
Then the code will be,
$(document).ready(function($) {
$(".forms-content").hide();
$('#forms').find('.forms-toggle').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".forms-content").not($(this).next()).slideUp('fast');
});
});
Fiddle
Please also improve you JS:
(function($){
//store reusable global vars
var $forms = $('#forms'),
$formContents = $forms.find(".forms-content");
//hide on load
$formContents.hide();
//attach only on handler to #forms instead of to every tab separately
$forms.on('click', '.forms-toggle', function(event){
event.preventDefault();
//reuse this value (only on reference)
var $thisContent = $(this).next(),
//Expand or collapse this panel
$thisContent.slideToggle('fast');
//Hide the other panels
$formContents.not($thisContent).slideUp('fast');
});
});

Multiple buttons with the same #id to do the same function?

JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?
id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle
use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO

Open/close panel for mobile

I was just wondering if there is a better way to do this:
// Show/hide filters on mobile //
$('#openMobileFilters').click(function(){
$('.navbar-inverse').addClass("hidden-xs");
$('#results-container').addClass("hidden-xs");
$('#filter-column').removeClass("hidden-xs");
});
$('.closeFilters').click(function(){
$('#results-container').removeClass("hidden-xs");
$('.navbar-inverse').removeClass("hidden-xs");
$('#filter-column').addClass("hidden-xs");
});
All it does is hide a load of stuff onclick and show a filters div. Then closes it when the user clicks the .closeFilters link.
How about using toggleClass method
// Show/hide filters on mobile //
$('#openMobileFilters').click(function(){
showOrHideFilter(true);
});
$('.closeFilters').click(function(){
showOrHideFilter(false);
});
function showOrHideFilter(show) {
$( "#results-container, .navbar-inverse" ).toggleClass( "hidden-xs", show );
$('#filter-column').toggleClass("hidden-xs", !show);
}

Accordion Opens But Won't Close

I am using Foundation Accordion and I added a script to have smooth opening and closing. It works but the problem is if you have only one panel you can open it but not close it.
Here is the code used:
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
$(this).addClass('active').find(".content").slideToggle("slow");
});
I tried this code but it didn't work:
$("dd.active").on("click", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
});
How do I get this to close smoothly?
Here is a jsFiddle
Note: Open the Panel then Try to Close It.
Remove href from <dd><a>.
JS:
$(function () {
$(".accordion").on("click", "dd", function (event) {
if (!($(this).hasClass("active"))) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
$(this).toggleClass('active').find(".content").slideToggle("fast");
})
});
Updated fiddle here.

Categories

Resources