jQuery mobile panel usually convers part of the page from top to bottom:
<div data-role="panel">...</div>
The demos page has left table of content panel that is limited between the header and the footer - not from top to bottom:
http://demos.jquerymobile.com/1.4.3/intro/
How to limit the panel between the header and the footer?
How is it done in CSS?
You need first to calculate height of viewport, header and footer. Subtract height of both toolbars from viewport's height will give you the height of space between both toolbars. Also, push the panel down by overriding top style of the panel.
/* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
/* viewport */
screen = $.mobile.getScreenHeight(),
/* header - whether it's fixed */
header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
/* footer - whether it's fixed */
footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
/* math 101 */
panelheight = screen - header - footer;
/* update "min-height" and "top" */
$('#panelID').css({
'top': header,
'min-height': panelheight
});
Demo
Related
I am writing a Vaadin SearchDialog which contains :
A search TextField
A Grid containing search results
Two action buttons to confirm or cancel
Basically this is my layout structure :
Dialog
|- MainLayout (VerticalLayout)
| - - SearchField(TextField)
| - - ResultGrid (Grid)
| - - ButtonLayout (HorizontalLayout)
| - - - CancelButton
| - - - ConfirmButton
My issue is that I try to expand the grid's width to it's maximum size. I used Grid::setWidthFull and this code
resultGrid.getColumns().forEach(column -> column.setAutoWidth(true));
But it seems that the mainLayout width still set to the "ButtonLayout" :
My technical context is :
Vaadin flow 14.7 (full java)
Java 16
Spring Boot
VaadinDialog has a predefined padding applied to it. To remove it (let the Dialog take up full space, add the CSS below to your shared-styles.js file:
<dom-module id="my-dialog-styles" theme-for="vaadin-dialog-overlay">
<template>
<style>
[part="content"] {
padding: 0;
}
</style>
</template>
</dom-module>
Or add this so your shared-styles.css file to make it fullscreen
vaadin-dialog-overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
}
vaadin-dialog-overlay::part(overlay) {
width: 100%;
height: 100%;
padding: 0;
}
vaadin-dialog-overlay::part(content) {
padding: 0;
}
Grid::setWidthFull -- This means that you set the Grid's width to 100%, which in turn means that the Grid will use up as much or as little space as the parent layout has available regardless of its own contents.
If you want to expand the grid to accommodate all the contents, you don't want any width setting for it. I can't remember what the default is for Vaadin 14, but setWidth(null); should remove any previously set width.
For clearing the size settings in both directions at once there is also setSizeUndefined(), but that might not be optimal with your Grid (unless you have very few rows).
I think this is rather easy achieved, but I couldn't find out how to- and couldn't find much documentary about it.
I hate those 'scroll to top' buttons that appear after you already scrolled just 300px. Like I'm that lazy to scroll to top on myself. Therefor I would like to have a scroll to top button that only appears when you reached the bottom of the page (minus 100vh (100% viewport height).
Let's take in account the button is called .scrollTopButton and it's CSS is opacity: 0 and it's position: fixed on default.
How would I make the button appear when you reached the bottom of the page, minus 100vh and scroll along?
I was thinking of comparing the body height minus 100vh with (window).scrollTop().
var vH = $(window).height(),
bodyMinus100vh = ($('body').height() - vH);
if (bodyMinus100VH < $(window).scrollTop) {
$('.scrollTopButton').toggle();
};
Fixed it myself. Quite easy, honestly.
$(window).scroll(function () {
var vH = $(window).height(),
bodyHeight = ($(document).height() - (vH * 2)),
// When you open a page, you already see the website as big
// as your own screen (viewport). Therefor you need to reduce
// the page by two times the viewport
scrolledPX = $(window).scrollTop();
if (scrolledPX > bodyHeight) {
$('.scrollTopButton').css('opacity', '1');
} else {
$('.scrollTopButton').css('opacity', '0')
};
});
I have a page that hide the header if the window height is less than width thes is my code.
if ($(window).width()> $(window).height()){
$("#header").hide();
}
This is the output
As you can see the header is hide but the space where the header is not remove. My question is how to remove the space after I hide the header?
That is because you have data-position="fixed" in your header
so you need to add margin-top css to your content to what the header height is so that it moves up. you can do this dynamically. When you resize back you can reset the margin back to 0px
Demo
http://jsfiddle.net/scrva2hz/
Jquery
var headheight = $("#header").height();
$(window).on('resize', function(){
if ($(window).width()> $(window).height()){
$("#header").hide();
$(".ui-content").css("margin-top", "-"+headheight+"px");
}
else {
$("#header").show();
$(".ui-content").css("margin-top","0px");
}
});
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
We have a simple mobile app running in Mobile Safari (MS) on iOS. When the user scrolls down the page n pixels, a "top" button slides up from the bottom. The top button is fixed position. Problem is, when you start scrolling in MS, the navigation and toolbar UI is hidden. When you tap the "top" button, it reveals the bottom toolbar and a second tap is required to tap the "top" button. Is there any way to disable the default "tap on the bottom part of the viewport to reveal the toolbar" behavior so our top button works as expected (i.e. jumps to the top of the page with one click, not two?
No there is not. You can control the content of your webpage but not the behavior of the safari app.
The simple solution here is to add about 50px padding-bottom on your bottom most div. Safari seems to think that you are trying to access the bottom navigation bar, unless you click well above the bottom area. With extra padding at bottom, the user will click much higher on the page (not always, but in general).
Mika and typeoneerror are correct, but there is a workaround.
The best workaround solution I found (that doesn't require minimal-ui) is to force the bottom navigation of iOS Safari to always stay open/visible. That way, clicks to the bottom of the window never open the bottom navigation since it's always open.
To do that, you just need to apply some CSS and browser targeting with JS. Detailed steps on how:
How might one force-show the mobile Safari bottom nav bar to show programmatically?
Buttons aligned to bottom of page conflict with mobile Safari's menu bar
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
Here's how I'm dealing with this. With a position:fixed;bottom:0 toolbar of my own, I'm adding 44px offset to it (with a semi-transparent buffer zone) shortly after the safari toolbar is hidden (as this is the scenario where a tap near the bottom will reveal the toolbar again).
var min_inner_height = false;
var max_inner_height = false;
var passiveIfSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", {
get: function () {
passiveIfSupported = {
passive: true
};
}
}));
} catch (err) {}
document.addEventListener('scroll', function (e) {
var win_inner_h = window.innerHeight;
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
if (min_inner_height === false || win_inner_h < min_inner_height) {
min_inner_height = win_inner_h;
}
if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
max_inner_height = win_inner_h;
}
if (max_inner_height !== false && max_inner_height == win_inner_h) {
addElementClass(document.body, 'safari-toolbars-hidden');
} else {
removeElementClass(document.body, 'safari-toolbars-hidden');
}
}
}, passiveIfSupported);
This basically adds the .safari-toolbars-hidden class to the <body> sometime around when they disappear due to the user scrolling down the page.
At this point, I move my own toolbar up the page:
.my-bottom-toolbar {
bottom: 0px;
position: fixed;
}
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
.my-bottom-toolbar {
box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8);
transition: bottom 0.15s ease-in-out;
}
.safari-toolbars-hidden .my-bottom-toolbar {
bottom: 44px;
}
}
Hope this helps someone!
Instead of offsetting by a further 44px, you could also add an extra 44px of bottom padding if that works better for your case.
The best solution for me comes from this article.
My solution is with react but simply translated from the articles solution.
import { useWindowHeight } from '#react-hook/window-size/throttled';
//... inside your component
const height = useWindowHeight();
React.useEffect(() => {
const vh = height * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}, [height]);
body {
/* other styles */
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
Now when the innerHeight changes the hook is fired and the height variable is adjusted. The window's innerHeight changes when the safari url bar and bottom navigation are hidden so my app fits just right for both situations.