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.
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
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();
...
});
I use iscroll 5 and jquery mobile 1.4.5 for cordoba android app. When I am scrolling page the i have tapped at first on start change state as it is clicked. I dont need it to be clicked if I am scrolling. I need it to change state to active only if I have tapped on it without scrolling.
How can I prevent li button item to change state, I have tried some code I found on stackoverflow but with no success.
$(document).on('tap', function(e) {
$('#lista li').removeClass($.mobile.activeBtnClass);
});
I tried this too, but is deprecated
$( document ).on( "mobileinit", function() {
$.mobile.activeBtnClass = 'unused';
});
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.
I've encountered an issue that's really just a giant mystery to me.
Check out my Web Design portfolio http://drootech.com, if you notice on a desktop the red "See what else we do." button works fine using the following code on a desktop browser. But the odd thing is it doesn't work on mobile.
$(document).ready(function(){
$("#seemore").on('click touchstart', function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#mrkting").offset().top - 85
}, 2000);
//});
});
I have another click/touchstart event is triggering the same scroll destination, is that why it's not working? And if so how would I get around this issue? Here's the other code that may be potential conflictual?
$("#info").on('click touchstart', function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("h2#mrkting").offset().top - 85
}, 2000);
$('#nav-menubg').slideUp('slow');
//});
});
Any help would be appreciated.
In the HTML portion of the code, on the elements you want to react when clicked on, add the javascript attribute onclick=""
ie.
<tag id="seemore" onclick=""></tag>