I'm trying to get the window to scroll through a sequence of divs. Here is my code, but it is quite targeted, and won't work for more than one div.
$('.down_arrow').click(function(e){
$('html, body')
.animate({scrollTop:$('.two')
.offset()
.top }, 'slow');
});
JSFIDDLE
Is there a way I can then go through each $('.container') on each $('.arrow_down') click?
$('.down_arrow').click(function(e){
$('html, body')
.animate(
{
scrollTop:$(this).closest('.container').next().offset().top
}, 'slow');
});
jsFiddle
$('.down_arrow').click(function(e) {
var next_container = $(this).parents(".container").next(".container");
$('html, body')
.animate({ scrollTop:next_container.offset().top }, 'slow');
});
JSFiddle
You should save the last scrolled container, and scroll to the next one.
Something like this:
var currentContainerIndex = 0;
$('.down_arrow').click(function(e){
var currentContainer = $($('.container')[currentContainerIndex]);
if (!currentContainer.size()) {
currentContainerIndex = 0;
currentContainer = $($('.container')[currentContainerIndex]);
}
$('html, body').animate({scrollTop:currentContainer.offset().top }, 'slow');
currentContainerIndex++;
});
Related
I'm trying to get the above effect. When I click on individual menu items, the active class changes correctly. However, I want to remove all active classes when I scroll the page. In summary, the active class only has to change when clicked, and delete when the user scroll the page
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500)
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(window).scroll(function() {
$('li').find('a').removeClass('active');
})
})
https://jsfiddle.net/m7pL4y2p/5/
I ended up with this solution which is not optimal but it seems to work
$(document).ready(function() {
$('li').click(function() {
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500).promise().then(function() {
// Animation complete
console.log('complete');
// Need a timeout because this handler is fired before scrollTop reach the final position
window.setTimeout(function() {
$(window).scroll(removeAllActiveClasses);
}, 100);
});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
});
function removeAllActiveClasses() {
$('li').find('a').removeClass('active');
}
$(window).scroll(removeAllActiveClasses);
});
here is the fiddle
Remove scroll and use wheel method.
I hope the below simplified code helps you.
$(document).ready(function() {
$('li a').click(function(event) {
var offset = $($(this).attr("href")).offset().top;
$('html, body').animate({
scrollTop: offset + 'px'
},500);
$('li a').removeClass('active');
$(this).addClass('active')
event.preventDefault();
});
$(window).on('wheel', function(event){
$('li a').removeClass('active');
});
});
Try changing "window" to "document" just as in:
$(document).scroll(function() {
$('li').find('a').removeClass('active');
})
try to change this
$(window).scroll(function() {
$('ul > li > a').removeClass('active');
})
to this you have to bind scroll
$(window).bind('mousewheel',function() {
$('.active').removeClass('active');
});
Well, so it requires another aprox. The fact is that "annimation" is an asynchronous function, so you need a flag (automScr) that tells the on window scroll program to delete the class or not.
So you put atomScr to true when pressing over menu item, and set to false when the scrolling animation is done.
Keep a look on the "console.logs" messages.
Hope this works!
$(document).ready(function() {
var automScr=false;
$('li').click(function() {
automScr=true;
var $href= $(this).find('a').attr("href");
var offset = $($href).offset().top;
$(window).off('scroll');
$('html, body').animate({
scrollTop: offset + 'px'
},500,null,function(){setTimeout(function(){automScr=false;},1)});
$('li').find('a').removeClass('active');
$(this).find('a').addClass('active')
return false;
})
$(document).scroll(function() {
if (!automScr){
console.log ("no automscr");
$('li').find('a').removeClass('active');
}else {
console.log ("automscr");
}
})
})
I am creating a form where i have many child forms to submit,so i have used a jQuery functionality where each submit a msg will show at the top of the page ,now what i want,on each submit the page will scroll up to the div where that jQuery is calling .Here is my code
var url = "<%=addPersonalDetailsURL%>";
var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {
$('html, body').animate({
scrollTop: $(".success").offset().top
}, 800);
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("$$##$$##");
address1 = applicationArray[0];
address2 = applicationArray[1];
city = applicationArray[2];
primaryPhone = applicationArray[3];
}
jQuery.getJSON is giving some result where on the basis i have to use that functionality.So can you tell how i should modify your solution
You should need to get your element's top position in the page and move the scroll to that position. Something like the code below:
jQuery(window).scrollTop(jQuery(".success").offset().top);
Note that the code above will move to the first .success position. If you have to reference a specific one, add the index in the selector, for example:
jQuery(window).scrollTop(jQuery(".success:eq(1)").offset().top);
You can do that with this function:
$("button").click(function () {
$('html, body').animate({
scrollTop: $(".whichElement").offset().top
}, 800);
});
Explanation:
If the button is clicked, we scroll the page to the element with class
whichElement and the duration of the scroll is 800ms.
Example:
$(".first-hey").click(function () {
$('html, body').animate({
scrollTop: $(".second-hey").offset().top
}, 800);
});
$(".second-hey").click(function () {
$('html, body').animate({
scrollTop: $(".third-hey").offset().top
}, 800);
});
$(".third-hey").click(function () {
$('html, body').animate({
scrollTop: $(".first-hey").offset().top
}, 800);
});
.divide {
height: 1300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first-hey">First hey</button>
<div class="divide"></div>
<button class="second-hey">Second hey</button>
<div class="divide"></div>
<button class="third-hey">Third hey</button>
I'm trying to make a scrollTop to my div element, but not exactly where it is. I want
to go 20px before my div element. I think i can explain better showing my code for you:
HTML:
<div id="arrow-down">Click here and go to content!</div>
<div id="content">The content is here!</div>
JQuery:
I already have a code that is working fine, but i want to make it diference.
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content").offset().top
}, 800);
});
});
This code takes me to the div#content, but i want to go 20px from the top of this!
Something like that:
$(document).ready(function() {
$('#arrow-down').click(function() {
$('html, body').animate({
scrollTop: $("#content" - 20px).offset().top
}, 800);
});
});
Well, i dont know if its look confused... I hope u guys can help me!
You can do this:
$('html, body').animate({
scrollTop: $("#content").offset().top - 20
}, 800);
$(document).ready(function() {
$('#arrow-down').click(function() {
$('body').animate({
scrollTop: $("#content").offset().top-20
}, 800);
});
});
try this
I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?
alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/
It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/
I've the following function:
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
It toggles a div and scroll the page down. The problem is that everytime the user toggles the page scroll down again...how could I run this animate function only at first click?
Use a flag or set a data attribute to make sure the scrolling animation only occurs on the first click.
var flag=true;
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
if (flag) {
$('html, body').animate({scrollTop: '600px'}, 800);
flag = false;
}
});
I'm guessing #div2 should still toggle, but that it just should'nt scroll on every click?
jQuery .one() http://api.jquery.com/one/
$('.link1').one( 'click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
use the .one function to bind an event that fires only once.
$('.link1').one('click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
The following works with JQuery.
The CSS used:
.cpos {
position: relative;
top: -1.65em;
left: 1.8em;
}
The JQuery used:
var p=null; /* Initialize variable p. */
p=$("b").detach(); /* Detach every possible <b>b</b>-tags. */
var p=$("<b>Console loaded!</b>").addClass("cpos"); /* Do anything, like adding class. */
p.appendTo("#container"); /* Append new data to the anchor container. */
Maybe you could use this for reference when animating. ;)
You could unbind that click handler at the end of the handler so that it never triggers again:
$('.link1').off('click');
Use a flag
var noRun = 0
$('.link1').click(function(){
if(noRun==1) {
return
}
noRun = 1
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
You can save a simple "token" to check if is the first time that click is fired in this way:
$('.link1').click(function(){
if(!$(this).data('isFirstTime')) {
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
$(this).data('isFirstTime', true);
}
});
This should prevent further click
This should do it
(function(){
var first=true;
$('.link1').click(function(){
if (first){
first=false;
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
}
});
})();