Develop Reference

jQuery detect scroll reach bottom not working on mobile browsers

I' trying to detect when user scroll down bottom of a web page to load show some contents when user scroll to near bottom,
i use below function which works perfectly on all desktop web browsers, but its not worked on mobile browsers.
jQuery(function(){
jQuery(document).scroll(function () {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() -100) {
//show contents
alert('near bottom')
}
});
});
this is my working website i applied above http://discount.today/
when scroll down it shows some extra products, it working on normal browsers but not on mobile browsers,
can anyone help me to fix this issue please. i tried lots of solution which is on internet but no luck, thank you

Here is solution
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
alert("bottom detected");
}
add -100 so this will work on mobile

Mobile webs are different then desktop webs. The reason is very simple, The margins and padding are different.
Your website probably doesn't know how to detect that a change has occurred when running on mobile so as far as the web's concern, It didn't reach the bottom.
You need to use CSS 3 maybe or even jquery, to signal the web that a change in platform was made, The site is now smaller and so the bottom of the page.
As for how to do that, I am short in suggestions. This is the general direction though.

This is the solution which will work on every device:
window.onscroll = function() {
var d = document.documentElement;
var offset = d.scrollTop + window.innerHeight;
var height = d.offsetHeight;
console.log('offset = ' + offset);
console.log('height = ' + height);
if (offset >= height) {
console.log('at the bottom');
}
}

jQuery scrollTop not updating until after scroll

I'm having an odd issue that I'm struggling to figure out.
I have a simple, full page, scrolling site where I've tried to mimic position:fixed on certain elements by using jQuery scrollTop to apply a top value when the page is scrolled.
This process works fine in Chrome and FF, but in Safari (desktop and iOS) and also Chrome (Android) the scrolling is very jerky.
I've inspected the code in Safari on desktop and it appears that, unlike Chrome & FF, the scrollTop value isn't being applied to the top until after the scroll has finished, which is causing the jerkiness.
Is this something that can be rectified?
This is the small JS snippet I am using, as well as a link to an example Fiddle
var fullHeight = $(window).height();
$('.panel').height(fullHeight);
$(window).scroll(function () {
var text = $('.text');
var textOffset = text.offset();
var textViewOffset = $(document).scrollTop();
$('.text').css({
'top': textViewOffset
});
$('.panel:nth-child(2) .text').css({
'margin-top': -fullHeight
});
$('.panel:nth-child(3) .text').css({
'margin-top': (-fullHeight) * 2
});
});

Try $(window).scroll(function () { console.log('scrolled'); }); and you'll see that it logs only once in chrome and more often in firefox, that's the problem.
In some old chrome browsers you can enable smoothscroll in the settings.
Use a smoothscroll plugin.
Get rid of $(window).scroll and make a function that fires every 1-2millisecond

Test if page has a horizontal scrollbar (computer & mobile devices)

On a web page, I need to test if there is a horizontal scrollbar or not (so that I programmatically change the css of some other element). Is there some way to get that information using jquery (or pure javascript)?
I tested
function isHorizontalScrollbarEnabled() {
return $(document).width()!=$(window).width();
}
but it does not seem to work with all browsers (does not work for example with a recent Samsung phone I tested). I need it to work with all browsers, including recent mobile devices.
Thank you!
EDIT 1
I tested the solutions provided by plalx and laconbass, tested IE8, Firefox, Chrome and iPad. Works with IE, Firefox & Chrome but not as I want on the iPad.
The problem seems related to the zooming feature on mobile devices: even though, when I zoom in on the iPad, a horizontal scrollbar appears, document, window and document.body widths do not change (was also the same problem with the Samsung phone I tested earlier today).
Here is the code I used to test:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<div style="width: 500px; background: red;" id="test">click here to test</div>
<script type="text/javascript">
var i = 1;
$("#test").click(function(){
$(this).html("Test #" + (i++)
+ "<br>document width=" + $(document).width() + ", windows width=" + $(window).width()
+ "<br>document width=" + $(document).width() + ", body width=" + $(document.body).width()
);
});
</script>
</body>
</html>
Any idea how to detect the presence of a horizontal scrollbar that also works after zooming in/out on a mobile device like iPad?

