jQuery click event working except on mobile - javascript

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>

Related

jQuery ScrollTo plugin does not scroll to the element on Firefox

I'm using the scrollTo plugin by Ariel Flesler to scroll to an element. However this piece of code just doesn't run on Firefox (v 61).
$(document).ready(function(){
$('html, body').scrollTo(document.getElementById('login-link'), 800);
});
Here's a demo: https://jsfiddle.net/1n26s3dm/1/
Any idea what am I doing wrong?
Add the following code and make sure you have jQuery installed, because on your fiddle there isn't jquery
$('html, body').animate({
scrollTop: $("#login-link").offset().top
}, 800, function(){
// this is the callback after the animation is done
// you can emit events here
$("#login-link").trigger('click');
});
Your example on jsfiddle doesn't work. If you need jQuery you should select this library in JS window. Do not use Resources for include jQuery.
Try my example
Also try do not mix jQuery and Vanilla.js to work with DOM. Would be better if you change your code like this:
$(document).ready(function(){
$('html, body').scrollTo($('#login-link'), 800);
});

jQuery-animate() can't stop?

I have a button used to scroll back to the top of the page when clicked.
I want to have an animation effect.
$("#back-to-top").click(function() {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
When I click on the button, it did scroll back to top. However, I can't scroll down and it seemed when I scroll down the function is called.
When I use
$(document).scrollTop(0);
it works well.
What's the problem?
Here's my Fiddle
I'm new to Fiddle, it just didn't work!
Try like this
$("#back-to-top").click(function(e) {
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 800);
});
Update
According to your fiddle, you have to put this function outside of $(window).scroll( function() {});
Your problem is actually browser based, I tested this in Firefox which it didn't work. I then tested it in Chrome and it worked fine. Try using $('html, body').animate({scrollTop:0},500); instead.

Trigger a click event on mobile devices using JQuery

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.

How to animated/smooth scroll to div using scrolltop

Can someone help me turn my code into one that will animate the scroll. I've been researching and trying to do it myself but I'm obviously not doing something correctly.
Here is my JS:
$(function() { //When the document loads
$(".jrm-menu-whyus > a").bind("click", function() {
$(window).scrollTop($("#menu-jrm").offset().top);
return false;
});
});
Thanks!
It works fine, just want to animate the scroll.
Use jQuery.animate():
$("html, body").animate({scrollTop: $("#menu-jrm").offset().top});
jQuery.animate documentation

Trigger $(window).scroll();

When I call $("body").animate({scrollTop: someValue}); I want $(window).scroll(function() { }); to be called too. How can I achieve that?
I have tried with $(window).trigger("scroll") and $(window).triggerHandler("scroll") without success.
The code
EDIT:
Problem solved. There was an if in my $(window).scroll(function() { }); that caused the problem.
Just use:
// Trigger the scroll event
$(window).scroll();
Source:
http://www.w3schools.com/jquery/event_scroll.asp
https://api.jquery.com/scroll/
Apply it to both body and html as it is not consistent.. (for example, FF uses the html for scrolling while chrome uses the body)
$("html, body").animate({scrollTop: someValue});
demo at http://jsfiddle.net/vzyVh/
You can try below code - here i am scrolling to top of my div tag which has id "one".
$('html,body').animate({ scrollTop: $('#one').offset().top }, 'slow');

Categories

Resources