I have this jQuery
$('.billing_info').click(function(e){
e.preventDefault();
if(($('.shipping_selection').length) > 0){
if ($('.shipping_selection:checked').length == 0){
$('.hide_error').show();
$("html, body").animate({ scrollTop: $(".hide_error").offset().top }, "slow");
$(".hide_error").effect("highlight", {}, 4000);
return false;
}else{
$('.billing_info').unbind("click");
$('.billing_info').click();
}
}else{
$('.billing_info').unbind("click");
$('.billing_info').click();
}
});
which works awesome in all browsers except in IE. I'm using IE8 and the user needs to click the button twice for the button to accept the click event even if there is one radio button $('.shipping_selection') clicked
Perhaps a bit of refactoring would help. Only prevent default when you need to, otherwise let the function pass through to the default submit event.
$('.billing_info').click(function(e){
if(($('.shipping_selection').length) > 0 && $('.shipping_selection:checked').length == 0){
e.preventDefault();
$('.hide_error').show();
$("html, body").animate({ scrollTop: $(".hide_error").offset().top }, "slow");
$(".hide_error").effect("highlight", {}, 4000);
return false;
}
});
Related
I have an application with a landing page that has many sections, and use Scrollspy for the smooth scrolling effect in the page. At the end of my navigation items I have a call to action button that takes the user to another page. However, because it's in my navigation items, when the page loads, Scrollspy is throwing an error on the link to another page.
Uncaught Error: Syntax error, unrecognized expression: https://example.com/page2
Is there anything I can do to tell scrollspy to ignore that link or is there some other way to get rid of that error? Thanks!
Here is the code I am using to initialize scrollspy:
(function ($) {
'use strict';
// SmoothLink
function initSmoothLink() {
$('.nav-item a').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
}
// StickyMenu
function initStickyMenu() {
$(window).on('scroll',function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".sticky").addClass("stickyadd");
} else {
$(".sticky").removeClass("stickyadd");
}
});
}
// Scrollspy
function initScrollspy() {
$("#navbarCollapse").scrollspy({
offset: 70
});
}
//MFPVideo
function initMFPVideo() {
$('.video_play').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
// Back To Top
function initBackToTop() {
$(window).on('scroll',function(){
if ($(this).scrollTop() > 100) {
$('.back_top').fadeIn();
} else {
$('.back_top').fadeOut();
}
});
$('.back_top, .footer_logo_link').on('click',function(){
$("html, body").animate({ scrollTop: 0 }, 1000);
return false;
});
}
function init() {
initSmoothLink();
initStickyMenu();
initScrollspy();
initMFPVideo();
initBackToTop();
}
$(document).on('turbolinks:load', function(){
init();
});
})(jQuery);
You can add in if statement to check if the href has a hash. If it doesn't have one, then it will just proceed as normal.
function initSmoothLink() {
$('.nav-item a').on('click', function(event) {
var $anchor = $(this);
if (this.hash !== "") {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
}
});
}
Scrollspy looks for all a tags in given container, takes href attribute and uses it's value as jQuery selector. Here is the possible solution using JS:
Page 2
Setting href and id is required in your case if you don't want to add additional checks in initSmoothLink() function.
How to simplify jQuery code.
If I have 1 page with several different blocks.
I need to duplicate this code multiple times to use different elements?
How to write 1 code for multiple blocks ?
$('.go_to').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500);
}
return false;
});
<a class="go_to" href="#elm">button</a> или <a class="go_to" href=".elm">block-scroll</a>
$('.go_to-1').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500);
}
return false;
});
<a class="go_to-1" href="#elm">button</a> или <a class="go_to-1" href=".elm">block-scroll</a>
$('.go_to-2').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length != 0) {
$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500);
}
return false;
});
<a class="go_to-2" href="#elm">button</a> или <a class="go_to-2" href=".elm">block-scroll</a>
Given your example, the simplest way is to select multiple elements with jquery using a comma separated list, and define the click handler all of them at once:
$('.go_to, .go_to-1, .go_to-2').click( function(){
//on click code
});
I am assuming you need different classes for the anchors, but if not, you could just give them all the same class (for example class="go_to") and use
$('.go_to').click( function(){
//on click code
});
So, this script is on my footer.php, and when button is pressed it redirects to homepage instead of top.
$(document).ready(function() {
$("#arriba").click(function() {
return $("html, body").animate({
scrollTop: 0
}, 1250), !1
})
});
UPDATE:
Thanks so much all, I found the solution, the code above was inserted into a php instance, I created a new javascript instance out of the php and it's working fine all the codes presented here!
You need to use preventDEfault to stop behavior of your button or anchor tag:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
$("html, body").animate({
scrollTop: 0
}, 1250);
})
});
EDIT:
try also this:
$(document).ready(function() {
$("#arriba").click(function(e) {
e.preventDefault()
window.scrollTo(0, 0);
})
});
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.
I have noticed that if i click the ''Back to Top" button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?
my code is:
Scroll
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("html, body").stop();
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$.clicked = false;
if ($.clicked == false){
$('.scrollup').click(function(){
$.clicked = true;
$("html, body").stop().animate({ scrollTop: 0 }, 600);
return false;
});
}
});
</script>
As you said you click multiple time so event will be fired mulitple times so you need to stop animation function,
So edit your code as below,
$("html, body").stop().animate(
--------------^^^^^^^^----
OR edit code for scroll
$(window).scroll(function(){
$("html, body").stop();
$(function() {
$('button').hide();
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
});
This should work.
I had a similiar issue.
I just solved it with a simple check:
$('.scrollup').click(function(){
if ($(document).scrollTop() != 0) {
$("html, body").animate({ scrollTop: 0 }, 600);
}
return false;
});
The problem, as already mentioned, is the click event firing multiple times. Because handling the event itself didn't work for me, I just tried to check if the current scroll value/position is already where I want it to be, et voilà: The weird behaviour vanished! :)