I have a search form, when search button is clicked, it fetches data via ajax request and append into a div. Now, I need to automatically scrolltop to the first result of the search when items returned.How do I do that please?
script to set scrolltop:
$("#search").on("click",function(){
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#view2').offset().top//instead of #View2, how do I make the page scrolltop to the first item appended in the for loop below?
}, 'slow');
});
When search button button clicked, results are fetched by ajax and appended into a div as below:
$("#searchform").on("submit", function () {
//$(this).find(':submit').attr('disabled','disabled');
var data = {
"action": "test"
};
$.ajax({
type: "POST",
dataType: "json",
url: "search/ajax2.php",
data: data,
success: function (data) {
$(".the-inner-return").append("<a href='search2.php?TID="+ tid +"'>")//need to set the scrolltop here
}
});
});
You can do in this way.
$("#search").on("click",function() {
$('html, body').animate({
scrollTop: $("#elementIdToWhichScroll").offset().top
}, 'slow');
});
Where elementIdToWhichScroll is your first element id.
EDIT CODE -
success: function (data) {
$(".the-inner-return").append("<a href='search2.php?TID="+ tid +"'>");
$('html, body').animate({
scrollTop: $("#elementIdToWhichScroll").offset().top
}, 'slow');
}
Use the following jQuery code
$( document ).ajaxComplete(function() {
$('html, body').animate({
scrollTop: $('#view2').offset().top//instead of #View2, how do I make the page scrolltop to the first item appended in the for loop below?
}, 'slow');
});
$("html, body").animate({ scrollTop: 0 }, "slow");
Use this code for after getting result data with your div id or class.
You need to move your animation into your ajax success callback. You can then use the :last pseudo to get the last anchor within that element (because you have appended it to the end, prepend would need :first).
http://jsfiddle.net/onj1yxdq/
success: function (data) {
$('.the-inner-return').append("<a href='search2.php?TID="+ tid +"'>");
$('html, body').animate({
scrollTop: $('.the-inner-return a:last').offset().top
}, 'slow');
}
Related
I am using this jquery ajax to receive msg from the database. But when someone trying to send a msg then it's coming here but could not auto scroll to the bottom. Any idea?
setTimeout(startRefresh,1000);
var myKeyVals = { some value };
var saveData = $.ajax({
type: 'POST',
url: "https://example.php",
data: myKeyVals,
success: function(resultData) {
$("#chatwindow").html(resultData);
//######################################
}
});
saveData.error(function() { alert("Something went wrong"); });
You can try something using animate & scrollTop inside ajax success like:
$("html, body").animate({
scrollTop: $(document).height() - $(window).height()
}, 'slow');
div {height: 900px; border:2px solid #333; padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv1">DATA FOR SAMPLE 1</div>
<div id="mydiv2">SAMPLE DATA</div>
<div id="mydiv2">SAMPLE DATA</div>
And to take care that new DOM elements are actually present before scrolling, you can try to add some setTimeout for few milliseconds and add this code inside it.
check this out: https://www.electrictoolbox.com/jquery-scroll-bottom/
The following Javascript will scroll the page to the bottom using jQuery:
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
Obviously you can change the animation speed ('slow' in the above example) to something else such as 'fast' or a numeric duration in milliseconds where the higher the number, the slower the animation.
To bind the scrolling function to a click done on an existing element in the page, do something like this, where #someID is the element's ID:
$(document).ready(function() {
$('#someID').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
});
You can try this trick. See if this helps you:
$("html, body").animate({ scrollTop: $(document).height() }, 20000);
setTimeout(function() {
location.reload();
},20000);
So I have the following code:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000);
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
When I click on the button it will scroll down to the div and flash its color (flash class). But what if the div is at the bottom of the page? I need the ode above to be changed so that the scrollTop is executed first AND is finished and then execute the next piece of code (the addClass and the setTimeout function). I assume I need to add a delay? Or something that checks whether the function is complete and if so, start the next one?
I think what you're looking for is animation callback. It's the forth parameter to the .animate() method: http://api.jquery.com/animate/
So in your case it would look like this:
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
},
2000,
'swing',
function () {
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
Btw. it's a good practice to cache a jQuery selectors for optimisation (jQuery won't be searching the DOM for the queried nodes, and running the its constructor function each time).
I also refactored this code a bit for readability and to separate the flashing functionality, so you can either use it conveniently in such callbacks (in which case the function will get the animated element as this object, or just run it directly, passing it any jQuery element (e.g. flash($('.anything')))
$("#btn1").click(function(event) {
event.preventDefault();
$div = $('#div');
$('html, body').animate({
scrollTop: $div.offset().top
}, 2000, 'swing', flashElement});
});
function flashElement(element) {
element = element || this;
element.addClass("flash");
setTimeout( function(){
element.removeClass("flash"), 1000;
}, 1000);
}
You just need a callback...
$("#btn1").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#div").offset().top
}, 2000, function(){
$("#div").addClass("flash");
setTimeout( function(){
$("#div").removeClass("flash"), 1000;
}, 1000);
});
});
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);
});
Working on a function with waypoint.js that takes the current div in the viewport and finds the next div when clicking a button.
Currently I’m getting a undefined value for the ‘next’. Not sure what could be wrong I guess the value can’t move from the waypoint function to the click function. Any help would be lovely.
$('.wrap').waypoint(function() {
var next = $(this).next();
$(".button").click(function() {
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});
i suggest you to chain it instead of doing this in the callback:
$('.wrap').waypoint().addBack(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
or could be something like this:
$('.wrap').waypoint().done(function(){
$(this).find(".button").click(function() {
var next = $(this).closest('.wrap').next();
$("html, body").animate({ scrollTop: next.offset().top }, 1000);
});
});
My question is a little tricky to explain, but I will try anyway. I have two horizontal tabs which, when you click on them, open a text box content. I'm trying to "focus" on them when they get clicked on. I've found a lot of material online but nothing works except for this code I'm showing below:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
If I only click on the first accordionButton it works. If I click on the second accordionButton for first, it works. If I click on the first accordionButton after I've clicked on the second it works, but if I click on the second accordionButton after I click on the first it doesn't work: the focus remains at the bottom of the page. I don't know what could be the problem, I'm making some attempt with the animate function (jQuery tutorial) and the offset function (jQuery tutorial) but I would be grateful even only to know what is going wrong...
UPDATE: a partial solution is
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(0);
});
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContent').offset().top
}, 500);
});
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
You have to put all that into a callback
$('.accordionContent').slideUp('normal', function(){
$(".accordionButtonone").click(function() {
$('html, body').animate({
scrollTop: $(this).nextAll('div .accordionContentone').offset().top
}, 500);
})
});
The solution is NOT elegant, but it works:
$(".accordionButton").click(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 10);
});
$(".accordionButtonone").click(function() {
$('html, body').scrollTop(458);
});
You are making it scroll down by using offset. remove the offset and it will stop scrolling down. also, instead of using individual selectors, why don't you write some code that utilizes jquery's 'this'
$(this)