I have this code for loading data. When user scrolls down over a half of screen, it continues to load data and append HTML to document. The problem is $(window).height() doesn't update on the fly after HTML changes so the condition expression goes wrong. How to fix it?
// Check scrollbar is down a half.
$(window).scroll(function() {
console.log("flag: " + flag);
console.log($(window).scrollTop());
console.log($(window).height());
if (($(window).scrollTop() > $(window).height() / 2)) {
if(flag == 0) {
console.log("Load data");
loadData(globalIndex, globalCount);
globalIndex += 40;
}
flag = 1;
} else {
flag = 0;
}
});
The height of your window isn't going to change unless you resize the browser screen. The problem with your formula is that in order to make it work, you'll need to load enough data to move your scrollbar back above the midpoint. If you don't, this formula will constantly return true, and you'll be calling loadData far more times than you care to.
As a potential workaround (depending on how long it takes to load your data), you can call loadData once your scrollbar reaches the bottom of your window. This condition will be true far less frequently than your current one, and it will only load data if your user is attempting to view it. If data loading is quick, then this is an easy solution. If it is a time-intensive process, and that's the reason you chose to load data once you got to the halfway point, then consider loading more data at a time and including a spinner or some other visual clue to inform the user that data is loading.
$(window).height()
will give you the browser's height (which is constant unless you resize your window). Try using:
$(document).height() - ($(window).height()/2);
instead...
Related
this question is different to this one, which detect if a browser is currently active.
I would like to detect more types of user behaviors, thing like
read throughout the article from beginning to the end very quickly
read throughout the article from beginning to the end slowly
Read a few lines and leave
search a keyword inside the article and read the part contains that keyword
These are most likely to be done using Intervals and a little bit of window screen height.
For example, if the user scrolls down, you can get the value of their screen's Y-axis then trigger a new Time class, then as soon as the user reached the bottom of the page. Stop the timer and get the value through AJAX and save it to your database.
For example:
window.onscroll = function() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
var time = setInterval(savetimeEverySecond(), 1000);
}
if($(window).scrollTop() + $(window).height() == $(document).height()) {
//clearInterval()
//I have reached bikini bottom, might as well do my ajax
}
};
hope you can help
My current project requires me to recall a set of functions on window resize so that I can keep the responsive nature correct. However the code I am using is rather twitchy as it calls the functions even if the window is resized by 1px.
I am relatively new to jQuery but learning more and more every day, but this is something I'm struggling to find a way to do.
In an ideal world I would like to call the functions when the window has been resized over a breaking point at anytime, for example:
say the breaking point is 500px, the initial load size is 400px the user resizes to 600px, so over the threshold so call the functions again.
It would also need to work in reverse... so window (or load) size 600px, breaking point 500px, resize to 400px call functions.
Here's the code I'm currently:
var windowWidth = $(window).width();
var resizing = !1;
$(window).resize(function(a) {
!1 !== resizing && clearTimeout(resizing);
resizing = setTimeout(doResize, 200);
});
function doResize() {
call_these_functions();
}
Cheers for the help guys
Thanks for the reply Zze
I am using something similar to what you've put, but I have it based within the start of my functions to filter what each thing does based on the window size. My problem is that these are getting called far too often and causing issues / twitchy behaviour.
For example I'm having issues on a tablet I'm testing on, when you scroll down, the scrollbar that appears on the right seems to trigger the window resize... causing functions to be called again that automatically accordion up or .hide() elements to their initial loaded state.
So my thinking is if I can test it's actually broken a set threshold rather than just what size the window is then it will be far more reliable.
There are some really handy jQuery functions available and it looks like you are very close to cracking this yourself. Hope this helps though.
$(window).resize(ResizeCode); // called on window resize
$(document).ready(function(e) { ResizeCode(); }); // called once document is ready to resize content immediatly
function ResizeCode()
{
if ($(window).width() < 500){
//insertCode
}
else if($(window).width() >= 500){
//insertCode
}
}
Update
If we are looking to 'restrict' the call time of this function, then you could add an interval which updates a bool every time it ticks, and then check this bool in the previous code:
var ready = true;
setInterval(function(){ready = true;}, 3000);
function ResizeCode()
{
if (ready)
{
// run code
ready = false;
}
}
But i would suggest storing the width and height of the window in a var and then comparing the current window with the var when the window is resized, that way you can tell if the window has actually been resized over 'x' amount or if it is that weird bug you've found.
Looks like i've found a solution that's going to do what i need with a little work (fingers crossed as i'm currently working on it), from http://xoxco.com/projects/code/breakpoints/
Thanks for the help Zze
I'm looking to refresh (reload) the page when the user's window size gets to 570px. I'm building a responsive website and need to do this (I haven't got time to go into detail about the why).
Basically, what I'm looking for is for the webpage to refresh ONCE when the window size crosses 570px width (once when it gets smaller, and once when it gets bigger).
I know this isn't ideal and it's something that should be avoided, but for this particular site, it will solve all my problems.
I would not do this myself, but you can use the following on page load (or document ready):
var threshold = 570;
var initialDiff = ($(window).width() > threshold) ? 1:-1;
$(window).on('resize',function(e){
var w = $(window).width();
var currentDiff = w - threshold;
if(currentDiff*initialDiff < 0) {
location.reload();
}
});
This works in both directions.
See this jsFiddle for an example where the indicator div is highlighted when the width crosses the threshold.
you can try this:
$(window).resize(function() {
if($(window).width()>570)
location.reload();//reload current page
});
I want a function to load only when the browser window width is greater than 940px.
I can do this on initial page load with:
if ( $(window).width() > 940) {
// my function
}
However, doing it the above way won't work on browser resize. I've been able to somewhat get it working on browser resize with the following:
$(window).resize(function() {
if ($(window).width() < 940) {
return;
}
else {
// my function
}
});
The problem with this, however, is once the function is loaded, it stays loaded whether the browser window is resized smaller or not. I need to clear the function out or un-load it whenever the window is smaller.
Is there a way to only load a function if the window is larger than 940px and completely remove it if the window is smaller than 940?
Any help would be much appreciated.
Do what you need in the first branch where you have return.
http://jsfiddle.net/KQSNE/
Take a look at Managing JavaScript on Responsive Websites.
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.