My page shows a div after a radio button from id="yourgoal" is clicked. I'd like the page to scroll to that div only on the first time a button in "yourgoal" is clicked. Here is the code I am using. I don't want the page to scroll to the div after the first click though.
$('input:radio[name="yourgoal"]').change(function() {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
The problem is, it breaks the rest of the functions I have on .change(). I don't want to put all the functions after the scroll within the if and then again into an else {} statement as that seems like a ton of redundant code (it also breaks it)? How do I just do a simple if statement which doesn't affect the rest of the actions within the .change function?
Maybe there is a simpler solution and I am overthinking this?
Thanks in advance!
$('input:radio[name="yourgoal"]').one('change',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
I recommend using one. After first time event is triggered it is automatically removed.
If you have more code to go in that change that needs to stay after the first change, you can use event namespacing and attach more than one change.
$('input:radio[name="yourgoal"]').one('change.firstChange',
function () {
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// All your other code that stays attached
}
);
EDIT: Seems like one won't work since that 'one' event will be attached to each radio button that has name yourgoal, so it will scroll once for each first radio button click individually but you can do this if you only want to scroll the first time a radio button is selected and not upon the first selection of other radio buttons that all share the yourgoal name.
Fiddle: http://jsfiddle.net/31s3LLjL/3/
$('input:radio[name="yourgoal"]').on('change.firstChange',
function () {
$('input:radio[name="yourgoal"]').off('change.firstChange');
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
);
$('input:radio[name="yourgoal"]').on('change.allChanges',
function () {
// Other change stuff
}
);
You may use event.stopImmediatePropagation() to prevent execution of subscribed callbacks on specific event.
$('input:radio[name="yourgoal"]').one('change',function(event) {
event.stopImmediatePropagation();
if ($('#calculations1').css('display') == 'none') {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1500);
}
});
Just make sure that your code prepends all other change handler definitions.
Related
I have a button that does a "flyin" animation when click. But if the user clicks the button to deselect their choice i need to disable the animation.
The class changes when they have selected their choice from ".simple-button" to ".simple-button active".
jQuery(document).ready(function ($) {
$(".simple-button").on('click', function () {
//Scroll to top if cart icon is hidden on top
$('html, body').animate({
'scrollBottom': $(".view-my-beds").position().top
});
//Select item image and pass to the function
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.view-my-beds'));
});
});
It my experience, it's best to add a class on click. This means we can detect if it's in use, thus - making your problem simple to solve:
$('.simple-button').on('click', function ()
{
if (!$(this).hasClass('active')) {
$('html, body').animate({
'scrollBottom': $('.view-my-beds').position().top
});
var itemImg = $(this).parent().find('img').eq(0);
} else {
// do whatever without animation
}
})
I have a div whose id is 'regOrg' and initially it is hidden using a css
display: none;
The link to be clicked has an id of back.
On clicking a link I want it to show and smooth scroll down to it (the div regOrg).
This is the code i have:
function goBack() {
$("#regOrg").show();
$("#back").click(function() {
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom
}, 2000);
});
}
I call the function goback() on the onclick event of the hyperlink.
However it doesn't work. It only shows the div but doesn't scroll to it.
You are not executing the scroll. You are just binding it to the click event.
Try:
function goBack() {
$("#regOrg").show();
$('html, body').animate({
scrollBottom: $("#regOrg").offset().bottom + 'px'},2000);
}
EDIT: I added the missing "px" to it.
Try with something like this :
function goBack() {
$("#regOrg").show();
var myDiv = $('#regOrg');
var height = myDiv[0].scrollHeight;
myDiv.scrollTop(height);
}
It works on jsfiddle
You could take a look at this post too.
I use the jquery code below to let the page smoothly scroll to a specific div if it is not currently visible on the screen:
if (!$('#list-panel').visible(true)) {
$('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, 4000);
}
This works fine as need. What I want is if the user while scrolling hits any key on the keyboard or the mouse, it should stop the scroll so the user can interact normally. Currently, the user has to wait until the scrolling is totally done. Please note that by default, I need it to scroll slowly and smoothly as you see the code within 4 seconds, but if the user decided not to wait and hit the keyboard or the mouse then the scroll should stop immediately.
UPDATE
For handling multiple events, it's better to bind these events. For example, click starts animation and keypress stops it:
$('html, body').bind({
'click' : function(){
$('html, body').animate({ scrollTop: $('#d4').offset().top}, {duration:4000});
},
'keyup' : function(){
$('html, body').stop();
}
});
For mobile, you can add tap, swipe, etc... using jQuery mobile (https://jquerymobile.com/)
Code pen
https://codepen.io/anon/pen/RRworb
===
jQuery animate function has a step callback you could use to check user has clicked or pressed a key.
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Info: http://api.jquery.com/animate/
I've made an example here:
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
CSS
#d1, #d2, #d3, #d4 {
height: 300px;
width: 100%;
}
#d1{
background-color: red;
}
#d2{
background-color: blue;
}
#d3{
background-color: black;
display: none;
}
#d4{
background-color: yellow;
}
JS
if ( $('#d3').css('display') == 'none' ) {
$('html, body').animate({ scrollTop: $('#d4').offset().top}, {duration:4000,
step : function(){
$('html, body').on('click',function(e){
$('html, body').stop();
});
}});
}
CodePen
https://codepen.io/anon/pen/zBYoOj
The best approach would be registering an event when you start the animation, and later on unregister the event, so with the time it doesn't have too many registered events on your element
to stop animation you could use below code
$('html, body').stop();
On any specific event it becomes
$('html, body').on('click'), function() {
$('html, body').stop();
}
but now you want to do this when only animation starts, and you need to call that event handler only once so it should be
function stopScroll () {
$('html, body').stop();
}
$('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, {duration:5000}).one("click", stopScroll);
but also you want to deregister events after your code completes execution
function stopScroll () {
$('html, body').stop();
}
$('html, body').animate({ scrollTop: $('#article-panel').offset().top - 150}, {duration:5000, complete:function(){
$('html, body').un("click", stopScroll);
}}).one("click", stopScroll);
i have this code to animate my page with anchors
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
And this other code to make a delay when the link is presed
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
So when i have a link with demo the first code runs perfeclty but when i add the delay like this <a onclick="delay ('#contentexpand-1')">demo</a> the first code doesn't work just jump to the anchor.
Please help me! thanks in advance :)
The problem is that your animation is attached to <a> tags. That does not get triggered when you simply set the window location. The solution is to trigger the animate both ways:
// Smoothly scroll to a tag defined by <a name="anchorName">
function scrollTo (anchorName) {
$('html, body').animate( {
scrollTop: $( "a[name=" + anchorName + "]" ).offset().top
}, 500);
}
// Make all # anchors scroll smoothly to their targets
$(document).ready(function(){
$('a[href*=#]').click(function() {
var anchorName = $(this).attr('href').substr(1); // strip off #
scrollTo(anchorName);
return false;
});
});
// Scroll to an anchor after half a second
function delay (anchorName) {
setTimeout( function() { scrollTo(anchorName); }, 500 );
}
I am not convinced that your code for finding the offset was right so I adjusted it a bit to make it clearer.
The tag you want to scroll to is defined like this:
<a name="demo">demo</a>
Then you can choose either behaviour:
scroll smoothly to demo immediately
<a onclick="delay ('demo')">scroll smoothly to demo after half second delay</a>
i have this javascript so that when a user is scrolling on the page there will be a small icon to the side that will scroll all the way back up the page rather than manually scrolling. The button shows fine but when i click on it it is not going all the way to the top.
html
Scroll
Script
$(document).ready(function () {
$('#main').scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body, main_container, main").animate({ scrollTop: 0 }, 600);
return false;
});
});
problem is in the selectors, you are missing either # id selector or . class selector, to me it seems id:
change this:
$("html, body, main_container, main")
to this and see if it helps:
$("html, body, #main_container, #main")
//-------------^----------------^--------these selector notations