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);
Related
I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.
function scroll(element, speed) {
element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
});
}
setTimeout(function() {
scroll($('html, body'), 900000)
}, 3000);
I was able to solve it using a more simple method:
window.onload = function () {
var Delay = $(document).height() * 65;
var DelayBack = $(document).height() * 5;
function animateBox() {
$('html, body')
.animate({scrollTop: $(document).height()}, Delay, 'linear')
.animate({scrollTop: 0}, DelayBack, animateBox);
}
setInterval(animateBox, 100);
}
I feel like your issue is related to this line...
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
Try changing it to the following to make it a callback and not an immediate invocation:
$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });
fetch data using php and ajax apply scroll function to window event
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getdata.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});
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');
}
I am building a news feed style page that will automatically scroll to the bottom, then wait and refresh the page and repeat the process.
The automatic reload is not working at the moment, and it is starting to bug me.
any help is greatly appreciated.
The Scrolling part works great
My code currently
<script language="javascript" type="text/javascript">
function scrolll() {
time = $('.message').length*3000;
$("html, body").animate({ scrollTop: 0 }, 0);
$("html, body").animate({ scrollTop: $(document).height() }, time,0, function() {location.reload; });
;
}
</script>
you can use
location.reload();
or
window.location.href = window.location.href;
but I think your problem with time,0
$("html, body").animate({ scrollTop: $(document).height() }, time, function() {location.reload(); });
and if I understood you can use setTimeout()
$("html, body").animate({ scrollTop: $(document).height() }, 100, function() {
setTimeout(function() {
location.reload();
}, time)
});
DEMO
First, try changing
location.reload;
to
location.reload(true);
(which will also avoid using the page cache on reload (ref)).
Next, consider the animate signature:
.animate( properties [, duration ] [, easing ] [, complete ] )
In your animation you are passing 0 as the easing name
.animate({...}, time, 0, function() ...
which will prevent the animation from starting. Either omit this altogether, or pass in a valid easing name such as "linear". See here for easing function names if you are interested.
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 have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.
Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});
You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO
No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.