Develop Reference

How to scroll from section to section on one mwheeldown

I have been making a navigation menu for a small project I'm making but because of my lack of knowledge in codeing, I got stuck.
I have attached a link to the navigation code and I can't seem to make it scroll from section to section on one mwheeldown.
In simple words: I want to skip to the next section each time I scroll down.
https://codepen.io/tonyexe/pen/NVrjJp
$(".navigation-container-versia a[href^='#']").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 500);
}
});
function getTargetTop(elem){
var id = elem.attr("href");
var offset = 60;
return $(id).offset().top - offset;
}
$(window).on("load scroll", function(e){
isSelected($(window).scrollTop())
});
var sections = $(".navigation-container-versia a[href^='#']");
function isSelected(scrolledTo){
var threshold = 100;
var i;
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};

How to listen to only the first scroll event on javascript/jquery?

I'm currently working on implementing my own version of snap-scrolling using vanilla JavaScript, and while I've got it mostly working as of now, I'm having trouble handling the scroll events.
My HTML looks something like this:
<div class="container">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
</div>
And my JS looks something like this:
var pos = 0;
var isScrolling = false;
var id = 1;
$(window).scroll(function() {
if (!isScrolling) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
}
isScrolling = false;
pos = curPos;
}
});
What currently happens is when I scroll down my mouse wheel, it will do the animation but will keep proceeding to the next divs because of the multiple scroll events being fired. How do I make it so that it only listens to the first event (whether it scrolls up or down)?

A hacky way is to use timer:
var pos = 0;
var isScrolling = false;
var id = 1;
var lastScrollTime = $.now();
$(window).scroll(function() {
if ((!isScrolling)&&((($.now()-lastScrollTime)>3000)) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500);
}
}
isScrolling = false;
pos = curPos;
lastScrollTime = $.now();
}
});

You can register one time listeners in jQuery using jQuery.one.
EDIT:
You can use the complete callback of jQuery.animate to stop/start responding to scroll events.
var isScrolling = false;
$(window).on('scroll', function () {
if (!isScrolling) {
isScrolling = true;
var curPos = $(this).scrollTop();
if (curPos > pos) {
// scrolling down
if (id < 4) {
id++;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500,function(){
isScrolling = false;
});
}
} else {
// scrolling up
if (id > 1) {
id--;
$('html, body').animate({
scrollTop: $('#item' + id).offset().top
}, 500,function(){
isScrolling = false;
});
}
}
pos = curPos;
}
});

There's no easy way to deal with what it is known as kinetic scrolling.
Browsers do not provide developers a proper way to distinguish the meaningful scrolling from the inertial ones.
However, there are some attempts out there that aims to solve this issue, such as Lethargy.
Not 100% ideal, but very close to it.
Other than that, you can take a look at libraries like fullPage.js where another attempt to solve the issue was made.

Adjust scroll position to a closest div

Here i have bunch of div's with some related contents.
I want to adjust the scroll position to a closest div
Example Website
Demo Fiddle
How can i do this using jQuery
JQuery
$(".item").scroll( function( ) {
$(".item").css({ top: $(this).scrollTop( ) });
});
Could anyone help me,
Thanks in Advance.

Here you go. You have to do a couple of things.
listen when the scrolling stops
find the "next" container
scroll to its top value, without triggering "the scroll end detection"
JavaScript
var items = $(".item");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if ($(value).offset().top > $(window).scrollTop()) {
animating = true;
$('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
setTimeout(function() { animating = false; }, 300);
return false;
}
});
}, 200));
}
});
The "scroll end detection" is coming from yckart's answer to jQuery scroll() detect when user stops scrolling. All timings from this example can be adjusted to your needs.
Demo
Try before buy

Try this:
window.location.hash = 'your div id';
your updated fiddle : here
UPDATE
if you want to do this in a smooth way try this:
$(window).scroll(function() {
var winScroll = $(this).scrollTop(); // current scroll of window
// find cloest div
var cloest = $('your main divs').first(); // first section
var min = 10000;
$('your main divs').each(function() {
var divTopSpace = $(this).offset().top - winScroll;
if( divTopSpave < min && divTopSpave > 0 ) {
cloest = $(this);
min = divTopSpace;
}
});
// animate
$(document.body).animate({scrollTop: cloest.offset().top}, 'slow');
});

