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
...
Related
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 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
});
});
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've researched for the past 2 hours and cannot get this to work.
I am loading content via ajax and $(this).data is not working for me at all. If I change this to the actual class, then the content does load, however this is a portfolio so every button has a different url to load.
HTML:
<a class="button" href="#project-full" data-work-item="portfolio-open.html">View Project</a>
JS:
var loadUrl = $(this).data('work-item');
$(".button").click(function(){
$("#project-full").html(ajax_load).load(loadUrl);
$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
In theory, shouldn't the variable loadUrl grab the "portfolio-open.html" and pass it over to the loadUrl below? I am sure that I am missing something important, but from all the sources I've read this should work..
You need to put the loadUrl definition inside the click event handler, because $(this) should refer to the anchor element you've clicked:
$(".button").click(function(e) {
e.preventDefault(); // stop the default anchor action
var loadUrl = $(this).data('work-item');
$("#project-full").html(ajax_load).load(loadUrl);
$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
Don't forget to prevent the default anchor action (redirecting).
Here is what your code should be:
$(".button").click(function(e){
e.preventDefault();
var loadUrl = $(this).data('work-item');
$(this.href).load(loadUrl);
//$("html, body").animate({ scrollTop: $('#project-full').offset(0,100).top }, 1000);
});
I have made a simple webpage with lots of division. So to navigate direct to a division I have put a anchor on top like this :
First<br/>
Second<br/>
Third
And for smooth scrolling I have used javascript:
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
Now I want to add effect to the selected division. So when user click on an anchor, the page smoothly scrolls to the division and the selected division is highlighted for a second. Just like when we get any news in Stack Overflow inbox, and we click on it; the page lodes and the news item is highlighted for a short duration.
I want to do that thing to my page. Cause I'm having more then 18 divisions and they are all same.So it is necessary to differentiate the selected division.
Here is the example Fiddle : Fiddle For the Code
Any help would be appreciated. Thanks in advance.
In Your code $('html, body') returns 2 elements so animation will fire twice. If you include jquery.ui You will be able to do this:
$('a').click(function(){
var selector = $(this).attr('href');
$('html').animate({
scrollTop: $(selector).offset().top
}, 500,'',function(){
$(selector).effect("highlight", {}, 1000);
});
return false;
});
JsFiddle
This use opacity like example:
$('a').click(function(){
var el = $(this).attr('href');
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500, function(){
$(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)} );
});
return false;
});