jQuery scrollTop doesn't work on page load - javascript

I have a chat-based system I'm building in an MVC framework using jQuery/AJAX. When the page loads, it fills the chat window with the last x responses from the database.
I've looked everywhere for an answer, and can't find anything on this. Every alternative I've tried doesn't resolve it.
I use this function to scroll down to the bottom of my chat window;
function scrollToBottom()
{
var panel = $('.panel-body#main-window');
panel.scrollTop(panel.height());
}
This is my CSS:
.panel-body#main-window
{
overflow-y: scroll;
height: 550px;
width: 100%
}
This works fine when I bind it to an onClick handler function, but no matter what I've tried, it won't scroll to the bottom of my panel before the end of my $(document).ready(); call. So when the page is loaded, it doesn't scroll to the bottom of my container.
Tried this both in Firefox and Chrome and neither work. My function is being called, but when it's called inside $(document).ready();, it refuses to scroll to the bottom of my panel.
I also tried this function, which doesn't work either;
$(window).on('load', function(){
setTimeout(scrollToBottom(), 500);
});

you are not passing a reference of the function to your setTimeout, should be as follows I believe:
$(window).on('load', function(){
setTimeout(scrollToBottom, 500);
});
The way you are doing it, the function scrollToBottom will be executed as soon as that code gets evaluated.

Related

Lightslider - first img not showing until window resize

I am facing a strange thing. I am using lightslider to display my img-s. Now when I use it inside the regular dom, so the one that is open everything works fine. But sometimes I show a modal window on top of my regular one, and there I have the problem that the first img is never shown. I can scroll to the others, but when I comes to select the show the first one, it appears for a second and then dissapears. After some trying a found out that when I resize the browser window (by hand) for just one pixel then I am able to select the first img (if it was already selected but not visible it appears on its own)
Does anybody know what the reason could be, or if not, how can I simulate the behaviour of the window resize (that would be the quick and dirty solution) ?
Regards
you can put this $( window ).resize(); after the script. That should work. However you can use the following code snippet too:
onSliderLoad: function() {
$( window ).resize();
}, onAfterSlide: function() {
$( window ).resize();
}
don't use too many this script $( window ).resize(); ,because jquery will display error "exceeded RangeError: Maximum call stack size exceeded" , if it shows that error, just use one $( window ).resize();
Anyone still having this issue with a carousel.. A quick fix is by toggling between ID's, one of which has "height:0px" and overflow hidden. This one really really killed me so hope it helps someone out there.
#demo {
visibility: hidden;
overflow: hidden;
height: 0px;
}
#demo_visible {
overflow: hidden;
}
jQuery(document).ready(function ($) {
$(".arrow_link").click(function (e) {
e.preventDefault();
if ($(".demo").attr('id') == 'demo_visible') {
$(".demo").attr('id', 'demo');
} else {
$(".demo").attr('id', 'demo_visible');
}
});
});
you can put $(window).resize(); after the lightSlider() script.
You can use the following code snippet too:
setTimeout(() => {$( window ).resize()}, 500);
Here you can use setTimeout Function, because some time script executed before load the DOM.

My $(window).scroll is not responding (jQuery)

I need my scroll to tell me my scrollTop
So i have code kind of this:
$(document).ready(function(){
console.log('Hi!');
$(window).scroll(function(){
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
});
but cosnole is silent. She tell me Hi!, but she don't say Scrolling... anyway. I tried a lot. So now i am asking!
Try the below code,
See jQuery.scroll(). Make sure that scrollbar is visible otherwise the scroll event will not fire.
Also try changing your window listener to the div if you want to listen to a specific div scrolling.
$(window).scroll(function() {
console.log('Scrolling...');
var wScroll = ($(window).scrollTop());
console.log(wScroll);
});
body {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The script appears correct. However, I have this feeling that either you're not editing the correct file (it can happen), or you need to clear your cache as the browser is probably using a cached version of the file. Both Firefox and Chrome have an option to disable the cache when the dev tools are open. That way, you don't need to clear every time.

scrollTo event overridden when using jQuery Mobile

After loading, I want a section of the page to be display on the top, so the page scroll will be in that particular place. without the user see scrolling, I want him see immediately the right place on the page.
I load the JQuery mobile script and this override the document ready and load events.
If I remove the JQuery mobile Script It works perfect. But I cant remove It.
I tried:
$(window).load(function() {
window.scrollTo($("#selector").offset().top, 0);
});
As mention in - Stackoverflow question I tried:
$(window).load(function() {
setTimeout(function() { $.mobile.silentScroll($("#selector").offset().top); }, 100);
}
});
But It didn't work for me.
only in chrome the scroll is in the right place, but in IE, Firefox It didn't.
If I increase the timer to 1000 the IE work but the user see the top of page and after the scroll go to the right position. and this is not good.
I tried:
$(document).on("pagebeforeshow", '#selector', function() {
$.mobile.silentScroll(500);
setTimeout(function() {
$.mobile.silentScroll(500);
}, 100);
});
And it didn't work too.
What Do I need to do to, for scroll the page to the right place in all the browsers, Immediately after page had been loaded.
Thanks for helping.
I wrote sample code in this jsfiddle, it works in Chrome and Firefox
Here is code that I used:
$($("html,body").animate({scrollTop: 500}, 1000));
Hope this help
EDIT: if you want scroll to be in particular place immediately after page had been loaded then use this code (see plunker sample)
$(document).ready(function()
{
$("html,body").scrollTop(400);
});

DOM Events - Progress Indicator for Iframe location change

I am looking for a solution to show a progress indicator when an iframe page changes, but prior to the iframe loading completely.
There are 100's of pages on Stack Overflow going over the differences between jQuery ready(), JavaScript window.load, document.load, DOMContentReady, on('pageinit'...) and after reading the differences on all these various techniques I'm now a bit stuck on how to accomplish trapping the event within the iframe.
So far I have only succeeded in capturing when the iframe has changed once the DOM is built. I would like to be able to detect when a page is about to load so I could have some sort of indicator/spinner in my header.
This is what I have so far (capturing the iframe change on the onload):
.....
<iframe id="rssID" src="http://feeds.reuters.com/reuters/oddlyEnoughNews"
onload="blerg()" style="width: 800px; height:600px"/>
......
$(document).on('pageinit','#index', function(){
alert('pageinit'); //gets called on first load
});
$(document).on('pageinit','#rssID', function(){
alert('pageinit rssFeed'); //nothing happens.
});
function blerg() {
var myIframe = document.getElementById("rssID");
myIframe.onload = func;
};
function func() {
alert("changed");
}
http://jsfiddle.net/Gdxvs/
It would appear that pageinit is the correct path but I have no idea on how to trap that within an iframe. I would prefer not using jQuery, but I'm not sure that is possible without huge amounts of code.
One final: Do I need to use a die("pageinit");

popup window from right on the page load through jquery

i searched on internet for j Query or java script code that do some work for me like when the the page completely loads a popup window come out from the right side for some time and then disappears after some specific time but i couldn't succeed. i need yours help and favor in this regard.(send me any link of document related my question or any you tube or any other media link from where i could get help now and for future).
thanks in advance
you can use jquery' anitmate function Animate()
some thing like this: pseudocode
$('#yourDivorModalBox').animate({
right: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
Have you checked jQuery's ready() function? There's also window.open
$(document).ready(function() {
newwindow = window.open('http://www.google.com/','testme','height=200,width=300');
});
Then use setTimeout() to close the popup.

Categories