Working Sample DEMO
Try this
$(document).ready(function () {
var full_url = this.href,
target_offset = $('.item:first').offset(),
target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
});

I thing you look for this..
check demo
<div class="item" id="123">(123 div Here )pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.</div>
<div style="width:20%;float:right;position:fixed;right:0px;">
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</div>

To get it to work in Firefox, use
$('body,html').animate( ... );

I found solution for what you want to achieve. You can change 200 on the following line so height from and to the top of the box will change.
if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 )
full code
var items = $(".thebox");
var animating = false;
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 ) {
animating = true;
$('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
setTimeout(function() { animating = false; }, 300);
return false;
}
});
}, 200));
}
});
DEMO

Following method will help to adjust Div scroll position so that selected inner Div is viewable in view port.
jQuery :
function adjScrollPosition(container, elem) {
var h = container[0].clientHeight;
var w = container[0].clientWidth;
var t = container.scrollTop();
var l = container.scrollLeft();
var b = t + h;
var r = l + w;
elem = elem[0];
var eh = elem.offsetHeight;
var ew = elem.offsetWidth;
var et = elem.offsetTop;
var el = elem.offsetLeft;
var eb = et + eh;
var er = el + ew;
var top = et < t || eh > h ? et : b < eb ? t + (eb - b) : t;
var left = el < l || ew > w ? el : r < er ? l + (er - r) : l;
// If you want to bring element in center of the view port uncomment following lines
//var top = et - (h / 2) + eh;
//var left = el - (w / 2) + ew / 2;
$(container).stop().animate({ scrollTop: top, scrollLeft: left }, 500);
}

if ($(".text-danger").length) {
$(document).ready(function () {
$('html, body').animate({
scrollTop: $("form#partner-register-form div.text-danger").first().offset().top - 60
}, 1000);
});
}

javascript - Need onclick to go full distance before click works again

I have this javascript function I use that when clicked goes a certain distance. This is used within a scroller going left to right that uses about 7 divs. My question is how do I get the click to go the full distance first before the click can be used again? The issue is if the user rapidly clicks on the arrow button it resets the distance and sometimes can end up in the middle of an image instead of right at the seam. What code am I missing to accomplish this?
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
});
});

I would've thought that the easiest way would be to have a boolean flag indicating whether or not the animation is taking place:
$(function () {
var animating = false,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
if (animating) {return;}
var dir = (this.id === "right") ? '+=' : '-=';
animating = true;
outerwrap.animate({
scrollLeft: dir + '251'
}, 1000, function () {
animating = false;
});
});
});
works for me: http://jsfiddle.net/BYossarian/vDtwy/4/

Use .off() to unbind the click as soon as it occurs, then re-bind it once the animation completes.
function go(elem){
$(elem).off('click'); console.log(elem);
var dir = elem.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){
$("#right, #left").click(go);
});
}
$("#right, #left").click(function () {
go(this);
});
jsFiddle example
You can see in this simplified example that the click event is unbound immediately after clicking, and then rebound once the animation completes.

Use an automatic then call like this
var isMoving = false;
$(function () {
$("#right, #left").click(function () {
if (isMoving) return;
isMoving = true;
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000).then(function(){isMoving = false}());
});
});

I think that you miss the fact that when you make stop() you actually position the slider at some specific point. I.e. if your scroller is 1000px and you click left twice very quickly you will probably get
scrollLeft: 0 - 251
scrollLeft: -2 - 251
So, I think that you should use an index and not exactly these += and -= calculations. For example:
$(function () {
var numberOfDivs = 7;
var divWidth = 251;
var currentIndex = 0;
$("#right, #left").click(function () {
currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1;
currentIndex = currentIndex < 0 ? 0 : currentIndex;
currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex;
$(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000);
});
});
A big benefit of this approach is that you are not disabling the clicking. You may click as many times as you want and you can do that quickly. The script will still works.

