Quick background:
I'm trying to make a mobile-friendly widget. My customers have non-mobile friendly pages, and this isn't likely to change anytime soon.
Attempted solution:
I figured this wouldn't be so bad. Just remove the widget from the page flow by using position:fixed, insert a viewport meta tag, and presto! ...right?
See this here fiddle.
The Problem:
The attempted a solution breaks on some mobile devices. When using a co-worker's phone, they were able to scroll away from the supposedly position:fixed element! (Phone in question is Android 4 or 5, so it's not the 2.1-2.3 bug.) I'm pretty sure this same behavior occurs on iPhones.
Essentially, it seems to be behaving as though it were position:absolute on the top-left corner of the page.
Attempted Solution Details:
I start by appending the viewport meta tag with javascript:
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
Let's just assume a very basic HTML template:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
and following CSS:
.hide-overflow {
overflow: hidden;
}
.overlay {
position: fixed;
-webkit-backface-visibility:hidden; /* Not that this does anything */
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table;
overflow: hidden;
z-index: 1000;
}
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
width: 800px;
height: 500px;
}
#media (max-width: 800px) {
.overlay * {
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
Of course, I didn't think this would be enough. I also added the following javascript to prevent scrolling on the <body> and outer-most <div> element:
// This only shows up when the widget is activated--it's removed on deactivation.
$('body').addClass('hide-overflow');// Just adds overflow:hidden, in case you forgot ;)
$('body > div').addClass('hide-overflow');
On my phone's (Galaxy Tablet Note) default browser, this works great! No problems! As mentioned before, on iPhones, questionable Android devices, etc., you can scroll away from the position:fixed element as though it were actually position: absolute. How do I get position:fixed to work?
The solution was a bit simpler than I'd thought. Using javascript, I was already appending my hide-overflow class to the body and first div element. That class looked like this:
.hide-overflow {
overflow: hidden;
}
What fixed my problem was changing it to the following:
.hide-overflow {
overflow: hidden;
width: 100% !important;
height: 100% !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
That's it! Just add this class to the <body> tag when the widget shows, and remove it when the widget is hidden.
Here's the working fiddle.
Related
My client wants me to create a textarea inside where there has to be a button like the below picture:
Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.
This has to be work like this 2nd picture on-click (like drop down):
Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.
To achieve this you can place both the textarea and button within the same div which has position: relative set on it. You can then make the button position: absolute and put it in the top right. Something like this:
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.textarea-container button {
position: absolute;
top: 0;
right: 0;
}
<div class="textarea-container">
<textarea name="foo">Some content here...</textarea>
<button>Menu</button>
</div>
I'll leave the styling for you to finalise as required.
Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.
* {
box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
display: none;
}
#textarea_container {
position: relative;
display: inline-block;
}
#textarea_container label {
background: blue;
color: white;
padding: .2em;
position: absolute;
top: 0;
right: 0;
padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
position: absolute;
top: 0;
right: 0;
overflow-y: scroll;
max-height: 15em;
min-height: 12em;
min-width: 10em;
border-left: 1.4em solid blue;
z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
display: block;
}
textarea {
min-height: 15em;
min-width: 40em;
}
#textareamenu:checked ~ label {
position: absolute;
right: 8.6em;
top: 0;
width: 1.4em;
z-index: 100;
}
<div id="textarea_container">
<textarea name="text"></textarea>
<input type="checkbox" id="textareamenu">
<label for="textareamenu">{}</label>
<div id="textareamenu_content">
<ul>
<li>First_Name</li>
<li>Last_Name</li>
</ul>
</div>
</div>
I want to have my footer at the bottom of the page. If the page is long enough, I want to have to scroll to the footer. If the page is too short, I still want my footer at the very bottom of the viewport. I don't mind the empty space.
How can I achieve this as painlessly as possible?
I tried navbar-static and nav-bar fixed and they both don't do what I am looking for. Is filling the space with a spacer div or something the only way or is there a more elegant way using CSS3 or some javascript?
Open to any and all ideas/suggestions.
This is the HTML I have. Nothing special coz I tried position: absolute;bottom:0px; and that put the footer at the bottom of shorter pages but in longer pages the bottom hangs in the mid of the page overlapping content.
This code puts the footer at the bottom of the page but in pages which are shorter than the window/viewport the footer sort-of hangs in the middle (at the end of the content).
.body
{
height: 100%;
}
.bottomMenu
{
background-color: #backgroundColor;
border-top: solid 1px (#backgroundColor - #292929);
}
This is an example from the official Bootstrap documentation.
And here is the code:
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Considering this css:
.stickToBottom {
position: fixed;
bottom: 0;
}
You need to detect if vertical scroll is present using javascript :
function isVerticalScrollPresent() {
return document.documentElement.scrollHeight !== document.documentElement.clientHeight;
}
Then add "stickToBottom" class to the footer if this function returns false :
var footer = document.querySelector('footer');
if (!isVerticalScrollPresent()) {
footer.className += " stickToBottom";
}
You can ignore css code and set footer style with javascript.
Check this JsFiddle https://jsfiddle.net/LeoAref/9v0r7h9y/
HTML
<footer>Footer Content</footer>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
padding-bottom: 25px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: red;
color: #fff;
padding: 7px 0;
text-align: center;
}
You may need to use box-sizing: border-box; if you won't use bootstrap
I'm building an app in Webkit for Android using HTML and CSS. I have fixed position header and sometimes fixed position footer(based on the module). When the content is more, I don't want the scrollbar to overlay the fixed header. Hiding it behind the header will also work. How can I achieve this without fixing height for the wrapper or using height: calc(); CSS for the wrapper?
I want app scrollbar to be like this:
Instead, it is like this now:
Here is the sample code:
.header {
position: fixed;
background-color: red;
left: 0;
top: 0;
width: 100%;
z-index: 999;
height: 60px;
}
.wrapper {
padding-top: 60px;
min-height: 100%;
height: auto;
}
.footer {
position: fixed;
background-color: grey;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
}
jsfiddle
You said that you don't want to fixe the .wrapperheight, but I think, you should fixe it, because there is no way to hide this scrollbar behind the div header element.
.wrapper {
margin-top: 60px;
min-height: 100%;
height: 320px;
overflow-y: auto;
}
Demo: http://jsfiddle.net/9hy6ybsz/4/
I'm not sure if my solution gonna work for you. You need to setup the height of your div="wrapper" and add CSS property overflow-y:
height: calc(100% - (60px + 50px));
Example, where 60px is the header height and 50px is the footer height
.wrapper {
margin-top: 60px;
overflow: auto;
background: yellow;
height: calc(100% - (60px + 50px));
display:block;
}
Working JSFiddle -> http://jsfiddle.net/9hy6ybsz/1/
Create a new div tag , which acts as a parent tag.
and apply scroll for it.
then create the header div and maintain Fixed position.so you can get the scroll over the fixed DIV!
How would I place the page content of the following example - http://jsfiddle.net/cq8dC/ to the right side of the nav sidebar, rather than behind it?
Update the style. Add style padding-left: 255px; to .horizontal
.horizontal
{
display: inline-block;
padding-left: 255px;
vertical-align: top;
white-space: normal;
width: 100%;
}
DEMO
jsFiddle Demo
First, you should add a container to your content. I've called it #Content.
Then I've added these stylings to the CSS:
body {
overflow: hidden;
}
#Content {
left: 240px;
right: 0;
top: 0;
bottom: 0;
position: fixed;
overflow: scroll;
}
This makes the #Content take the resting place in the page and be scrollable on its own.
Also I've updated the JavaScript
The root is now the #Content element and I'm using position() instead of offset(). I'm doing this because position() Get the current coordinates of the first element in the set of matched elements, relative to the offset parent (from the documentation).
I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.
Thank in advance!
This is not scrollable at all:http://maxeffenberger.de/test.html
This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html
This is the way I have achieved it:
html {
background-color: red;
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
/* prevent overscroll bounce*/
background-color: lightgreen;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
/* iOS velocity scrolling */
}
Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
The only soltuion that worked for me was this :
Put the content of your body inside a wrapper with the following style :
.wrapper {
position: absolute;
top: 0.5px;
left: 0;
right: 0;
bottom: 0.5px;
overflow-x: hidden; /* or any other value */
overflow-y: auto; /* or any other value */
}
the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.
if someone still has this problem with the hiding address bar, this is how its worked for me.
html, body {
height: 100%;
}
body {
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: 0 0;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: scroll;
}
.background {
position: fixed;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.
This does it for me in iOS 15. Though my web app disables zooming. Both the top bar and bottom bar are always full size.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
So for it was the problem, that I want to avoid the scroll effect on a certain element. For this element I just set:
.disable-scroll {
overflow-y: hidden;
touch-action: pan-x;
}
It works on Chrome and the Xiaomi Default Browser but not Firefox.
The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API
The following worked for me:
HTML
<body>
<div> This is the container for all content. </div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
⋮
}
body > div {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: CALC(100% + 1px);
overflow-x: hidden;
overflow-y: auto;
⋮
}
Another approach with customized scrollbar:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bdbdbd;
}
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-y: auto;
}
Use window.innerHeight to set boundaries for your site
You can set html and body or your wrapper to
var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
Keep in mind, that it needs to be updated on every resize!
window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar).
You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).
In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling.
Have a look at.
This is also my solution to problems like those above.
2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.
On mobile:
Android 7.1.1/ Chrome 61.0
iOS 9.3.5/ Safari
=> now the browser bar is no longer hiding on scroll- and swipe-events.
Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.
With a javascript window.scrollTo(0, 1); you can fix the problem.
Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.