I could detect scroll reaches to bottom by using Javascript
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
// when scroll to bottom of the page
}
});
But I cannot find document.height in Dart.
How can I get height of document and compare with window.scrollY?
I think, although I always had trouble understanding the various heights, that document.body.clientHeight should work (i.e. I have used it once)
_updateScrollInfo([_]) {
if (window.innerHeight + window.scrollY >= document.body.clientHeight) {
print("at bottom");
}
}
window.onScroll.listen(_updateScrollInfo);
DartPad example: https://dartpad.dartlang.org/6fcfb715e4090a1aafe4
Related
In jQuery Mobile 1.4, why isn't $(window).scroll firing? Here's a non-working example trying to detect when the user has scrolled to the end of the page:
http://jsfiddle.net/5x6T2/
$(document).on('pagecontainershow', function () {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
This was all working fine in jQuery Mobile 1.3 prior to the deprecation of pageshow:
http://jsfiddle.net/Demr7/
$(document).on('pageshow', '.ui-page', function() {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom reached!");
}
});
});
Anybody know what to do?
You don't have to use any third party plugin to achieve infinity scrolling. You simply need to listen to either scrollstart or scrollstop and do some math.
What you need is $(window).scrollTop(), $.mobile.getScreenHeight(), $(".ui-content").outerHeight(), $(".ui-header").outerHeight() and $(".ui-footer").outerHeight().
When $(window).scrollTop()'s value matches the value of viewport's height minus content div's height plus toolbars height, it means you have reached the bottom of the page.
Note that you should remove 1px of retrieved height of each fixed toolbars.
Attach scrollstop listener to document and then define heights variables.
$(document).on("scrollstop", function (e) {
/* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
/* window's scrollTop() */
scrolled = $(window).scrollTop(),
/* viewport */
screenHeight = $.mobile.getScreenHeight(),
/* content div height within active page */
contentHeight = $(".ui-content", activePage).outerHeight(),
/* header's height within active page (remove -1 for unfixed) */
header = $(".ui-header", activePage).outerHeight() - 1,
/* footer's height within active page (remove -1 for unfixed) */
footer = $(".ui-footer", activePage).outerHeight() - 1,
/* total height to scroll */
scrollEnd = contentHeight - screenHeight + header + footer;
/* if total scrolled value is equal or greater
than total height of content div (total scroll)
and active page is the target page (pageX not any other page)
call addMore() function */
if (activePage[0].id == "pageX" && scrolled >= scrollEnd) {
addMore();
}
});
Demo (1)
(1) Tested on iPhone 5 Safari Mobile
So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?
I'm trying with the jquery-visible plugin but I can't get it to respond:
http://jsfiddle.net/mmRnq/124/
$('#test-button').on('click', function(e) {
$('#confirmDialog').popup('open');
// https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
if(!$('#confirmDialog').visible(true)) {
alert('Popup not fully visible - add overflow scrolling');
$('#confirmDialog').css('overflow-y', 'scroll');
}
});
You can use
overflow-y: auto
This makes the scrollbar only visible when it is needed.
Updated FIDDLE
UPDATE:
You can also just make the content of the popup scrollable so the titlebar remains in view:
#confirmDialog .ui-content {
overflow-y: auto;
}
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 120;
$('#confirmDialog .ui-content').height(maxHeight);
}
});
DEMO
I had a popup too large, although it was because of a searchable list. As I wanted to keep the search field at the top whilst scrolling the list only, I had to do this:
$("#confirmDialog").on({
popupbeforeposition: function (e, ui) {
var maxHeight = $(window).height() - 100 + "px";
$("#confirmDialog .ui-content").css("max-height", maxHeight);
},
popupafteropen: function (e, ui) {
var maxHeight = $(window).height() - 150 + "px";
$("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
}
});
Remember do not perform arithmetic on maxHeight once assigned as it's a string, so this doesn't work:
$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);
I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
A common thing we see in many mobile apps is when the user scrolls down the page the header disappears and when they scroll up the page the header appears. How do we achieve this in jQuery Mobile? (I'm answering my own question below)
/**
* Header scroll control
* When the user scrolls down the page hide the header, when they scroll up show it.
*/
var lastScrollPosition;
$(document).scroll( function() {
var scrollPosition = $(this).scrollTop();
// Scrolling down
if (scrollPosition > lastScrollPosition){
// If the header is currently showing
if (!$('[data-role=header].ui-fixed-hidden').length) {
$('[data-role=header]').toolbar('hide');
}
}
// Scrolling up
else {
// If the header is currently hidden
if ($('[data-role=header].ui-fixed-hidden').length) {
$('[data-role=header]').toolbar('show');
}
}
lastScrollPosition = scrollPosition;
});
Variation of Sean Bannisters solution, using Bootstrap 4 and with a transition:
JS:
var lastScrollPosition;
var headerHeight;
$(document).scroll( function() {
var scrollPosition = $(this).scrollTop();
if (scrollPosition > lastScrollPosition){ // Scrolling down
if ($('.sticky-top.show').length) {
$('.sticky-top').removeClass('show');
headerHeight = -$('.sticky-top').height() + 'px';
$('.sticky-top').css('top', headerHeight);
}
} else { // Scrolling up
if (!$('.sticky-top.show').length) {
$('.sticky-top').addClass('show');
$('.sticky-top').css('top', '0');
}
}
lastScrollPosition = scrollPosition;
});
CSS:
.sticky-top { transition: top 0.3s; }
Can anyone suggest some javascript code that will refresh the browser window when the window is resized to a specific height. Similar to CSS Media queries.
i.e if the browser max-height is 700px then refresh.
Thanks in advance.
I've recently been doing something similar, and there's a nice JavaScript function that I'm using:
var viewportwidth;
var viewportheight;
function resize() {
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
}
This will get the current height and width of the browser. If you want to check when the user is resizing the page and call the resize() function, just use a simple JavaScript command window.onresize=resize();
This is the basic function. From here it should be easy enough to make some changes to the code. For example, if you want the page to be refreshed only when the width becomes greater than or equal to 700, add something like this to the resize() function:
if(viewportwidth >= 700) {
window.reload();
}