This will work perfectly fine:
var userDisplaysPageCounter = 1;
$('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) {
_goForwardInInventory();
});
$('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) {
_goBackInInventory();
});
function _goForwardInInventory()
{
//$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory');
var totalPages = $('#userfooterdisplays_list_pagination_container div').length;
totalPages = Math.ceil(totalPages/4);
// alert(totalPages);
if(userDisplaysPageCounter < totalPages)
{
userDisplaysPageCounter++;
$( "#userfooterdisplays_list_pagination_container" ).animate({
left: "-=600",
}, 500, function() {
});
}
}
function _goBackInInventory()
{
//$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory');
if(userDisplaysPageCounter > 1)
{
userDisplaysPageCounter--;
$( "#userfooterdisplays_list_pagination_container" ).animate({
left: "+=600",
}, 500, function() {
});
}
}

I second BYossarian's answer.
Here is a variation on his demo, which "skips" the animation when the user clicks several times quickly on the buttons :
$(function () {
var targetScroll = 0,
outerwrap = $(".outerwrapper");
$("#right, #left").click(function () {
// stop the animation,
outerwrap.stop();
// hard set scrollLeft to its target position
outerwrap.scrollLeft(targetScroll*251);
if (this.id === "right"){
if (targetScroll < 6) targetScroll += 1;
dir = '+=251';
} else {
if (targetScroll > 0) targetScroll -=1;
dir = '-=251';
}
outerwrap.animate({ scrollLeft: dir }, 1000);
});
});
fiddle

