We Keep Coding

Coding conflict between two javascript files

I'm trying to get a Jekyll site setup and I want the navigation to hide when scrolling down and show when scrolling up. I also want to setup ajax loading with pushState so that I can animate page transitions. I had the navigation hiding and showing properly with scrolling until I put in the code for doing the ajax loading. Now, the navigation will hide and show properly until I click a link, then it stays shown no matter what.
I'm assuming its breaking because I'm using two different jQuery libraries, however the navigation won't work on v2 and the ajax loading won't work on v3. They both work when used on their own. I could really use some help with this.
This is what my HTML looks like for loading the files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled/html4+html5/jquery.history.js"></script>
<script src="js/ajax.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/hide-navigation.js"></script>
Here is the navigation.js
jQuery(document).ready(function($){
var mainHeader = $('.cd-auto-hide-header'),
secondaryNavigation = $('.cd-secondary-nav'),
//this applies only if secondary nav is below intro section
belowNavHeroContent = $('.sub-nav-hero'),
headerHeight = mainHeader.height();
var isLateralNavAnimating = false;
//set scrolling variables
var scrolling = false,
previousTop = 0,
currentTop = 0,
scrollDelta = 10,
scrollOffset = 0;
mainHeader.on('click', '.nav-trigger', function(event){
// open primary navigation on mobile
event.preventDefault();
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length >= 0 ) isLateralNavAnimating = true;
mainHeader.toggleClass('nav-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
$(window).on('scroll', function(){
if( !scrolling && !mainHeader.hasClass("nav-open")) {
scrolling = true;
(!window.requestAnimationFrame)
? setTimeout(autoHideHeader, 250)
: requestAnimationFrame(autoHideHeader);
}
});
$(window).on('resize', function(){
headerHeight = mainHeader.height();
});
function autoHideHeader() {
var currentTop = $(window).scrollTop();
( belowNavHeroContent.length > 0 )
? checkStickyNavigation(currentTop) // secondary navigation below intro
: checkSimpleNavigation(currentTop);
previousTop = currentTop;
scrolling = false;
}
function checkSimpleNavigation(currentTop) {
//there's no secondary nav or secondary nav is below primary nav
if (previousTop - currentTop > scrollDelta) {
//if scrolling up...
mainHeader.removeClass('is-hidden');
} else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
//if scrolling down...
mainHeader.addClass('is-hidden');
}
}
function checkStickyNavigation(currentTop) {
//secondary nav below intro section - sticky secondary nav
var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
if (previousTop >= currentTop ) {
//if scrolling up...
if( currentTop < secondaryNavOffsetTop ) {
//secondary nav is not fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('fixed slide-up');
belowNavHeroContent.removeClass('secondary-nav-fixed');
} else if( previousTop - currentTop > scrollDelta ) {
//secondary nav is fixed
mainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('slide-up').addClass('fixed');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
} else {
//if scrolling down...
if( currentTop > secondaryNavOffsetTop + scrollOffset ) {
//hide primary nav
mainHeader.addClass('is-hidden');
secondaryNavigation.addClass('fixed slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
} else if( currentTop > secondaryNavOffsetTop ) {
//once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset
mainHeader.removeClass('is-hidden');
secondaryNavigation.addClass('fixed').removeClass('slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
}
}
});
and finally the ajax.js
( function( $, History, undefined ) {
if ( !History.enabled ) {
return false;
}
var $wrap = $( "#wrap" );
$wrap.on( "click", ".page-link", function( event ) {
event.preventDefault();
if ( window.location === this.href ) {
return;
}
var pageTitle = ( this.title ) ? this.title : this.textContent;
pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " — Acme";
History.pushState( null, pageTitle, this.href );
} );
History.Adapter.bind( window, "statechange", function() {
var state = History.getState();
$.get( state.url, function( res ) {
$.each( $( res ), function( index, elem ) {
if ( $wrap.selector !== "#" + elem.id ) {
return;
}
$wrap
.html( $( elem ).html() )
.promise()
.done( function( res ) {
if ( typeof ga === "function" && res.length !== 0 ) { // Make sure the new content is added, and the 'ga()' method is available.
ga('set', {
page: window.location.pathname,
title: state.title
});
ga('send', 'pageview');
}
});
} );
} );
} );
} )( jQuery, window.History );

WordPress dynamic paging - url conflict

I have downloaded theme which is static html & css template, now I'm trying to convert into wordpress dynamic template. the issue is that the static template is one page website and have some section within it. Scrolling to these section is done by jquery function that uses url to scroll to that specific section like this:
mysite.com/?page=about
so its conflict with main wordpress dynamic paging the website doesn't scroll to that specific section any more.
I've tried to change jquery code in my template but I couldn't fix it, is there a way to change the default wordpress setting in order to stop this conflict?
here the JS code :
(function(window, undefined) {
"use strict";
var Page = (function() {
var $container = $( '#container' ),
// the scroll container that wraps the articles
$scroller = $container.find( 'div.content-scroller' ),
$menu = $container.find( 'aside' ),
// menu links
$links = $menu.find( 'nav > a' ),
$articles = $container.find( 'div.content-wrapper > article' ).not(".noscroll"),
// button to scroll to the top of the page
// only shown when screen size < 715
$toTop = $container.find( 'a.totop-link' ),
// the browser nhistory object
History = window.History,
// animation options
animation = { speed : 800, easing : 'easeInOutExpo' },
// jScrollPane options
scrollOptions = { verticalGutter : 0, hideFocus : true },
// init function
init = function() {
// initialize the jScrollPane on both the menu and articles
_initCustomScroll();
// initialize some events
_initEvents();
// sets some css properties
_layout();
// jumps to the respective chapter
// according to the url
_goto();
},
_initCustomScroll = function() {
// Only add custom scroll to articles if screen size > 715.
// If not the articles will be expanded
if( $(window).width() > 767 ) {
$articles.jScrollPane( scrollOptions );
}
// add custom scroll to menu
$menu.children( 'nav' ).jScrollPane( scrollOptions );
},
_goto = function( chapter ) {
// get the url from history state (e.g. chapter=3) and extract the chapter number
var chapter = chapter || History.getState().url.queryStringToJSON().page,
isHome = ( chapter === undefined ),
// we will jump to the introduction chapter if theres no chapter
$article = $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );
$('#link_introduction').removeClass('active');
$('#link_about').removeClass('active');
$('#link_skills').removeClass('active');
$('#link_experience').removeClass('active');
$('#link_education').removeClass('active');
$('#link_portfolio').removeClass('active');
$('#link_contact').removeClass('active');
$('#link_'+chapter).addClass('active');
if( $article.length ) {
// left / top of the element
var left = $article.position().left,
top = $article.position().top,
// check if we are scrolling down or left
// is_v will be true when the screen size < 715
is_v = ( $(document).height() - $(window).height() > 0 ),
// animation parameters:
// if vertically scrolling then the body will animate the scrollTop,
// otherwise the scroller (div.content-scroller) will animate the scrollLeft
param = ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
$elScroller = ( is_v ) ? $( 'html, body' ) : $scroller;
$elScroller.stop().animate( param, animation.speed, animation.easing, function() {
// active class for selected chapter
//$articles.removeClass( 'content-active' );
//$article.addClass( 'content-active' );
} );
}
},
_saveState = function( chapter ) {
// adds a new state to the history object
// this will trigger the statechange on the window
if( History.getState().url.queryStringToJSON().page !== chapter ) {
History.pushState( null, null, '?page=' + chapter );
$('#link_introduction').removeClass('active');
$('#link_about').removeClass('active');
$('#link_skills').removeClass('active');
$('#link_experience').removeClass('active');
$('#link_education').removeClass('active');
$('#link_portfolio').removeClass('active');
$('#link_contact').removeClass('active');
$('#link_'+chapter).addClass('active');
}
},
_layout = function() {
// control the overflow property of the scroller (div.content-scroller)
var windowWidth = $(window).width();
var isipad = navigator.userAgent.toLowerCase().indexOf("ipad");
if(isipad > -1)
{
//$('.totop-link').hide();
switch( true ) {
case ( windowWidth <= 768 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'hidden' ); break;
case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;
};
}
else
{
switch( true ) {
case ( windowWidth <= 768 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'hidden' ); break;
case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;
};
}
},
_initEvents = function() {
_initWindowEvents();
_initMenuEvents();
_initArticleEvents();
},
_initWindowEvents = function() {
$(window).on({
// when resizing the window we need to reinitialize or destroy the jScrollPanes
// depending on the screen size
'smartresize' : function( event ) {
var isipad = navigator.userAgent.toLowerCase().indexOf("ipad");
var ismobile = navigator.userAgent.toLowerCase().indexOf("mobile");
if(isipad > -1 || ismobile > -1 )
{
}
else
{
_layout();
$('article.content').not(".noscroll").each( function() {
var $article = $(this),
aJSP = $article.data( 'jsp' );
if( $(window).width() > 767 ) {
( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();
_initArticleEvents();
}
else {
// destroy article's custom scroll if screen size <= 715px
if( aJSP !== undefined )
aJSP.destroy();
$container.off( 'click', 'article.content' );
}
});
var nJSP = $menu.children( 'nav' ).data( 'jsp' );
nJSP.reinitialise();
// jumps to the current chapter
_goto();
}
},
// triggered when the history state changes - jumps to the respective chapter
'statechange' : function( event ) {
_goto();
}
});
},
_initMenuEvents = function() {
// when we click a menu link we check which chapter the link refers to,
// and we save the state on the history obj.
// the statechange of the window is then triggered and the page/scroller scrolls to the
// respective chapter's position
$links.on( 'click', function( event ) {
var href = $(this).attr('href'),
chapter = ( href.search(/chapter/) !== -1 ) ? href.substring(8) : 0;
_saveState( chapter );
if (href.indexOf("#") != -1)
return false;
else
return true;
});
// scrolls to the top of the page.
// this button will only be visible for screen size < 715
$toTop.on( 'click', function( event ) {
$( 'html, body' ).stop().animate( { scrollTop : 0 }, animation.speed, animation.easing );
return false;
});
},
_initArticleEvents = function() {
// when we click on an article we check which chapter the article refers to,
// and we save the state on the history obj.
// the statechange of the window is then triggered and the page/scroller scrolls to the
// respective chapter's position
if($(window).width()>768)
{
$container.on( 'click', 'article.content', function( event ) {
var id = $(this).attr('id'),
chapter = ( id.search(/chapter/) !== -1 ) ? id.substring(7) : 0;
_saveState( chapter );
//return false;
});
}
};
return { init : init };
})();
Page.init();
})(window);

How to reload a page on slider navigation click

I've a problem with this slider: I want to make it slider reload the page after I'm clicking the link "next/prev" in the slider or hte thumbnail.
Can someone help me ?
$(function() {
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
$.fn.imagesLoaded = function( callback ) {
var $images = this.find('img'),
len = $images.length,
_this = this,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call( _this, $images );
}
function imgLoaded() {
if ( --len <= 0 && this.src !== blank ){
setTimeout( triggerCallback );
$images.off( 'load error', imgLoaded );
}
}
if ( !len ) {
triggerCallback();
}
$images.on( 'load error', imgLoaded ).each( function() {
// cached images don't fire load sometimes, so we reset src.
if (this.complete || this.complete === undefined){
var src = this.src;
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
// data uri bypasses webkit log warning (thx doug jones)
this.src = blank;
this.src = src;
}
});
return this;
};
// gallery container
var $rgGallery = $('#rg-gallery'),
// carousel container
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
// the carousel items
$items = $esCarousel.find('ul > li'),
// total number of items
itemsCount = $items.length;
Gallery = (function() {
// index of the current item
var current = 0,
// mode : carousel || fullview
mode = 'carousel',
// control if one image is being loaded
anim = false,
init = function() {
// (not necessary) preloading the images here...
$items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() {
// add options
_addViewModes();
// add large image wrapper
_addImageWrapper();
// show first image
_showImage( $items.eq( current ) );
});
// initialize the carousel
if( mode === 'carousel' )
_initCarousel();
},
_initCarousel = function() {
// we are using the elastislide plugin:
// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
$esCarousel.show().elastislide({
imageW : 65,
onClick : function( $item ) {
if( anim ) return false;
anim = true;
// on click show image
_showImage($item);
// change current
current = $item.index();
}
});
// set elastislide's current to current
$esCarousel.elastislide( 'setCurrent', current );
},
_addViewModes = function() {
// top right buttons: hide / show carousel
var $viewfull = $(''),
$viewthumbs = $('');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.on('click.rgGallery', function( event ) {
if( mode === 'carousel' )
$esCarousel.elastislide( 'destroy' );
$esCarousel.hide();
$viewfull.addClass('rg-view-selected');
$viewthumbs.removeClass('rg-view-selected');
mode = 'fullview';
return false;
});
$viewthumbs.on('click.rgGallery', function( event ) {
_initCarousel();
$viewthumbs.addClass('rg-view-selected');
$viewfull.removeClass('rg-view-selected');
mode = 'carousel';
return false;
});
if( mode === 'fullview' )
$viewfull.trigger('click');
},
_addImageWrapper= function() {
// adds the structure for the large image and the navigation buttons (if total items > 1)
// also initializes the navigation events
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery );
if( itemsCount > 1 ) {
// addNavigation
var $navPrev = $rgGallery.find('a.rg-image-nav-prev'),
$navNext = $rgGallery.find('a.rg-image-nav-next'),
$imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.on('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).on('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
_showImage( $items.eq( current ) );
},
_showImage = function( $item ) {
// shows the large image that is associated to the $item
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );
}
anim = false;
}).attr( 'src', largesrc );
},
addItems = function( $new ) {
$esCarousel.find('ul').append($new);
$items = $items.add( $($new) );
itemsCount = $items.length;
$esCarousel.elastislide( 'add', $new );
};
return {
init : init,
addItems : addItems
};
})();
Gallery.init();
/*
Example to add more items to the gallery:
var $new = $('<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>');
Gallery.addItems( $new );
*/
});
Here is the code for the view
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
Previous Image
Next Image
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>« Previous Demo: </span>Elastislide
<span class="right_ab">
Images by Shermeee
CC BY 2.0
<strong>back to the Codrops post</strong>
</span>
<div class="clr"></div>
</div><!-- header -->
<div class="content">
<h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
</div><!-- content -->
</div><!-- container -->
Sorry if my English is not so good, but I really need to solve this.

