We Keep Coding

Semplice (Wordpress) Javascript only working on page reload

i am having trouble with a script.
It works fine the first time, but when I go to another page on the site and then back to the front page the site does not load fully. I need to press refresh for it to work properly.
Does anyone have an idea why that might be?
http://wordpress.juliebrass.com/
I tried to put it inside a window.addEventListener('load', function () {
But it did nothing
This is the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// var figure = $(".video");
// var vid = figure.find("video");
// [].forEach.call(figure, function (item,index) {
// item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
// item.addEventListener('mouseout', hideVideo.bind(item,index), false);
// });
// function hoverVideo(index, e) {
// video.play();
// }
// function hideVideo(index, e) {
// video.pause();
// }
(function($) {
window.addEventListener('load', function () {
function flickity_handle_wheel_event(e, flickity_instance, flickity_is_animating) {
// do not trigger a slide change if another is being animated
if (!flickity_is_animating) {
// pick the larger of the two delta magnitudes (x or y) to determine nav direction
var direction = (Math.abs(e.deltaX) > Math.abs(e.deltaY)) ? e.deltaX : e.deltaY;
console.log("wheel scroll ", e.deltaX, e.deltaY, direction);
if (direction > 0) {
// next slide
flickity_instance.next();
} else {
// prev slide
flickity_instance.previous();
}
}
}
var carousel = document.querySelector(".carousel");
var flickity_2 = new Flickity(".carousel", {wrapAround: true, freescroll:true});
var flickity_2_is_animating = false;
flickity_2.on("settle", function(index) {
console.log("Slide settle " + index);
flickity_2_is_animating = false;
});
flickity_2.on("select", function(index) {
console.log("Slide selected " + index);
flickity_2_is_animating = true;
});
// detect mousewheel event within carousel element
carousel.onwheel = function(e) {
flickity_handle_wheel_event(e, flickity_2, flickity_2_is_animating);
}
// video
var carousel = document.querySelector('.carousel');
var flkty = new Flickity( carousel );
function onLoadeddata( event ) {
var cell = flkty.getParentCell( event.target );
flkty.cellSizeChange( cell && cell.element );
}
var videos = carousel.querySelectorAll('video');
for ( var i=0, len = videos.length; i < len; i++ ) {
var video = videos[i];
// resume autoplay for WebKit
video.play();
}
var figure = $(".video");
var vid = figure.find("video");
$(".video > video").mouseenter( hoverVideo );
$(".video > video").mouseleave( unhoverVideo );
function hoverVideo(e) {
$(this).get(0).play();
}
function unhoverVideo() {
$(this).get(0).pause();
$(this).get(0).currentTime = 0;
//$(this).hide();
}
$(".feuer").mouseout(function() {
$("feuer").get(0).currentTime = 0;
});
$(".herz").mouseout(function() {
$("herz").get(0).currentTime = 0;
});
$(".stern").mouseout(function() {
$("stern").get(0).currentTime = 0;
$(".all").mouseout(function() {
$("all").get(0).currentTime = 0;
});
// your code
});
//pause on hover
})(jQuery);
</script>

Can't resolve a problem with closing my tooltip by onclick function

I am trying to make a function which will close my tooltip by 'click' on the parent element which returns me this tooltip by first click on it. Need to get the closing function exclusively for tooltip parent element. Right now everything is working, but i can also close my tooltip by clicking anywhere on body element.
`(function () {
function Tooltip(options) {
if (!options) options = {};
var self = this;
this.tooltips;
this.offset = 5;
this.beforeTooltip = options.beforeTooltip;
this.afterTooltip = options.afterTooltip;
this.tooltipWrapper = document.createElement('div');
this.status = false;
this.tooltip = function (elem) {
if (!elem.classList.contains('active')){
if (this.status) this.remElemActive();
if (this.beforeTooltip) this.beforeTooltip(elem);
elem.classList.add('active');
var coords = this.getCoords(elem);
this.tooltipWrapper.textContent = elem.dataset.tooltip;
this.tooltipWrapper.classList.add('active');
this.tooltipWrapper.style.top = coords.top - (this.tooltipWrapper.offsetHeight + this.offset) + 'px';
this.tooltipWrapper.style.left = (coords.left + coords.width / 2) - (this.tooltipWrapper.offsetWidth / 2) + 'px';
this.status = true;
if (this.status){
setTimeout(function () {
document.addEventListener('click', self.closeTipsBody, false);
}, 100)
}
if (this.afterTooltip) this.afterTooltip(elem)
}else {
elem.classList.remove('active');
}
};
this.closeTipsBody = function (e) {
if (self.tooltipWrapper === e.target || e.target.classList.contains('active')){
return false
}
self.closeTips();
};
this.closeTips = function () {
this.tooltipWrapper.classList.remove('active');
this.remElemActive();
this.status = false;
document.removeEventListener('click', self.closeTipsBody, false)
};
this.remElemActive = function () {
document.querySelector('.tooltip-js').classList.remove('active')
};
this.getCoords = function (elem) {
elem = elem.getBoundingClientRect();
return{
top: elem.top + window.pageYOffset,
left: elem.left + window.pageXOffset,
width: elem.width
}
};
this.init = function () {
document.addEventListener('DOMContentLoaded', function () {
this.tooltips = document.querySelectorAll('.tooltip-js');
this.tooltipWrapper.classList.add('tooltip-box');
document.querySelector('body').appendChild(this.tooltipWrapper);
for (var i = 0; i < this.tooltips.length; i++ ){
this.tooltips[i].addEventListener('click', function (e) {
e.preventDefault();
self.tooltip(this);
})
}
}.bind(this))
};
this.init();
}
window.Tooltip = Tooltip;
})();`
if you need any additional info, about what do i want to get to, text me.

How to pause a .scrollTop() animation on mouseover? (jsfiddle included)

I am using the following jquery code to create a slow scrolling animation.
http://jsfiddle.net/fhj45f21/
Unfortunately I am having difficulties pausing the animation on mouse over. Could someone please have a look and give me a hint?
function Scroller(y){
this.times = 0;
this.moveInter = 0;
this.backInter = 0;
this.moveBack = function () {
var self = this;
clearInterval(this.moveInter);
this.backInter = setInterval(function () {
self.times -= 5;
y.scrollTop(self.times);
if (self.times == 0) {
return self.startMove();
}
}, 1);
}
this.move = function() {
var self = this;
this.moveInter = setInterval(function () {
self.times++;
y.scrollTop(self.times);
if (self.times == 1200) {
return self.moveBack();
}
}, 50);
}
this.startMove = function() {
this.times = 0;
var self = this;
if (this.backInter != null) {
clearInterval(this.backInter);
}
window.setTimeout(function () {
self.move();
}, 1000);
}
}
jQuery('.textBox').each(function () {
y = jQuery(this);
var scroller = new Scroller(y);
scroller.startMove();
});
Thanks a bunch!

Here you go: http://jsfiddle.net/nxk4vseq/
add an y.hover handler with functions for mousein and mouseout
var scrl=this;
y.hover(function(){
clearInterval(scrl.moveInter);
},function(){
scrl.move();
});

Implementing Column resize using jQuery

I am trying to implement column resizing using jQuery like below(Please see http://jsbin.com/uduNUbo/1/edit)
Here is my JS code
function resizeEvents(selector) {
function XY(e, ele) {
var parentOffset = ele.parent().offset();
return e.pageX - parentOffset.left;
}
var checkPos;
$(selector).on('mousedown', function () {
$(this).attr('init', true);
return false;
});
$(selector).on('mouseup', function () {
$(this).attr('init', false);
});
$(selector).closest('div').on('mousemove', function (e) {
var inits = $(this).find('.resize').filter(function(){
return $(this).attr('init') == true;
});
if (inits.length > 0) {
var pos = XY(e, inits.first());
if (!checkPos) {
checkPos = pos;
return false;
} else {
var moved = checkPos - pos, a = moved > 0 ? 1 : -1 ;
th.prevAll().each(function () {
if (!$(this).hasClass('.resize')) {
$(this).width($(this).width() + a);
}
});
th.nextAll().each(function () {
if (!$(this).hasClass('.resize')) {
$(this).width($(this).width() - a);
}
});
}
}
});
}
resizeEvents('.resize');
But this is not working, My Question is Is mousemove is written properly, to define properly on correct element or not.

I fixed the code for you:
function resizeEvents(selector) {
var selected;
$(selector).on('mousedown', function () {
selected = $(this);
return false;
});
$(document).mouseup(function () {
selected = null;
}).mousemove(function(e) {
var target = $(e.target);
var table = target.parents('.table');
if (table.length && selected) {
var x = e.pageX - table.offset().left;
var splitter_x = selected.offset().left;
var prev = selected.prev();
var next = selected.next();
prev.width(prev.width() + (x - splitter_x));
next.width(next.width() - (x - splitter_x));
}
});
}
http://jsbin.com/uduNUbo/5/edit

Up/Down/Left/Right keyboard navigation with jQuery?

I have a list of div's all with a set and equal height/width that are float:left so they sit next to each other and fold under if that parent is smaller than the combined with of the items.
Pretty standard.
This is to create a list of the twitter bootstrap icons, it gives something like this:
I have added next/previous keyboard navigation using the code below, however you will notice that the up/down arrow keys are mapped to call the left/right functions. What I have no idea how to do is to actually do the up/down navigation?
JsFiddle
(function ($) {
$.widget("ui.iconSelect", {
// default options
options: {
},
$select: null,
$wrapper: null,
$list: null,
$filter: null,
$active: null,
icons: {},
keys: {
left: 37,
up: 38,
right: 39,
down: 40
},
//initialization function
_create: function () {
var that = this;
that.$select = that.element;
that.$wrapper = $('<div class="select-icon" tabindex="0"></div>');
that.$filter = $('<input class="span12" tabindex="-1" placeholder="Filter by class name..."/>').appendTo(that.$wrapper);
that.$list = $('<div class="select-icon-list"></div>').appendTo(that.$wrapper);
//build the list of icons
that.element.find('option').each(function () {
var $option = $(this);
var icon = $option.val();
that.icons[icon] = $('<a data-class="' + icon + '"><i class="icon ' + icon + '"></i></a>');
if ($option.is(':selected')) {
that.icons[icon].addClass('selected active');
}
that.$list.append(that.icons[icon]);
});
that.$wrapper.insertBefore(that.$select);
that.$select.addClass('hide');
that._setupArrowKeysHandler();
that._setupClickHandler();
that._setupFilter();
that.focus('selected');
},
focus: function (type) {
var that = this;
if (that.$active === null || that.$active.length == 0) {
if (type == 'first') {
that.$active = that.$list.find('a:visible:first');
} else if (type == 'last') {
that.$active = that.$list.find('a:visible:last');
} else if (type == 'selected') {
that.$active = that.$list.find('a.selected:visible:first');
that.focus('first');
}
}
that.$active.addClass('active');
var toScroll = ((that.$list.scrollTop() + that.$active.position().top)-that.$list.height()/2)+that.$active.height()/2;
//that.$list.scrollTop((that.$list.scrollTop() + top)-that.$list.height()/2);
that.$list.stop(true).animate({
scrollTop: toScroll,
queue: false,
easing: 'linear'
}, 200);
if (type === 'selected') {
return false;
}
that.$select.val(that.$active.data('class'));
that.$select.trigger('change');
},
_setupArrowKeysHandler: function () {
var that = this;
that.$wrapper.on('keydown', function (e) {
switch (e.which) {
case that.keys.left:
that.moveLeft();
break;
case that.keys.up:
that.moveUp();
break;
case that.keys.right:
that.moveRight();
break;
case that.keys.down:
that.moveDown();
break;
case 16:
return true;
case 9:
return true;
break;
default:
that.$filter.focus();
return true;
}
return false;
});
},
_setupFilter: function(){
var that = this;
that.$filter.on('keydown keyup keypress paste cut change', function(e){
that.filter(that.$filter.val());
});
},
_setupClickHandler: function () {
var that = this;
that.$list.on('click', 'a', function () {
that.$wrapper.focus();
that.$active.removeClass('active');
that.$active = $(this);
that.focus('first');
});
},
moveUp: function () {
var that = this;
return that.moveLeft();
},
moveDown: function () {
var that = this;
return that.moveRight();
},
moveLeft: function () {
var that = this;
that.$active.removeClass('active');
that.$active = that.$active.prevAll(':visible:first');
that.focus('last');
return false;
},
moveRight: function () {
var that = this;
that.$active.removeClass('active');
that.$active = that.$active.nextAll(':visible:first');
that.focus('first');
return false;
},
filter: function(word){
var that = this;
var regexp = new RegExp(word.toLowerCase());
var found = false;
$.each(that.icons, function(i, $v){
found = regexp.test(i);
if(found && !$v.is(':visible')){
$v.show();
} else if(!found && $v.is(':visible')){
$v.hide();
}
});
}
});
})(jQuery);

Perhaps something like this: http://jsfiddle.net/QFzCY/
var blocksPerRow = 4;
$("body").on("keydown", function(e){
var thisIndex = $(".selected").index();
var newIndex = null;
if(e.keyCode === 38) {
// up
newIndex = thisIndex - blocksPerRow;
}
else if(e.keyCode === 40) {
// down
newIndex = thisIndex + blocksPerRow;
}
if(newIndex !== null) {
$(".test").eq(newIndex).addClass("selected").siblings().removeClass("selected");
}
});
Basically, you set how many items there are in a row and then find the current index and subtract or add that amount to select the next element via the new index.
If you need to know how many blocks per row there are, you could do this:
var offset = null;
var blocksPerRow = 0;
$(".test").each(function(){
if(offset === null) {
offset = $(this).offset().top;
}
else if($(this).offset().top !== offset) {
return false;
}
blocksPerRow++;
});
To deal with your 'edge' cases, you could do:
if(newIndex >= $(".test").length) {
newIndex = $(".test").length - newIndex;
}

moveUp: function () {
var that = this;
var index = $(this).index();
var containerWidth = parseInt( $('.select-icon-list').innerWidth(), 10);
var iconWidth = parseInt( $('.select-icon-list > a').width(), 10);
var noOfCols = Math.floor( containerWidth / iconWidth );
var newIndex = ( (index - noOfCols) < 0 ) ? index : (index - noOfCols);
var elem = $('.select-icon-list > a')[index];
},
Cache what ever remains static.