Develop Reference

Changing background image referred to each menu item only by scrolling

I'm developing a wordpress theme that has a function of changing background image by hovering menu item(each menu item is attached different image). On mobile, I'd like to change background image just by scrolling so that viewers don't need to click each menu to change the background image.
This is the method I implemented to change background by hovering.
http://codepen.io/nummelin/pen/kzaso
// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {
// Removes all previous classes but keeps sidebar1
$('.sidebar1').removeClass().addClass('sidebar1');
// Splits up the URL on the current href
var URI = $(this).attr('href').split('/');
console.log(URI[2]);
// Applies the last part of the URL to sidebar1
$('.sidebar1').addClass(URI[2]);
});
Achieving with scrolling, I think I need a function that hovering menu item by its position like the image below.
Does anyone have any ideas how to achieve this? I've been exploring a plugin or sample code similar to this, but haven't found any...
Any advices would be appreciated.

Okay, so this is the code I wrote. Hope it helps. I've worked on cross-fading effect but it wasn't that easy. If someone tried please teach me how to do it.
Demo on Codepen:
http://codepen.io/bavavava/pen/rrNpaY
jQuery(function($){
'use strict';
$(document).ready(function(){
var elem = $('li.list-item'),
$listPosition = $.map(elem, function(el, i) { return $(el).offset().top; }),
$listURL = $.map(elem, function(el,i) { return $(el).find('a').attr('href'); }),
$bg = $('.container');
console.log($listPosition);
console.log($listURL);
//PRELOAD IMAGES
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
$($listURL).preload();
//SCROLL CHANGE
$(window).on('scroll', function () {
var windowScroll = $(this).scrollTop();
$.each($listPosition, function (i, pos) {
if (windowScroll >= pos) {
$bg.css('background', 'url(' + $listURL[i] + '), black no-repeat center center fixed');
}
});
});
});
});

Wow.js repeat animation every time you scroll up or down

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!

This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});

If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan

Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>

jQuery hide show slide hover

I'm having some difficulties in one of the jQ features I've implemented. The problem is that slide animation is hiding/showing multiple times for some of the attempts. I want it to be showing only once after hovering an element.
All is working fine but sometimes is fading few times when mouse is hovering element, so if you move a mouse but you're still hover it shouldn't happened. I want it to fade every time you hover but it should animate only once per hover but sometimes is fading few extra times per one hover. Try to move a mouse between title and the content when hovering.
$(document).ready(function() {
$('.latest_module').hover(function(){
var front = $(this).children('.cb-article-meta');
var back = $(this).children('.cb-article-meta-hover');
var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
var backp = $(this).children('.cb-article-meta-hover').children('p');
var img = $(this).children('.cb-grid-img');
$(front).css('display','none');
$(back).css('display','block');
$(img).addClass('latest_module_hover');
$(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
$(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');
},function(){
var front = $(this).children('.cb-article-meta');
var back = $(this).children('.cb-article-meta-hover');
var img = $(this).children('.cb-grid-img');
$(front).css('display','block');
$(back).css('display','none');
$(img).removeClass('latest_module_hover');
});
});
Testing on jsfiddle
Thanks,

If your problem is that you only want hover to run the first time you can just unbind it when it enters with this $(this).unbind('mouseenter mouseleave')
$(document).ready(function() {
$('.latest_module').hover(function(){
$(this).unbind('mouseenter mouseleave')
...
http://jsfiddle.net/bgsx23nc/12/
EDIT:
or as suggested by Guruprasad Rao only on leave
...
$(img).removeClass('latest_module_hover');
$(this).unbind('mouseenter mouseleave')
});
});
http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/

Just add a class to the sliding element and then from next time check if it has class already and if yes don't do anything like one below:
DEMO
$(document).ready(function() {
$('.latest_module').hover(function(){
if(!$(this).hasClass('hoverDone')) //check if it has class and if no then
{
$(this).addClass('hoverDone'); //add class once hover done
var front = $(this).children('.cb-article-meta');
var back = $(this).children('.cb-article-meta-hover');
var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
var backp = $(this).children('.cb-article-meta-hover').children('p');
var img = $(this).children('.cb-grid-img');
$(front).css('display','none');
$(back).css('display','block');
$(img).addClass('latest_module_hover');
$(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
$(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');
}
},function(){
var front = $(this).children('.cb-article-meta');
var back = $(this).children('.cb-article-meta-hover');
var img = $(this).children('.cb-grid-img');
$(front).css('display','block');
$(back).css('display','none');
$(img).removeClass('latest_module_hover');
});
});

Easing Effect scroll to div

i had this script used on my site but there's no easing effect on it can anyone tell me how to add easing effect on this script?
<script>
var scaffold = document.getElementById('scaffold');
var menu = document.getElementById('menu');
menu.addEventListener('core-select', function(e) {
if (e.detail.isSelected) {
scrollToSection(e.detail.item.getAttribute('name'));
}
});
function scrollToSection(id) {
var section = document.getElementById(id);
if (section) {
scaffold.$.headerPanel.scroller.scrollTop = section.offsetTop, 500;
}
}

If it is possible to use jQuery you can use its animate method.

jQuery infinite scroll pagination but in scroller hit top bar

I have found many plugins that enables pagination while scroll bottom and the one of code is like below using scrollpagination().
<script type="text/javascript">
$(function(){
$('#content').scrollPagination({
'contentPage': 'democontent.html',
'contentData': {},
'scrollTarget': $(window),
'heightOffset': 0,
'beforeLoad': function(){
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
I haven't found any idea to detach the scroll up function. I am trying to make a chat application which displays history, But right now I am trying to load all the chat history . Can any body help me to detach scroll top in above code.
Please Help me in this thing.