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");
}
});
Related
In my angular 8 application, I want to set a dynamic height to the text area when the screen loads.
I don't want to display a scrollbar either vertically or horixzontally.
I see many javascripts ways of doing by setting scrollheight. Is there a way we can do in angular.
Yes you can do that like below:
On component.html:
<textarea [ngClass]="getCSSClasses()"></textarea>
On component.ts
ngOnit(){
getCSSClasses() {
let cssClasses;
cssClasses = {
'height': 100px,
'width': 200px,
}
return cssClasses;
}
}
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')
};
});
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
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.
My plan is to have a content DIV, and inside that div I will load content via AJAX. I want the already loaded page to slide to the left, fade in the loading page with the circle.gif, and then fade in the new content and so on for the rest of the pages.
I have this code, but it goes to the top not the left, there is no scrollLeft I think.
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
And there is this one:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
Use animate with left property like this:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).animate({'left' : 'show'});
});
You can also use right, margin-left, margin-right with show as value depending on your needs.
To hide them back with horizontal sliding, use hide value instead.
Make sure that elements are hidden first and have set appropriate CSS values for those properties.