We Keep Coding

Resize function events fire 2 times more each time the window was resized

On my site, I am trying to fix the navigation so that when the browser is getting resized from desktop to mobile size, the mobile menu works. I have the mobile menu working on initial load, and the desktop navigation working on initial load, but when I run the script in a $(window).on('resize', function() {} and click an item as depicted in my script, the event fires always +1 each time the window was rested after a resize.
What I mean is, if I load the page, scale it into mobile size, click the menu and a dropdown item, the click event will fire once. Resize the window out and then back in, the click event will fire now 2 times, then 3, and so on, depending on how many times the browser was resized.
I'm not sure exactly what is going on in my resize script that is screwing everything up and I'm at my wits end at trying to figure it out. Normally people aren't sitting there resizing their browser from desktop to mobile, but my boss does when he show's clients a beta of their site and wants this to never be an issue.
Here is my resize script:
(function( $ ) {
var id,
$body = $('body'),
$window = $( window ),
$navSlider = $('.nav-slider'),
$navMask = $( '.nav-mask' ),
$navToggler = $( '.navbar-toggler' ),
$parent = $( '.menu-item-has-children' ),
$parentLink = $( '.dropdown-toggle' ),
$childContainer = $( '.dropdown-menu' );
$window.on( 'resize', function( e ) {
clearTimeout(id);
id = setTimeout(function() {
close();
var width = $window.width();
if ( width < 992 ) {
setHeightToNav();
$navMask.on( 'click', function() { close() } );
$navToggler.on( 'click', function() { open() } );
$parentLink.on( 'click', function( e ) {
e.preventDefault();
var $this = $( this );
$this.data( 'clicked', true );
console.log( $this.parent() );
} )
}
if ( width >= 992 ) {
resetNavHeight();
console.clear();
}
}, 500 );
} );
function setHeightToNav() {
if ( $body.hasClass( 'logged-in' ) ) {
var $wpAdminBar = $( '#wpadminbar' ).outerHeight();
$navSlider.css( { top: $wpAdminBar + 'px' } );
}
var $navHeight = $( '#header-container' ).outerHeight();
$navSlider.css( { marginTop: $navHeight + 'px' } );
}
function resetNavHeight() {
if ( $body.hasClass( 'logged-in' ) ) {
$navSlider.css( { top: 0 + 'px' } );
}
$navSlider.css( { marginTop: 0 + 'px' } );
}
function close() {
$body.removeClass( 'has-active-menu' );
setTimeout( function() {
$navSlider.removeClass( 'toggling' );
$parent.removeClass( 'show' );
$parentLink.attr( 'aria-expanded', false );
$childContainer.removeClass( 'show' ).removeAttr( 'style' );
$parentLink.data('clicked', false);
}, 250 );
console.log('close()');
}
function open() {
$body.addClass( 'has-active-menu' );
$navSlider.addClass( 'toggling' );
}
})( jQuery );
I've tried my script both with AND without the setTimeout function and it happens exactly the same.
On the project, we are using Bootstrap 4, with the Bootstraps Dropdown._clearMenus(); function commented out in the right places as it was causing conflicts with the functionality I wanted with the navigation.
A link to a site where you can see this is here. It's a WordPress site as well if that matters for anything.
Any help is appreciated. I've been at this for several hours and am at my wits end.

.on( 'click', function ) does not set the event listener, it adds an event listener. Try doing off('click') before setting it if you really need to set this listener here.
But note that any other 'click' listener for this element will also be removed.
That's for the quick fix. You could do better, but that would require more work (track with a boolean if you just changed "display mode", and add or remove the event listeners only then, for example).

JS Infinite Scroll

I use this https://infinite-scroll.com
For normal scrolling through pages it works great out of the box.
I have a problem though, I have a regular navigation at the top of my page. What I would like to accomplish is this:
Visitor enters site. page-1 is loaded
Visitor clicks Page-3 in my navigation, I would like page-2 to load and then page-3 and automatically scroll down to page-3
each page starts with a div with and ID e.g.
function checkAnchor( anchor ) {
if ( $( anchor ).length ) {
return true;
} else {
$( '.article-feed' ).infiniteScroll( 'loadNextPage' );
checkAnchor( anchor );
}
}
$( document ).on( 'click', 'a[href^="#"]', function ( event ) {
event.preventDefault();
anchor = $.attr( this, 'href' );
while ( checkAnchor( anchor ) == false ) {
$( '.article-feed' ).infiniteScroll( 'loadNextPage' );
}
$( 'html, body' ).animate( {
scrollTop: $( $.attr( this, 'href' ) ).offset().top
}, 700 );
} );
I have tried many different things to accomplish this but I cant seem to get it to work. The next page loads but i have to click to link until page-3 is finally loaded. Any help is welcome

function checkAnchor( anchor ) {
if ( $( anchor ).length ) {
return true;
} else {
setInterval( function () {
$( '.article-feed' ).infiniteScroll( 'loadNextPage' );
var lastAnchor = "#" + $( ".anchor" ).last().attr( 'id' );
if ( anchor == lastAnchor ) {
$( 'html, body' ).animate( {
scrollTop: $( anchor ).offset().top
}, 500 );
return true;
}
}, 100 );
}
}
This kind of did the trick but I feel like I am hacking my way through this

Why won't the JavaScript code work out of codepen.io

So there is some code from codepen.io http://codepen.io/karolpodlesny/pen/npKqu. It is uploaded here: http://fredricarms.com/javatestindex.html.
Now, the HTML, CSS and JavaScript for making the boxes expand and do all the cool things, are working how they are supposed to, being in separate files, so is the modernizr. I also the know that the js is being called because in the boxlayout.js I wrote some code to bring up and alert box and it worked just fine. So I am guessing that codepen fixes the code so it runs perfectly. I just don't know what is wrong with the code in the boxlayout.js that is not working on my server. Please help and thank you so much. Below is the code in the boxlayout js file.
var Boxlayout = (function() {
var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
// works section
$sectionWork = $( '#bl-work-section' ),
// work items
$workItems = $( '#bl-work-items > li' ),
// work panels
$workPanelsContainer = $( '#bl-panel-work-items' ),
$workPanels = $workPanelsContainer.children( 'div' ),
totalWorkPanels = $workPanels.length,
// navigating the work panels
$nextWorkItem = $workPanelsContainer.find( 'nav > span.bl-next-work' ),
// if currently navigating the work items
isAnimating = false,
// close work panel trigger
$closeWorkItem = $workPanelsContainer.find( 'nav > span.bl-icon-close' ),
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
// transition end event name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
// support css transitions
supportTransitions = Modernizr.csstransitions;
function init() {
initEvents();
}
function initEvents() {
$sections.each( function() {
var $section = $( this );
// expand the clicked section and scale down the others
$section.on( 'click', function() {
if( !$section.data( 'open' ) ) {
$section.data( 'open', true ).addClass( 'bl-expand bl-expand-top' );
$el.addClass( 'bl-expand-item' );
}
} ).find( 'span.bl-icon-close' ).on( 'click', function() {
// close the expanded section and scale up the others
$section.data( 'open', false ).removeClass( 'bl-expand' ).on( transEndEventName, function( event ) {
if( !$( event.target ).is( 'section' ) ) return false;
$( this ).off( transEndEventName ).removeClass( 'bl-expand-top' );
} );
if( !supportTransitions ) {
$section.removeClass( 'bl-expand-top' );
}
$el.removeClass( 'bl-expand-item' );
return false;
} );
} );
// clicking on a work item: the current section scales down and the respective work panel slides up
$workItems.on( 'click', function( event ) {
// scale down main section
$sectionWork.addClass( 'bl-scale-down' );
// show panel for this work item
$workPanelsContainer.addClass( 'bl-panel-items-show' );
var $panel = $workPanelsContainer.find("[data-panel='" + $( this ).data( 'panel' ) + "']");
currentWorkPanel = $panel.index();
$panel.addClass( 'bl-show-work' );
return false;
} );
// navigating the work items: current work panel scales down and the next work panel slides up
$nextWorkItem.on( 'click', function( event ) {
if( isAnimating ) {
return false;
}
isAnimating = true;
var $currentPanel = $workPanels.eq( currentWorkPanel );
currentWorkPanel = currentWorkPanel < totalWorkPanels - 1 ? currentWorkPanel + 1 : 0;
var $nextPanel = $workPanels.eq( currentWorkPanel );
$currentPanel.removeClass( 'bl-show-work' ).addClass( 'bl-hide-current-work' ).on( transEndEventName, function( event ) {
if( !$( event.target ).is( 'div' ) ) return false;
$( this ).off( transEndEventName ).removeClass( 'bl-hide-current-work' );
isAnimating = false;
} );
if( !supportTransitions ) {
$currentPanel.removeClass( 'bl-hide-current-work' );
isAnimating = false;
}
$nextPanel.addClass( 'bl-show-work' );
return false;
} );
// clicking the work panels close button: the current work panel slides down and the section scales up again
$closeWorkItem.on( 'click', function( event ) {
// scale up main section
$sectionWork.removeClass( 'bl-scale-down' );
$workPanelsContainer.removeClass( 'bl-panel-items-show' );
$workPanels.eq( currentWorkPanel ).removeClass( 'bl-show-work' );
return false;
} );
}
return { init : init };
})();

Your code relies entirely on jQuery, however you haven't included jQuery on your live site. On your CodePen example you're using jQuery 1.9.1:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
You can continue to use the Google-hosted version, or if you want to host it yourself you can download jQuery from jQuery's own website.

The problem is that you need to initialize your BoxLayout once your document has finished loading (all those jQuery variables you're using inside your library won't be defined because their equivalent dom elements are not yet rendered), that's why you need to init everything when dom is ready.
Add this line of code to the bottom of your boxlayout.js file:
$(document).ready(function() {
Boxlayout.init();
});
Just for testing purposes, open up the web developer console on your website, and run this js code:
Boxlayout.init();
You'll see everything will work just fine.

jquery prevent default seems stuck on and requires additional click

I'm writing a jquery plugin to display a jquery ui dialog when links are clicked to provide a confirmation dialog before the link is followed.
The problem i'm having is that when closing the dialog using the "Yes" button, the plugin uses $(element).trigger( 'click' ); to fire the click event on the original anchor element.
This does not cause the browser to follow the link, however a second click with my mouse after the dialog closes does work.
The plugin is used like this $('a').submitConfirm();
Here is the plugin
;(function ( $, window, document, undefined )
{
var pluginName = "submitConfirm";
var Plugin = function( element )
{
var confirmed = false;
var dialog = $( '<div style="display:none;">' )
.html( 'Visit this link?' )
.dialog(
{
modal: true,
title: 'Visit Link?',
autoOpen: false,
buttons :
[
{
text: 'Yes',
click: function( event )
{
confirmed = true;
dialog.dialog( "close" );
$(element).trigger( 'click' );
}
},
{
text: 'No',
click: function( event )
{
confirmed = false;
dialog.dialog( "close" );
}
}
]
});
$(element).bind( 'click',
function( event )
{
if ( ! confirmed )
{
dialog.dialog( "open" );
event.preventDefault();
}
});
};
// Init the plugin
$.fn[pluginName] = function( options )
{
return this.each(function ()
{
// Prevent re-instantiation
if ( !$.data(this, 'plugin_' + pluginName) )
{
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
};
})( jQuery );

You have to pass a function containing what you want to do to the plugin.
Add this line when you are setting the default parameters for the plugin at the bottom of your javascript.
$(function()
{
$('a').submitConfirm(
{
html: 'Are you sure?',
onConfirm: function(event){ // Do what you want in this function.
alert('Confirmed.. Now what?.. Redirect?.. ?? ');
// window.location = $(this).attr('href'); // redirect
},
beforeShow: function( dialog )
{
dialog.html( 'visit google?' );
}
});
});
Update
Check out this JSfiddle --> http://jsfiddle.net/kmTtQ/6/
I changed the lines below. Basically, we want to add a .click event to the element, then .trigger('click') that click.
if ( confirmed ){
console.log( element, elementEvent, event.isDefaultPrevented );
// .on() = jQuery 1.7+, for < 1.7 use .bind or .live. Aliases of .on() as of 1.7
$(element).on('click', function(){ // bind our element with the click
event.view.window.location = element.href; // on click redirect
});
$(element).trigger( 'click' ); // We want to trigger the ^ click event ^
}

I'm trying to finish an animation in an each loop before starting the next one

Here's a sample: http://jsbin.com/idepo/5
The padding and everything seems to look better when not using that, but oh well. My question is, if you click one of the menu items (right now, only the left most one will do anything) then a list of sub menu items slides down. What I would like to do is have one slide down, then another slide down below that (once the first is done animating), so on and so forth. As of now, they slide down as one object. Also, as a side question, is there a better way to navigate to the '.menuItem' part instead of going parent -> children -> children?
EDIT::
Updated the JS with my latest attempt involving recursion, but now nothing happens. Here is the new script:
$('.menu')
.click( function() {
var menu = $(this).parent().children('.menuItem').children();
openMenu( menu ); }
);
function openMenu ( menu ) {
if ( menu.length > 0 ) {
var subMenu = menu.shift();
$(subMenu)
.css( { top:$(this).position().top, left:$(this).position().left } )
.slideDown( 'normal', function () {
openMenu( menu ); }
);
}
}
::End EDIT
Here's the relevant source:
$('.menu')
.hover(
function(event) { $(this).toggleClass('highlighted'); }
)
.click(
function(event) { $(this).parent().children('.menuItem').children().each(
function() {
$(this)
.css( { top:$(this).position().top, left:$(this).position().left} )
.slideDown();
});
}
);
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
</div>

$('.menu').click(function() {
$(this).parent().find('.menuItem div').each(function(i) {
$(this).delay(i*1000).fadeIn();
}
});

I ended up using recursion:
$('.menu')
.mouseover( function() {
var subMenu = [];
$(this).next().children().each( function() {
subMenu.push( $(this) );
});
pullDownMenu(subMenu);
})
.mouseout( function() {
$(this).next().children().each( function() { $(this).stop(true, true); } );
});
function pullDownMenu(subMenu) {
var menu = $.makeArray(subMenu);
if ( menu.length == 0 )
return;
else {
var menuItem = menu.shift();
$(menuItem).slideDown(100, function() { pullDownMenu(menu); });
}
}