//scrol 1px to the left
$(document).scrollLeft(1);
if($(document).scrollLeft() != 0){
//there's a scroll bar
}else{
//there's no scrollbar
}
//scroll back to original location
$(document).scrollLeft(0);
This works because JQuery won't be able to scroll the screen if no scrollbar is available

EDIT 2: I got a downvote because this doesn't work for nothing but the page so I built a generic solution based on #Pabs123's answer, only for fun:
function hasScrollX( selector ){
var e = $(selector), fn = 'scrollLeft';
return e[fn](1) && e[fn]() > 0 && e[fn](0) && true;
}
or even
jQuery.fn.hasScrollX = function( ){
var fn = 'scrollLeft';
return this[fn](1) && this[fn]() > 0 && this[fn](0) && true;
}
See it here, and how it can be easily adapted to detect vertical scrollbar presence.
EDIT: Tested & working on chrome and firefox. As jQuery team does the crossbrowsing work, i suggest the use of jQuery rather than native javascript.
I were curious about how to do this in an elegant way than the suggested previously (which actually work)
The following comparison work to me
$(document).width() > $(window).width()
you can see it in action with scroll bar and without it

Why does the Flash player crash in Firefox when setting a large height of it's container div?

I have an Flex application being loaded in an HTML Div:
<div id="flashContent" style="height: 350px;"></div>
like so
var so = new SWFObject("photoGallery.swf", "photoGallery", "100%", "100%", "9", "#FFFFFF");
so.addParam("wmode", "transparent");
so.addVariable("varLang", lang);
so.write("flashContent");
I wanted the div's height to adjust to the content of the SWF, so from Flex I use externalInterface.call() to this Javascript function:
function loadPhotoGallery(newHeight)
{
document.getElementById('flashContent').style.height = (newHeight + 70) + 'px';
}
Everything has been working fine until recently when the content (photo gallery) has gotten larger... Calling the loadPhotoGallery function with newHeight greater than 9000 crashes the Flash player using Firefox and Safari. It works fine with Chrome. (Tested on a Mac). Is there a maximum height that is causing the crashes?

You may want to try something like Photosynth. This program can organize thousands of pictures in a panorama-like viewing. You can have superb dimensions up to a gigapixel of processing power on the graphics accelerator.
Good luck!
Prolong the future of content delivery

need iFrame to not move when other part of page is scrolled

in my asp.net application I have a page that has a header, then in the body of the page a display of items that a person can choose. When someone chooses an item, an iframe apears on the right side of the body and shows details about the selected item. The iframe size and position is set using the size of the screen. In all desktop browsers - I am able to fix this using the below javascript.
<script type="text/javascript">
window.onscroll = scroll;
</script>
and here is the javascript function scroll
function scroll() {
var divT = document.getElementById('searchframe');
var divD = document.getElementById('detailframe');
if (document.body.scrollTop > 80) {
divT.style.top = document.body.scrollTop
divD.style.top = document.body.scrollTop
document.getElementById('detailframe').height = '100%';
}
if (document.body.scrollTop == 0) {
divT.style.top = 75
divD.style.top = 75
}
}
The scroll function is not even being called when testing using http://code.google.com/p/ibbdemo2/ - an adobe air ipad simulator. I was able to tell this by placing alerts, which pop up on every other browser and even in this simulator except for the scrolling function. In other browsers, placing an alert at the window.onclick line shows the alert, but on safari mobile the alert is not shown - meaning the window.onscroll event seems like it isnt even being triggered. Thank you for your help.
edit - i can also capture the scroll event using any of the below lines in all browsers, except for mobile safari
window.onscroll = scroll;
document.onscroll = scroll;
document.addEventListener("scroll", scroll, false);

Why do you have to do this in javascript?
Css:
position:fixed;
right: 10px;
top: 10px;
does not work?

This issue was only due to the emulator, actually works on device.

document.getElementById('iframeID').style.top = intVal;