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);
});
Related
Having some problems with JavaScript / jQuery.
We're currently using a "shortcode" from Visual Composer (WordPress plugin) that creates (horizontal) tabs. We'we made some custom changes, but only visually (images/css).
We're trying to make it so that when you click on a tab you automatically scroll down to the content.
I've tried wrapping the script in
jQuery(document).ready( function({});
jQuery(window).ready( function({});
and also tried replacing .ready() with .load()
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
However! If you copy the entire script and paste it in the Console in Chrome/Firefox it will work as intended, based on that I'd say that the script it self works, it feels like it's not loading or registering or w/e.
Is there any (obvious) problem/mistake we've made?
I'd be happy to provide additional information if neccessary (e.g. the website address)
Any help would be greatly appreciated!
The VisualComposer plugin renders only after the document is ready, and that's why it's not working.
The best way to solve your problem is by using jQuery's event delegation, e.g:
jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() {
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
UPDATE
After your comment, I can see that the anchor tags inside your .pws_tabs_controlls_item elements already have a click event listener, and it also uses event.stopPropagation(), so my code above will never be executed.
The other way to solve your problem, is by dirty-checking when the element is available, e.g:
function waitForAvailability(selector, callback) {
if (jQuery('selector').length === 0) {
callback();
}
else {
setTimeout(function() {
waitForAvailability(selector, callback);
}, 0);
}
}
And then, you can use the code you were already using, something like that:
waitForAvailability('.pws_tabs_controlls_item', function() {
jQuery(".pws_tabs_controlls_item").children().click(function(){
jQuery('html, body').animate({
scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
}, 700, 'swing', function () {});
});
});
I am working on the code below. Why am I not able to hide the #legend
div by this way?
$("#icon").on("click",function(){
$("#legend").hide('slide', {direction: 'left'}, 1000);
});
I also tried the animation way but it didn't work either.
I think you have used the syntax wrongly.. Just try like,
$(selector).hide(speed,easing,callback);
Please refer the jQuery document here...
I have updated a fiddle here... Please check this..
Hint: Here callback is a function which is executed after the animation completes. But it is not mandatory.. you can also leave this parameter..
Updated a Fiddle here with jQuery UI animation...
You can use the animate() method for that,
$('#legend').animate({width: '0'}, 1000, function(){
$(this).hide();
});
Check the Demo.
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
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>
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');