slow performance since chrome 12 [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
The last week when I was on chrome 11 yet, my website run perfectly. Yesterday when I did the new Chrome12 update I noticed that my website was much slower, almost unusable…
Here it is : http://emilevictorportenart.be/
The associated jquery file is :
// copyright Portenart Emile-Victor
if ( (screen.width < 1024) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || ($.browser.msie) ) {
document.location = "mobile/";
}
;$(document).ready(function(){
//add keyboard span and hide it on the first screen
$('section#content').append('<span class="keyboardUse"><span>MAJ: plus d\'infos<br /> ←→/QD/WA: changer de projet<br /> ↑↓/ZS: changer d\'image</span></span>');
// caching DOM
var $keyboardUse = $('.keyboardUse');
var $headerNavUl = $('header nav ul');
var $navMainBottom = $('.navMainBottom');
var $headerNavSpanRelMore = $('header nav span[rel=more]');
var $headerNavA_Arrow = $('header nav a, .arrow');
var keyboardUseShowFirst = 0;
var clickLinkAllow = 1;
var $header = $('header');
$keyboardUse.hide();
// links
$('a[rel=external]').live('click', function() {
window.open(this.href);
return false;
});
// height navigation Background pattern
$navMainBottom.height(1000).css('top','-723px');
$header.find('h1 a').css('margin-top','65px');
// ul navigation slide when hover (1st time) & click next
$headerNavUl.hide();
$headerNavSpanRelMore.one('mouseover', function(){
$headerNavUl.slideDown(200);
$navMainBottom.animate({'top':'-800px'},200);
$(this).addClass('moreRotated');
});
$headerNavSpanRelMore.click(function(){
$(this).toggleClass('moreRotated');
if($headerNavUl.is(':visible')){
$navMainBottom.animate({'top':'-723px'},200);
} else {
$navMainBottom.animate({'top':'-800px'},200);
}
$headerNavUl.slideToggle(200);
});
// leave project animation
$('header nav a, .arrow').live('click', function(){
if(clickLinkAllow === 1){
$('section h1').css('z-index','-1').animate({'left':'-1000px'/* , 'top':'2000px' */},800);
$('article').css('z-index','-1').animate({'left':'-965px', 'top':'2000px', 'opacity':'0'}, 750);
$('.arrow').fadeOut(300);
$('header h1').animate({'left':'0', 'opacity': '1'}, 700);
var $keyboardUse = $('.keyboardUse');
if(keyboardUseShowFirst === 0){
$keyboardUse.addClass('full').fadeIn(200);
setTimeout(function(){
$keyboardUse.removeClass('full');
}, 10000);
keyboardUseShowFirst = 1;
} else {
$keyboardUse.show();
}
}
});
// caption
$('article span[rel=more]').live('click', function(){
$(this).toggleClass('moreRotated');
$('article .description').slideToggle(200);
});
// keyboard
//stop keyboard action when input/textarea are on focus
var inputTextareaFocus = 0;
$('input, textarea').live('focus', function(){
inputTextareaFocus = 1;
});
$('input, textarea').live('blur', function(){
inputTextareaFocus = 0;
});
$(document.documentElement).keyup(function (event) {
if(inputTextareaFocus === 0){
if (event.keyCode == 37 || event.keyCode == 81) { //left -- q
$('header nav ul a[rel=active]').parent().prev().find('a').click();
} else if (event.keyCode == 39 || event.keyCode == 68) { //right -- d
$('header nav ul a[rel=active]').parent().next().find('a').click();
} else if (event.keyCode == 38 || event.keyCode == 90) { //top -- 90
$('.naviSquare li[rel=active]').prev().find('a').click();
} else if (event.keyCode == 40 || event.keyCode == 83) { //down --
$('.naviSquare li[rel=active]').next().find('a').click();
} else if (event.keyCode == 16) { //caps (maj)
$('.naviSquare li:eq(0) a').click();
$('article span[rel=more]').click();
}
}
return false;
});
// projeft change
//hide description and start waypoint
function afterload(timeToLoadWaypoint){
var $description = $('.description');
$description.hide();
setTimeout(function(){
var idliNavisquare = 0;
$('article figure img').waypoint(function(event, direction){
if (direction === 'down') {
idliNavisquare++;
}
else {
idliNavisquare--;
}
var $naviSquareLi = $('.naviSquare li');
$naviSquareLi.removeAttr('rel');
$naviSquareLi.eq(idliNavisquare).attr('rel','active');
});
$('body').css({'overflow-y':'scroll', 'overflow-x':'auto'});
//numbers of pictures and add squares
var $articleFigureUlLi = $('article figure ul li');
var nombreCreationLi = $articleFigureUlLi.length;
for (var i = 0; i < nombreCreationLi; i++) {
$articleFigureUlLi.eq(i).attr('id','crea'+i);
}
for (var i = 0; i < nombreCreationLi; i++) {
var tHeightImg4NaviSquare = $('figure li:eq('+i+') img').height();
var tailleHeightNaviSquareFinal = parseInt((tHeightImg4NaviSquare / 700)*10, 10);
var $ulNaviSquare = $('ul.naviSquare');
if(i === 0){
$ulNaviSquare.append('<li rel="active"><a href="#content" style="height:'+ tailleHeightNaviSquareFinal +'px;"></li>');
} else {
$ulNaviSquare.append('<li></li>');
}
}
//allow localscroll on this links
$('ul.naviSquare, .description').localScroll();
$('.arrow').fadeIn(100);
//add links on arrows
var hrefPrevious = $('header nav ul a[rel=active]').parent().prev().find('a').attr('href');
var hrefNext = $('header nav ul a[rel=active]').parent().next().find('a').attr('href');
$('a[rel=prev]').attr('href', hrefPrevious);
$('a[rel=next]').attr('href', hrefNext);
//add share links
var linkPageActive = 'http://emilevictorportenart.be/%23'+window.location.hash.substr(1);
var titrePageActive = $('article h2').text();
titrePageActive = titrePageActive+' from Emile-Victor Portenart Website';
var descriptionPageActive = $('article .description p:eq(0)').text();
descriptionPageActive = descriptionPageActive+' '
var twitterShareLink = 'http://twitter.com/share?url='+linkPageActive+'&via=portenartev&text='+titrePageActive;
var facebookShareLink = 'http://www.facebook.com/sharer.php?u='+linkPageActive+'&t='+titrePageActive;
var gmailShareLink = 'https://mail.google.com/mail/?view=cm&fs=1&tf=1&su='+titrePageActive+'&body='+linkPageActive;
$('a.share.twitter').attr('href',twitterShareLink);
$('a.share.facebook').attr('href',facebookShareLink);
$('a.share.gmail').attr('href',gmailShareLink);
clickLinkAllow = 1;
//contact from http://tutorialblog.org/how-to-create-your-own-ajax-contact-form/
$('#contactForm').submit( function(){
//hide the form
$('#contactForm').hide();
//show the loading bar
$('aside').append('<span class="loadingBar">loading...</span>');
$('.loadingBar').css({display:'block'});
//send the ajax request
$.get('contact_mail.php',{name:$('#name').val(), email:$('#email').val(), message:$('#message').val()},
//return the data
function(){
//hide the graphic
$('.loadingBar').css({display:'none'});
$('aside').append('<span>Merci pour votre mail, vous recevrez une réponse au plus vite.</span>');
});
//stay on the page
return false;
});
}, timeToLoadWaypoint);
}
//if url
if(!window.location.hash){
// animation d'entrée
var $blackLine = $('.black-line');
var $header = $('header');
var $frontContainer = $('.front #container');
$blackLine.css('left','-500px');
$frontContainer.css('top','-1000px');
$('.front .hideNavigation, header nav').hide();
$('header h1, section h1, article').css({'z-index':'-1','left':'-1000px'});
$header.css('background-image','url(img/headerBack41.png)');
$('.header2').css({'top':'-1000px', 'left':'500px'}).show();
setTimeout(function(){
$frontContainer.animate({'top':'0'}, 400, 'easeOutCirc');
$('.header2').animate({'top':'0', 'left':'0'}, 600);
}, 1300);
setTimeout(function(){
$('.front .hideNavigation, header nav').fadeIn(1200);
$('section h1').animate({'left':'0'}, 700);
$('article').animate({'left':'0'}, 800);
$blackLine.animate({'left':'798px'}, 700);
$('.black-line.bl2').animate({'left':'787px'}, 600);
$('.black-line.bl2.bl3').animate({'left':'776px'}, 700);
$header.find('h1').css({'z-index':'10','left':'940px', 'opacity': '0'});
$header.css('background-image','url(img/headerBack.png)');
$('.header2').fadeOut(100);
}, 1900);
}
//chargement du projet en temps normal
$('header nav a, .arrow').live('click', function(e) {
e.preventDefault();
if(clickLinkAllow === 1){
clickLinkAllow = 0;
$('body').css('overflow','hidden');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
var url = $(this).attr('href') + ' article, .arrow';
setTimeout(function(){
$('.load').html('loading...')
.css({'top':'-1000px', 'left':'490px' , 'opacity':'0'})
.load(url, function(){
$('.description').hide();
$('.arrow').hide();
});
}, 750);
setTimeout(function(){
$('.load').animate({'top':'0', 'left':'0' , 'opacity':'1'}, 1000);
}, 1300);
$('header nav a').removeAttr('rel');
var hash = window.location.hash.substr(1);
$('header nav a[href^='+ hash +']').attr('rel', 'active');
afterload(2000);
}
});
//bbq plugin
var clicked = 0;
$(window).bind('hashchange', function () {
var $body = $('body');
$('header nav a, .arrow').live('click', function(){
clicked = 1
});
if(clicked === 1){
clicked = 0;
} else {
//credit http://emanuelfelipe.net/themeforest/ajax-portfolio/
var hash = window.location.hash.substr(1);
var href = $('header nav a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html article, .arrow';
var $header = $('header');
$('.load').css({'top':'0', 'left':'0' , 'opacity':'1'}).load(toLoad, function(){
afterload(200);
});
$keyboardUse.addClass('full').show();
setTimeout(function(){
$keyboardUse.removeClass('full');
}, 10000);
$header.css('background-image','url(img/headerBack.png)');
$('.header2').hide();
$header.find('h1').css('z-index','999');
keyboardUseShowFirst = 1;
}
});
$('header nav a').removeAttr('rel');
$('header nav a[href^='+ hash +']').attr('rel', 'active');
$body.css('overflow-y','hidden');
setTimeout(function(){
$body.css('overflow-y','scroll');
}, 2000);
}
});
$(window).trigger("hashchange");
});
You can find it also here : http://jsfiddle.net/BXcHS/3/
This website is for my last exam in one week and I don't know what to do because it works perfectly on firefox and quite well with Opera.