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 );

How to make expand all/collapse all button in this certain script?

i would like to ask for help in a simple task i really need to do at my work (I am a javascript newbie). I made a simple collapsible list with script provided by this guy http://code.stephenmorley.org/javascript/collapsible-lists/ but what i need right now are two simple buttons as stated in the title: expand all and collapse whole list. Do you guys know if something like that can be implemented in this certain script? Please help :)
var CollapsibleLists = new function () {
this.apply = function (_1) {
var _2 = document.getElementsByTagName("ul");
for (var _3 = 0; _3 < _2.length; _3++) {
if (_2[_3].className.match(/(^| )collapsibleList( |$)/)) {
this.applyTo(_2[_3], true);
if (!_1) {
var _4 = _2[_3].getElementsByTagName("ul");
for (var _5 = 0; _5 < _4.length; _5++) {
_4[_5].className += " collapsibleList";
}
}
}
}
};
this.applyTo = function (_6, _7) {
var _8 = _6.getElementsByTagName("li");
for (var _9 = 0; _9 < _8.length; _9++) {
if (!_7 || _6 == _8[_9].parentNode) {
if (_8[_9].addEventListener) {
_8[_9].addEventListener("mousedown", function (e) {
e.preventDefault();
}, false);
} else {
_8[_9].attachEvent("onselectstart", function () {
event.returnValue = false;
});
}
if (_8[_9].addEventListener) {
_8[_9].addEventListener("click", _a(_8[_9]), false);
} else {
_8[_9].attachEvent("onclick", _a(_8[_9]));
}
_b(_8[_9]);
}
}
};
function _a(_c) {
return function (e) {
if (!e) {
e = window.event;
}
var _d = (e.target ? e.target : e.srcElement);
while (_d.nodeName != "LI") {
_d = _d.parentNode;
}
if (_d == _c) {
_b(_c);
}
};
};
function _b(_e) {
var _f = _e.className.match(/(^| )collapsibleListClosed( |$)/);
var uls = _e.getElementsByTagName("ul");
for (var _10 = 0; _10 < uls.length; _10++) {
var li = uls[_10];
while (li.nodeName != "LI") {
li = li.parentNode;
}
if (li == _e) {
uls[_10].style.display = (_f ? "block" : "none");
}
}
_e.className = _e.className.replace(/(^| )collapsibleList(Open|Closed)( |$)/, "");
if (uls.length > 0) {
_e.className += " collapsibleList" + (_f ? "Open" : "Closed");
}
};
}();

It is important to understand why a post-order traversal is used. If you were to just iterate through from the first collapsible list li, it's 'children' may (will) change when expanded/collapsed, causing them to be undefined when you go to click() them.
In your .html
<head>
...
<script>
function listExpansion() {
var element = document.getElementById('listHeader');
if (element.innerText == 'Expand All') {
element.innerHTML = 'Collapse All';
CollapsibleLists.collapse(false);
} else {
element.innerHTML = 'Expand All';
CollapsibleLists.collapse(true);
}
}
</script>
...
</head>
<body>
<div class="header" id="listHeader" onClick="listExpansion()">Expand All</div>
<div class="content">
<ul class="collapsibleList" id="hubList"></ul>
</div>
</body>
In your collapsibleLists.js
var CollapsibleLists =
new function(){
...
// Post-order traversal of the collapsible list(s)
// if collapse is true, then all list items implode, else they explode.
this.collapse = function(collapse){
// find all elements with class collapsibleList(Open|Closed) and click them
var elements = document.getElementsByClassName('collapsibleList' + (collapse ? 'Open' : 'Closed'));
for (var i = elements.length; i--;) {
elements[i].click();
}
};
...
}();

Add row to html table below the selected row when previous row has rowspan

