I was wondering how I would use this method:
$('[data-jump-spy]').each(function(){
var dataObj = .data('jump-spy');
$(this).onclick ({
scrollTop: $("#" + dataObj ).offset().top();
});
});
to attach it to a link like so:
Who we are
....
....
....
....
<div class="box radius box-grey --animate" id="divContentThatsFarDownPage">
....
</div>
Final Solution can be found below
This function will allow you to code your website more easily. Simply type <div class="whatever iconArrow-to-Content LinkText-to-Content Img-to-Content" data-jump-spy="page-content"
$('[data-jump-spy]').each(function(){
var dataObj = $(this).data('jump-spy');
$(this).click(function() {
$("html, body").animate({
scrollTop: $("#" + dataObj ).offset().top
}, 1000);
});
});
A couple of changes
$('[data-jump-spy]').each(function(){
var dataObj = $(this).data('jump-spy'); // needs $(this) at beginning since .data needs to run on some object
$(this).click(function(){ // used click instead of onclick and you need to pass a function as an argument
$('html,body').animate({scrollTop: $("#" + dataObj ).offset().top}); // use .top instead of .top() as it is a property and not a method
});
});
Related
I have the following code in jQuery:
$('body').on('click', '#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])', function (event) {
var section = $(this).data('nav-section');
if ($('[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top - 55
}, 500, 'easeInOutExpo');
}
and I need to rewrite it in pure vanilla JS. I have tried to do this, but I just got a lot of errors and don't know how to correct them...
This is my version of the code:
document.body.addEventListener('click', function (e) {
if (e.target.closest('body #gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {
var section = document.querySelector('data').dataset('nav-section');
if (document.querySelectorAll('[data-section="' + section + '"]').length) {
document.querySelectorAll('html, body').animate({
scrollTop: document.querySelectorAll('[data-section="' + section + '"]').offset().top - 55
}, 500, 'easeInOutExpo');
}
};
And the output is:
Uncaught TypeError: Cannot read property 'dataset' of null
If I try to let this line in jQuery to test that the rest part of the code is working, I get no errors, but it doesn't do anything also...
Assuming your html element has the data attribute data-nav-section="" what you are looking for would be:
var section = e.target.dataset.navSection;
e.target would be the equivilant of $(this) and dataset is not a function but a property having to use a camelcase naming convention when using dashes in the attribute name
You can use the matches method without the closest to test if the receiving element is the one delegated:
if (e.target.matches('#gtco-offcanvas ul a:not([class="external"]), .main-nav a:not([class="external"])')) {
var section = e.target.dataset['navSection'];
// ...
}
I have a script that does similar things for different id's and i'm pretty much certain this can be done in 1 script rather than 3, any suggestions are welcome.
$("#size-btn-one").click(function() {
$('html,body').animate({
scrollTop: $(".scroll-one").offset().top -100}, 2000);
});
});
$("#size-btn-two").click(function() {
$('html,body').animate({
scrollTop: $(".scroll-two").offset().top -100}, 2000);
});
});
$("#size-btn-three").click(function() {
$('html,body').animate({
scrollTop: $(".scroll-three").top -100}, 2000);
});
});
Combine the selector, you can make an and select by comma separation, like you did with html, body too. And you can extract the name from the element id by different ways, e.g with a simple replace.
$("#size-btn-one, #size-btn-two, #size-btn-three").click(function() {
// getting only the last part of the elements id
var id = $(this).attr("id").replace("size-btn-", "");
$("html, body").animate({
// append the 'id' to the selector class
scrollTop: $(".scroll-" + id).offset().top -100}, 2000);
});
});
$("#size-btn-one, #size-btn-two, #size-btn-three").click(function(){
var id = $(this).attr("id");
var number = id.substring(id.lastIndexOf("-"));
$('html,body').animate({
scrollTop: $(".scroll-"+ number).offset().top -100}, 2000);
});
});
As an alternative, I'd pair up the btn and the scroll- using data- attributes and not use id= for this.
<a href='#' data-link='1'>one</a>
<a href='#' data-link='2'>one</a>
<a href='#' data-link='xyz'>one</a>
<div data-link='1'>content 1</div>
<div data-link='2'>content 2</div>
<div data-link='xyz'>content 3</div>
This also means you can use semantic definitions, rather than just numbers (though you could with IDs as well ofc).
Then:
$("a[data-link]").click(function() {
var link = $(this).data("link");
var div = $("div[data-link=" + link + "]");
$('html,body').animate({
scrollTop: div.offset().top - 100}, 2000);
});
});
Normally, you'd also add a class, but left off to show the concept of pairing via data attributes.
$("#size-btn-one, #size-btn-two, #size-btn-three").on("click",function(){
var idLastPart = $(this).attr('id');
idLastPart = idLastPart.match(/one|two|three/)[0];
$('.scroll-'+idLastPart).animate({
//your animation
},300);
});
I am currently trying to implement a menu with many clickable buttons - appetizers, soups, etc. By using parameters, I can send the type of food to my JavaScript.
These are the buttons.
http://puu.sh/kugEs/5048221343.jpg
This is the code when I click on appetizers.
function scroll(type) {
var test = "('#" + type + "')";
alert(test); //('#appetizers')
$("html, body").animate({ scrollTop: $test.offset().top-150 }, 600); //this doesnt work
$("html, body").animate({ scrollTop: $('#appetizers').offset().top-150 }, 600); //this works
}
Of course I want to make it so that I don't have to manually use the working line. I want to use the one that doesn't work that it can be applied to all buttons running the same function with only different parameters.
How can I use the var test in order to run the line that doesn't work?
You should use $ and take care about your quotes::
var $test = $('#' + type); // Now it's a jQuery Object
In your example:
function scroll(type) {
var $test = $('#' + type);
$("html, body").animate({ scrollTop: $test.offset().top-150 }, 600);
}
You should define $test as an object, instead of a string.
function scroll(type) {
var test = $('#' + type);
alert($test.attr("id")); // appetizers
$("html, body").animate({ scrollTop: $test.offset().top-150 }, 600);
}
Try it with this code. It should work.
function scroll(type) {
var test = "('#" + type + "')";
alert(test); //('#appetizers')
$("html, body").animate({ scrollTop: $('#'+type).offset().top-150 }, 600);
}
Hey guys I'm having some issues scrolling to a an element that's dynamically created. You click on a search button, AJAX does its thing and updates the content. I have some code to dynamically find the ID and scroll to it. I am able to get the ID but I can't scroll to it. So far I have the code:
to_Scroll = $(this).closest('tr').attr('id');
$('html, body').animate({
scrollTop: $(to_Scroll).offset().top
}, 2000);
Which seems to work when I put it in the console with hard coded data. But doing it dynamically yields no results and no errors. Any help would be greatly appreciated
Below is some code which is done before I animate and scroll to an element:
dateChange(blah, blah2, blah3);
to_Scroll = $(this).closest('tr').attr('id');
$('html, body').animate({
scrollTop: $(to_Scroll).offset().top
}, 2000);
function dateChange(dateInput, nGuests, vName){
var promises = [];
var promise = $.ajax({
url: "/blah.asp?blah="+blah+"&blah2="+blah2+"&blah3="+blah3,
dataType:"html",
success: function(data){
table.html(data);
}
});
promises.push(promise);
$.when.apply($, promises).done(function() {
$( "#boatContent" ).removeClass( "loading" ); //Everything is done, remove loading gif
//do other stuff
}
to use ID again from attr you need to add # to it
$(document).ready(function(){
var to_Scroll = $(this).closest('tr').attr('id');
$('html, body').animate({
scrollTop: $( '#' + to_Scroll).offset().top
}, 2000);
});
I am stuck at jquery div jump to problem. The problem is that i am creating dynamic and dynamic div also say <div id="1_1_div"></div> i am using following jquery function to scroll to a particular div
<script>
$(document).ready(function (){
$("#click").click(function (){
alert ("test");
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 1000);
//});
});
});
</script>
My question is how to pass dynamic id to $("") Any help would be highly appreciated.
$(document).ready(function (){
$(".click").click(function (){
alert ("test");
var divID = '#' + $(this).attr('id') + '_div';
$('html, body').animate({
scrollTop: $(divID).offset().top
}, 1000);
});
});
And add <a class="click" ...
String Concatenation:
$("#" + this.id + "_div").offset().top
Note that there is no need to create unique IDs, DOM duo to having tree-like structure provides many different methods for traversing and selecting the target elements.
Since you are generating the elements dynamically you should also delegate the events, you can add classes to your elements and use the on method:
$('#aStaticParentElement').on('click', '.anchors', function() {
// TODO:
// select the target element either by traversing
// or by using an identifier
});
Visualize it here
First, since you have multiple links, use a class to group them:
HTML
Click me 1_1
Click me 1_2
Click me 1_3
jQuery
$(document).on('click', '.click', function (e) {
var theID = $(this).attr('id');
$('html, body').animate({
scrollTop: $('#' + theID + '_div').offset().top
}, 1000);
return false;
});
I did this with the slight assumption you were dynamically creating these links (hence the delegation). If they are static and won't change during page load, you can use $('.click').click(function()... instead of $(document).on('click', '.click', function()...
User this line
$("#" + $(this).attr("id") + "_div").offset().top
...