It's a simple window scroll that triggers when the user clicks on a nav item but for the life of me I cant seem to figure out why FF wont recognise it, I've read a similar Q&A's but they only recommend defining var's first which I've done, any help would be appreciated.
Heres the code:
$("#myNavbar a").on('click', function(){
var hash = this.hash;
//make sure this.hash has a value
if (hash !== ""){
//prevent default anchor click behavior
event.preventDefault();
//use jQuerys animate() method to add smooth scroll
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
} // end of if
});
This "works" in Chrome because Chrome implements the non-standard Window.event property.
As noted in the comments, you should use the event argument that is provided by jQuery event handler instead.
$("#myNavbar a").on('click', function(event){
...
event.preventDefault();
...
});
Related
After window resize my scroll function does not work as I described below (description shows how I want it to work):
I do window resize.
After window resize when I click the given menu item the window should scroll to...
corresponding to that menu item section offset().top-45 for max-width:480px (first breakpoint)
corresponding to that menu item section offset().top-90px for min-width 481px (second breakpoint)
https://jsfiddle.net/d1abevro/1/
It only works as expected for a given breakpoint without window resize (onload).
function displaymenu() {
if ($(window).width() <= 480) {
$('.c-main-menu ul').css({display: 'none'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-56
}, 800);
$('.c-main-menu ul').slideToggle();
});
$('.c-nav .menu-trigger').click(function() {
$('.c-nav .c-main-menu ul').slideToggle();
});
} else {
$('.c-main-menu ul').css({display: 'block'});
$(document).on("click", "a.c-main-menu__link", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $($.attr(this, 'href')).offset().top-90
}, 800);
});
}
}
That is caused because after each resize you append a new event. You should kill the old event an create a new one in order to prevent conflict with the old event. To get this approach the best way is to adding a namespace for your event, for example:
$(document).on("click.menuLinkEvent",".my_links", function(){});
And before adding the new event kill any old event it using unbind method and passing the event with the namespace:
$(document).unbind("click.menuLinkEvent");
Also looks like you understand correctly that the event will be appended each time after resize so you added a setTimeout function, but forgot to add a time, so however it will fire inmediately.
I made some changes to your fiddler. Let me know if it works as you expect
I am writing code for when a button is clicked it will animate going to a certain spot on the page. The problem is the first time I execute the code it is very laggy on the scrollTop animation. I am using w3schools code so I was surprised it was not working.
Here is the code I am using to animate the scrolling:
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (400) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
I am new to Jquery so for now I try to use already made code and understand it.
I was using a smooth scroll code but it prevents me from leaving the page if I don't remove
event.preventDefault();
However, if I do remove it it goes blank for a third of a second because it goes to the anchor and then executes the scrolling.
Here is the code:
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== ""){ //here is my problem I think
//Prevent default anchor click behavior
event.preventDefault(); //here is what makes me unable to leave page
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
} // End if
});
});
What I wanted to do was :
if(this.hash !== "" && this.split('#')[0] != location.split('#')[0])
But then the code just doesn't execute, I tried several other way, but as soon as I try to manipulate 'this', even if I put it in an other variable and then manipulate the variable, it won't work.
So, how do I access other pages with the "event.preventDefault()"?
Thank you
You can change that if statement to this...
if (this.hash !== "" && this.href.split('#')[0] != location.href.split('#')[0])
And that should work.
I am using the Sidr plugin to add a side-menu to my site when viewed on mobile devices. When a user clicks one of the side-menu items I want the menu to close and then animate down to the item they have selected. Essentially its a glorified internal links menu with a load of hash links to content with IDs.
Below is my current code for this purpose:
$(".mobile-nav button").sidr({source: ".sidr" });
$('.sidr nav ul').on('click', 'li a[href^="#"]', function(){
$(".mobile-nav button").click();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
return false;
});
This works fine when viewed on a desktop browser at say 400px wide. But when viewed on an actual mobile the .click() which effectively closes the Sidr menu does not work.
I believe this is because you can't "click" on mobiles but can anyone think of how I can get around this? Any help would be great.
Thanks
Use click touchstart:
$('.sidr nav ul').on('click touchstart', 'li a[href^="#"]', function(){
//rest of your code
}
I was having a similar problem with sidr on mobile devices. Finally,
I used
$.sidr("toggle","sidr-0");
rather than
$( "#sidr-0" ).trigger( "click" );
and it worked. It is apparently something to do with document ready on mobile devices and mobile browser use of ajax page loads causing the click() to be fired to early. I hope this helps.
I'm currently working on a site which uses the javascript code below to animate over to the target element inside an href. How would I go about getting the code to animate when the back/forward buttons are clicked based on it's history.
/* ------ Smooth Scroll ----- */
$(document).ready(function() {
"use strict";
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = $(this).attr("href"); //Get the target
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({ scrollTop: $(target).offset().top}, 2000, function()
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
You need to listen for the hash change. There are many ways to do this. You can poll for hash change or use HTML5's history api with onhashchange method to listen for changes. The easiest way to do this is probably using some kind of library that already takes care of both. I recommend jquery plugin if you are using jquery. If you are using angular js or other stuff then look for those plugins.
You would do something like
$(window).hashchange( function(){
// Do the animation here
})
You would no longer need to animate on a click.