Well I have no idea why would you do that, but if you want to reload the page every time you click on the Next and Prev buttons, including the Thumbnail you could do something like this:
$(document).ready(function() {
$('.es-nav span, .es-carousel img').on('click', function() {
location.reload();
});
});
This will reload the page when you click on the nav or an image in the thumbnail area.

javascript forEach - add addEventListener on all buttons

I'm not so skilled with javascript so I'm looking for a little help.
I'm using a script found on Codrops (3D Grid Effect - http://tympanus.net/Development/3DGridEffect/).
All is working fine as expected but I'm trying to "modify" it for my needs.
Basically, I want to trigger the "effect" NOT clicking on the whole container but on a button placed inside it.
The structure I'm using is:
<section class="grid3d vertical" id="grid3d">
<div class="grid-wrap">
<div class="grid">
<div class="box"><div class="btn-click-me">Click to Show</div></div>
<div class="box"><div class="btn-click-me">Click to Show</div></div>
<div class="box"><div class="btn-click-me">Click to Show</div></div>
</div>
</div>
<div class="content">
<div>
<div class="dummy-img"></div>
<p class="dummy-text">Some text</p>
<p class="dummy-text">Some more text</p>
</div>
<div>
<!-- ... -->
</div>
<!-- ... -->
<span class="loading"></span>
<span class="icon close-content"></span>
</div>
</section>
<script>
new grid3D( document.getElementById( 'grid3d' ) );
</script>
And the script (js) is
/**
* grid3d.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
function grid3D( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
// any options you might want to configure
grid3D.prototype.options = {};
grid3D.prototype._init = function() {
// grid wrapper
this.gridWrap = this.el.querySelector( 'div.grid-wrap' );
// grid element
this.grid = this.gridWrap.querySelector( 'div.grid' );
// main grid items
this.gridItems = [].slice.call( this.grid.children );
// default sizes for grid items
this.itemSize = { width : this.gridItems[0].offsetWidth, height : this.gridItems[0].offsetHeight };
// content
this.contentEl = this.el.querySelector( 'div.content' );
// content items
this.contentItems = [].slice.call( this.contentEl.children );
// close content cross
this.close = this.contentEl.querySelector( 'span.close-content' );
// loading indicator
this.loader = this.contentEl.querySelector( 'span.loading' );
// support: support for pointer events, transitions and 3d transforms
this.support = support.pointerevents && support.csstransitions && support.csstransforms3d;
// init events
this._initEvents();
};
grid3D.prototype._initEvents = function() {
var self = this;
// open the content element when clicking on the main grid items
this.gridItems.forEach( function( item, idx ) {
item.addEventListener( 'click', function() {
self._showContent( idx );
} );
} );
// close the content element
this.close.addEventListener( 'click', function() {
self._hideContent();
} );
if( this.support ) {
// window resize
window.addEventListener( 'resize', function() { self._resizeHandler(); } );
// trick to prevent scrolling when animation is running (opening only)
// this prevents that the back of the placeholder does not stay positioned in a wrong way
window.addEventListener( 'scroll', function() {
if ( self.isAnimating ) {
window.scrollTo( self.scrollPosition ? self.scrollPosition.x : 0, self.scrollPosition ? self.scrollPosition.y : 0 );
}
else {
self.scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
// change the grid perspective origin as we scroll the page
self._scrollHandler();
}
});
}
};
// creates placeholder and animates it to fullscreen
// in the end of the animation the content is shown
// a loading indicator will appear for 1 second to simulate a loading period
grid3D.prototype._showContent = function( pos ) {
if( this.isAnimating ) {
return false;
}
this.isAnimating = true;
var self = this,
loadContent = function() {
// simulating loading...
setTimeout( function() {
// hide loader
classie.removeClass( self.loader, 'show' );
// in the end of the transition set class "show" to respective content item
classie.addClass( self.contentItems[ pos ], 'show' );
}, 1000 );
// show content area
classie.addClass( self.contentEl, 'show' );
// show loader
classie.addClass( self.loader, 'show' );
classie.addClass( document.body, 'noscroll' );
self.isAnimating = false;
};
// if no support just load the content (simple fallback - no animation at all)
if( !this.support ) {
loadContent();
return false;
}
var currentItem = this.gridItems[ pos ],
itemContent = currentItem.innerHTML;
// create the placeholder
this.placeholder = this._createPlaceholder(itemContent );
// set the top and left of the placeholder to the top and left of the clicked grid item (relative to the grid)
this.placeholder.style.left = currentItem.offsetLeft + 'px';
this.placeholder.style.top = currentItem.offsetTop + 'px';
// append placeholder to the grid
this.grid.appendChild( this.placeholder );
// and animate it
var animFn = function() {
// give class "active" to current grid item (hides it)
classie.addClass( currentItem, 'active' );
// add class "view-full" to the grid-wrap
classie.addClass( self.gridWrap, 'view-full' );
// set width/height/left/top of placeholder
self._resizePlaceholder();
var onEndTransitionFn = function( ev ) {
if( ev.propertyName.indexOf( 'transform' ) === -1 ) return false;
this.removeEventListener( transEndEventName, onEndTransitionFn );
loadContent();
};
self.placeholder.addEventListener( transEndEventName, onEndTransitionFn );
};
setTimeout( animFn, 25 );
};
grid3D.prototype._hideContent = function() {
var self = this,
contentItem = this.el.querySelector( 'div.content > .show' ),
currentItem = this.gridItems[ this.contentItems.indexOf( contentItem ) ];
classie.removeClass( contentItem, 'show' );
classie.removeClass( this.contentEl, 'show' );
// without the timeout there seems to be some problem in firefox
setTimeout( function() { classie.removeClass( document.body, 'noscroll' ); }, 25 );
// that's it for no support..
if( !this.support ) return false;
classie.removeClass( this.gridWrap, 'view-full' );
// reset placeholder style values
this.placeholder.style.left = currentItem.offsetLeft + 'px';
this.placeholder.style.top = currentItem.offsetTop + 'px';
this.placeholder.style.width = this.itemSize.width + 'px';
this.placeholder.style.height = this.itemSize.height + 'px';
var onEndPlaceholderTransFn = function( ev ) {
this.removeEventListener( transEndEventName, onEndPlaceholderTransFn );
// remove placeholder from grid
self.placeholder.parentNode.removeChild( self.placeholder );
// show grid item again
classie.removeClass( currentItem, 'active' );
};
this.placeholder.addEventListener( transEndEventName, onEndPlaceholderTransFn );
}
// function to create the placeholder
/*
<div class="placeholder">
<div class="front">[content]</div>
<div class="back"></div>
</div>
*/
grid3D.prototype._createPlaceholder = function( content ) {
var front = document.createElement( 'div' );
front.className = 'front';
front.innerHTML = content;
var back = document.createElement( 'div' );
back.className = 'back';
back.innerHTML = ' ';
var placeholder = document.createElement( 'div' );
placeholder.className = 'placeholder';
placeholder.appendChild( front );
placeholder.appendChild( back );
return placeholder;
};
grid3D.prototype._scrollHandler = function() {
var self = this;
if( !this.didScroll ) {
this.didScroll = true;
setTimeout( function() { self._scrollPage(); }, 60 );
}
};
// changes the grid perspective origin as we scroll the page
grid3D.prototype._scrollPage = function() {
var perspY = scrollY() + getViewportH() / 2;
this.gridWrap.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
this.gridWrap.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
this.gridWrap.style.perspectiveOrigin = '50% ' + perspY + 'px';
this.didScroll = false;
};
grid3D.prototype._resizeHandler = function() {
var self = this;
function delayed() {
self._resizePlaceholder();
self._scrollPage();
self._resizeTimeout = null;
}
if ( this._resizeTimeout ) {
clearTimeout( this._resizeTimeout );
}
this._resizeTimeout = setTimeout( delayed, 50 );
}
grid3D.prototype._resizePlaceholder = function() {
// need to recalculate all these values as the size of the window changes
this.itemSize = { width : this.gridItems[0].offsetWidth, height : this.gridItems[0].offsetHeight };
if( this.placeholder ) {
// set the placeholders top to "0 - grid offsetTop" and left to "0 - grid offsetLeft"
this.placeholder.style.left = Number( -1 * ( this.grid.offsetLeft - scrollX() ) ) + 'px';
this.placeholder.style.top = Number( -1 * ( this.grid.offsetTop - scrollY() ) ) + 'px';
// set the placeholders width to windows width and height to windows height
this.placeholder.style.width = getViewportW() + 'px';
this.placeholder.style.height = getViewportH() + 'px';
}
}
// add to global namespace
window.grid3D = grid3D;
})( window );
Now, I'm aware that the "crucial" portion of the code where I have to look is:
// open the content element when clicking on the main grid items
this.gridItems.forEach( function(item, idx ) {
item.addEventListener( 'click', function() {
item._showContent( idx ); } ); } );
So, my question again: how to trigger the event when the div (button) class "click-me" is clicked on every "boxes"?
Thanks to all in advance (i'm struggling with it for hours...)

Have a look at the example here,
http://jsfiddle.net/y0mbn94n/
I have added some intialisation to get your particular classes
// get grid buttons and then make an iterable array out of them
this.gridButtons = this.el.querySelectorAll('button.btn-click-me');
this.gridButtonItems = [].slice.call(this.gridButtons);
and changed the function which iterates and adds a listener.
// open the content element when clicking on the buttonsItems
this.gridButtonItems.forEach(function (item, idx) {
item.addEventListener('click', function () {
self._showContent(idx);
});
});

If you want to call a callback function when the user clicks on a button:
var buttons = document.querySelectorAll('.btn-click-me');
for (var i = 0; i < buttons.length; i++) {
var self = buttons[i];
self.addEventListener('click', function (event) {
// prevent browser's default action
event.preventDefault();
// call your awesome function here
MyAwesomeFunction(this); // 'this' refers to the current button on for loop
}, false);
}

with the structure given
<div class="grid-wrap">
<div class="grid">
<div class="box"><div class="btn-click-me">Click to Show</div></div>
<div class="box"><div class="btn-click-me">Click to Show</div></div>
<div class="box"><div class="btn-click-me">Click to Show</div></div>
</div>
</div>
you just have to change the line you've said to:
item.children[0].addEventListener( 'click', function() {
as the btn-click-me would be the first child of each item.
If you would like a more generic solution you could use:
item.getElementsByClassName('btn-click-me')[0].addEventListener( 'click', function() {
where bnt-click-me would be the class of the button that you would want to bind the click event. Notice that [0] so you can select the very first item of the array, as getElementsByClassName will return one, even if there's only one element.
But if you say you're just starting with javascript y really recommend you using jQuery, it's selectors are much easier than vanilla javascript.

Can I modify this waypoint so that it doesnt take effect until scrolling 500px down the screen

A WordPress theme I am using has this code which is what I assume initiates the themes fixed header class once the user starts to scroll down.
Is there a way to modify this so that the class is not initiated on scroll rather initiated when the user gets to a certain point down the screen such as 100px or something liek that. Here is the code.
if ( et_is_fixed_nav ) {
$('#main-content').waypoint( {
offset: function() {
if ( etRecalculateOffset ) {
et_calculate_header_values();
etRecalculateOffset = false;
}
return et_header_offset;
},
handler : function( direction ) {
if ( direction === 'down' ) {
$('#main-header').addClass( 'et-fixed-header' );
} else {
$('#main-header').removeClass( 'et-fixed-header' );
}
}
} );

It looks like your theme is using Waypoints. The link I attached shows how to adjust the offset. The function that is currently in place looks like it handles the offset somewhere else though, possibly in your Wordpress options panel. I haven't tested it but I'd imagine your code would end up looking like this:
$('#main-content').waypoint( {
offset: 100px,
handler : function( direction ) {
if ( direction === 'down' ) {
$('#main-header').addClass( 'et-fixed-header' );
} else {
$('#main-header').removeClass( 'et-fixed-header' );
}
}
} );

Thanks for the help Austin. You were right about it being handled elsewhere. With the help f a friend, I found this bit elsewhere in the file...
function et_calculate_header_values() {
var $top_header = $( '#top-header' ),
secondary_nav_height = $top_header.length && $top_header.is( ':visible' ) ? $top_header.innerHeight() : 0,
admin_bar_height = $( '#wpadminbar' ).length ? $( '#wpadminbar' ).innerHeight() : 0;
et_header_height = $( '#main-header' ).innerHeight() + secondary_nav_height - 1,
et_header_modifier = et_header_height <= 90 ? et_header_height - 29 : et_header_height - 56,
et_header_offset = et_header_modifier + admin_bar_height;
et_primary_header_top = secondary_nav_height + admin_bar_height;
}
function et_fix_slider_height() {
if ( ! $et_pb_slider.length ) return;
$et_pb_slider.each( function() {
var $slide = $(this).find( '.et_pb_slide' ),
$slide_container = $slide.find( '.et_pb_container' ),
max_height = 0;
$slide_container.css( 'min-height', 0 );
$slide.each( function() {
var $this_el = $(this),
height = $this_el.innerHeight();
if ( max_height < height )
max_height = height;
} );
And then I changed this line...
et_header_offset = et_header_modifier + admin_bar_height;
to this...
et_header_offset = et_header_modifier + admin_bar_height - 1000;
Mission accomplished. Thanks for your help austinthedeveloper and Dan Mossop. By the way, this is what is being used in the custom.js in the Divi theme by Elegant Themes just in case in helps someone else.