I have the following code to add rows to a table using a context menu plugin so you can right click the cell you want to add the row below.
(function($){
function scanTable( $table ) {
var m = [];
$table.children( "tr" ).each( function( y, row ) {
$( row ).children( "td, th" ).each( function( x, cell ) {
var $cell = $( cell ),
cspan = $cell.attr( "colspan" ) | 0,
rspan = $cell.attr( "rowspan" ) | 0,
tx, ty;
cspan = cspan ? cspan : 1;
rspan = rspan ? rspan : 1;
for( ; m[y] && m[y][x]; ++x ); //skip already occupied cells in current row
for( tx = x; tx < x + cspan; ++tx ) { //mark matrix elements occupied by current cell with true
for( ty = y; ty < y + rspan; ++ty ) {
if( !m[ty] ) { //fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var pos = { top: y, left: x };
$cell.data( "cellPos", pos );
} );
} );
};
/* plugin */
$.fn.cellPos = function( rescan ) {
var $cell = this.first(),
pos = $cell.data( "cellPos" );
if( !pos || rescan ) {
var $table = $cell.closest( "table, thead, tbody, tfoot" );
scanTable( $table );
}
pos = $cell.data( "cellPos" );
return pos;
}
})(jQuery);
appendMe();
function appendMe() {
$('table.test td').find("em").remove()
$('table.test td').removeAttr("realCellEq").append(function(){
return "<em> " + $(this).cellPos().left + "</em>"
}).attr("realCellEq", function() {
return $(this).cellPos().left
});
}
$(function () {
$.contextMenu({
selector: 'table.test td',
items: {
"addRowBelow": {
name: "Add Row Below",
callback: function (key, options) {
$(this).parents("tr").after("<tr class='freshAdd'></tr>");
$(this).parents("tr").find("td").each( function() {
var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
if(thisRowSpan > 1) {
$(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
} else {
$(this).clone().appendTo("tr.freshAdd");
}
});
$("tr.freshAdd").find("td").html("");
$("tr.freshAdd").removeClass("freshAdd");
appendMe();
}
}
}
});
});
The trouble is i can't work out what I need to do to take into consideration rowspans.
Here's a jsfiddle to explain what I mean.
http://jsfiddle.net/many_tentacles/sqjak/1/

The reason you are not able to add a fresh cell, using the the freshly added cells is , those freshly added cells contain a class called context-menu-active which prohibits the functions you have written to add the cells.
You need to do a small change inside callback like :
$(".context-menu-active").removeClass('context-menu-active');
This removes the class from any freshly added cell and hence it becomes usable again.
Look at the updated fiddle : http://jsfiddle.net/Q5PgG/

Your parents("tr") was not targeting previous parents so i have added prev() each() function , you can do it this way:
$(this).parent("tr").after("<tr class='freshAdd'></tr>");
$(this).parent("tr").prev().find("td").each( function() {
var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
if(thisRowSpan > 1) {
$(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
}
})
$(this).parent("tr").find("td").each( function() {
var thisRowSpan = ($(this).attr("rowspan")) ? $(this).attr("rowspan") : 1;
if(thisRowSpan > 1) {
$(this).attr("rowspan", (parseInt($(this).attr("rowspan"),10)+1));
} else {
$(this).clone().appendTo("tr.freshAdd");
}
Working demo Fiddle

jquery - filtering of html elements on page issue

I have created a javascript filter that is working but not all the time. To first see this in action, visit the following link. On the left side, click on the Bridgestone e6 link under "Brand Model". It returns nothing, but in reality it should return 3 products in the view.
The way the filter works is as follows. I grab the value of the item clicked on the sidebar, then I search the html elements in the main view to see if there are any matches. If there are, I only show those products in the view and hide the rest.
The javascript that takes care of this is (also you can see it here):
Is it some whitespace issue or something incorrect in my JS? I tried to use the jQuery trim function to no avail.
The javascript:
var noProductMatches = jQuery('.no-products-found');
jQuery('#filter-by-brand li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery(this).html();
var productVendorFromCollection = jQuery("#product-vendor");
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'All Brands' )
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery(this).html().indexOf(brandNameSelected) > -1 || jQuery(this).html().indexOf(productVendorFromCollection) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-model li a').click(function()
{
noProductMatches.hide();
var brandNameSelected = jQuery.trim(jQuery(this).html());
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (brandNameSelected == 'Any Model' )
{
productContainer.fadeIn("slow");
}
else
{
var results = productContainer
.fadeOut(100)
.delay(100)
.filter(function()
{
return jQuery.trim(jQuery(this).html()).indexOf(brandNameSelected) > -1;
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});
jQuery('#filter-by-price li a').click(function()
{
noProductMatches.hide();
var priceRangeSelectedItem = jQuery(this).html();
var minSelectedPrice = parseInt( jQuery(this).attr("name") );
var maxSelectedPrice = parseInt( jQuery(this).attr("title") );
var productContainer = jQuery('#product-collection .productBoxWrapper');
if (priceRangeSelectedItem == 'Any Price')
{
productContainer.fadeIn("slow");
}
else
{
var results = jQuery(".productBoxWrapper")
.fadeOut(100)
.delay(100)
.filter(function()
{
var minProductPrice = parseInt( jQuery(this).find("#lowestPriceRange").html() );
var maxProductPrice = parseInt( jQuery(this).find("#highestPriceRange").html() );
//alert(minProductPrice);
//alert(maxProductPrice);
return (minProductPrice >= minSelectedPrice && maxProductPrice <= maxSelectedPrice);
})
.each(function(index, item)
{
jQuery(item).fadeIn("slow");
});
if (results.length == 0)
{
noProductMatches.fadeIn();
}
}
});

The problem is that it is mixed case. In the menu it says Bridgestone e6 but on the page it says Bridgestone E6, with an uppercase E. Either you have to make everything lowercase when you search our make sure they are equal in the menu and on the page.

Selection row disable/reenable text selection

I have this code which selects multiple row when shift key is pressed. But whenever selection starts, the table text always gets selected, hence I tried to add disableSelection( ); to the table and re-enable it once mouseup. However, it is not working, the text still get selected. Any help is greatly appreciated.
$(".tableGrid tr").live("click", function(event) {
if( event.shiftKey ) {
$(".tableGrid").disableSelection( );
}
var tableRow = $(this).closest("tr").prevAll("tr").length + 1;
if ($(this).hasClass("rowSelected")) {
event.shiftKey ? $(this).removeClass("rowSelected") : $(".tableGrid tr").removeClass("rowSelected");
}
else {
if( !event.shiftKey ) {
$(".tableGrid tr").removeClass("rowSelected");
}
$(this).addClass("rowSelected");
}
if( event.shiftKey ) {
var start = Math.min(tableRow, lastSelected);
var end = Math.max(tableRow, lastSelected);
for( var i=start; i<end; i++ ) { $(".tableGrid").find("tr").eq(i).addClass("rowSelected"); }
}
else {
lastSelected = $(this).closest("tr").prevAll("tr").length + 1;
}
}).mouseup(function( ) {
$(".tableGrid").enableSelection( );
});

To disable text selection of a specific DOM element, you could try this:
var element = document.getElementById('content');
element.onselectstart = function () { return false; } // ie
element.onmousedown = function () { return false; } // mozilla