I am working on some project, and after testing I have noticed that if the device has virtual buttons(on-screen), then div element that is supposed to be always fixed at the bottom, is behind those buttons. Basically I have lets say 2 divs, one is 100vw 100vh, the other one is 100vw wide and has height of 60px, instead of going above(stacked) the buttons, it goes beneath those buttons and is invisible unless the user hides his virtual buttons.
Is there a way to detect if the user has virtual buttons, and then just use some JS magic, or can it be fixed with a simple CSS solution?
Here is my code, and also JS Fiddle.
https://jsfiddle.net/hc9fvdgc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
.example {
width: 100vw;
height: 100vh;
background: url('http://dpanoply.s3.amazonaws.com/blog/9-best-sites-for-free-stock-photos/pexels.jpg');
background-size: 100% 100%;
}
.example > .toolbar {
width: 100vw;
height: 60px;
background-color: #b1b1b1;
border-top: 1px solid #3b3b3b;
text-align: center;
font-size: 11px;
position: fixed;
bottom: 0;
}
</style>
<body>
<div class="example">
<div class="toolbar">
<h1>TOOLBAR</h1>
</div>
</div>
</body>
</html>
NOTE: I do not own a smartphone with virtual buttons, so Im unable to test.
Related
I can't put the WEBgl canvas of p5js, with width 100% and height 100%, inside the <section> tag. This tag is inside the <main> tag, which in turn is inside the <body> tag. As per the html code.
My layout has a right area (right <aside>), a center area (<main>) and a left area (<aside> left). I want the canvas to be inside the central area, as shown in FIGURE 1 below. The p5js canvas works normally in html, but it is next to the <aside> tag on the right, as shown in FIGURE 2.
Another thing, in addition to placing the canvas inside the central area (<main> tag), I need it to have width: 100% and height:100% inside <main>.
OBS: the tag <canvas> would solve the problem of being inside main and with width: 100% and height:100%. However, I don't think I could use webgl or p5js on it. That's why I created the canvas via p5js.
FIGURE 1
enter image description here
FIGURE 2
enter image description here
The html code is:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste</title>
<script src="p5/p5.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<aside class="sides">
<p>RIGHT</p>
</aside>
<section id="_center">
<p>CENTER</p>
<!-- <script src="sketch.js"></script> -->
</section>
<aside class="sides">
<p>LEFT</p>
</aside>
</main>
</body>
</html>
The CSS code is:
#charset "UTF-8";
:root {
--cor0: #EEEEEE;
--cor1: #E0E0E0;
--cor2: #E0E0E0;
--cor3: #EDEDED;
--cor4: #C7C7C7;
--fonte-padrão: Arial, Verdana, Helvetica, sans-verif;
}
* {
margin: 0px;
padding: 0%;
}
html,
body {
height: 100%;
font-size: 1.5em;
text-align: center;
}
main {
background-color: white;
display: flex;
flex-direction: row;
height: 70%;
width: auto;
padding: 3px;
box-shadow: 1px 1px 1px black;
border: 0.5px solid black;
}
main aside.sides {
background-color: var(--cor2);
width: 5%;
min-width: 150px;
min-height: 500px;
}
main section#_center {
background-image: linear-gradient(to right, var(--cor0), var(--cor4));
width: 90%;
min-width: 500px;
min-height: 500px;
}
And sketch.js from p5js is:
function setup(){
cnv = createCanvas(600, 600, WEBGL);
}
//function to draw with or whithout loop, use redraw() if no loop
function draw() {
background(0, 110, 255)
}
I have a container div right-col inside of my hero div, that holds two inner divs. The inner divs are sticky and the container div is scrollable to give the illusion of cards sliding up.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="hero">
<div class="left-col">h</div>
<div class="right-col">
<div class="top">1st card</div>
<div class="bottom">2nd Card</div>
</div>
</div>
<div class="projects">a</div>
<div class="contact-footer"></div>
<div></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</html>
CSS:
body{
overflow: auto;
background-color: black;
}
.hero {
display: flex;
flex-direction: row;
}
.left-col{
width: 40vw;
background-color: black;
height: 100vh;
}
.right-col{
min-width: 60vw;
background-color: blue;
overflow: auto;
height: 100vh;
}
.top{
height: 100vh;
background-color: chartreuse;
position: sticky;
top: 0;
}
.bottom{
height: 100vh;
background-color: orange;
position: sticky;
top: 10%;
}
.projects{
height: 100vh;
background-color: crimson;
position: sticky;
top: 0;
}
However, the scroll bar is on the inside of the div right-col and independent from the main scrollbar. Is there a way that I can use the main scrollbar to scroll through the container div till it reaches the bottom then continues to scroll through the rest of the page? Possibly using js or jquery?
You could try adding the following css. It will make the inner scroll bar 0 width, so basically it will be invisible but still work.
.hero ::-webkit-scrollbar {
width: 0px;
}
If you need something more specific you could try using the scroll event to possibly synchronize both scroll bars or something.
I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller.
Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.
Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.
I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.
My code: https://jsfiddle.net/rjtpvhn1/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="split a">text left</div>
<div class="split b">text right</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
font-size: 20px;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width: 100%;
height: 100%;
padding: 30px;
border: 1px solid;
overflow: auto;
}
.gutter {
cursor: e-resize;
height: 100%;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
}
JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)
Split(['.a', '.b'], {
gutterSize: 9,
sizes: [50, 50]
});
I have implemented a simple web page with 2 sections. In each of this section there is text contains 2 lines. I would like to keep this text in center (margin left, top, right, bottom) in the section when changing the size of the screen (RWD). E.g. when I run this web page on the desktop the text in the section will be in center-center of the section and when I run this web page on the smartphone/tablet this text also be in the center of the section. Is it possible to do it? The code is below:
body {
height: 100%;
}
section {
height: 60vh;
}
section:nth-child(1) {
background: white;
}
section:nth-child(2) {
background: #f2efef;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
John is happy.<br><br>
Thank you.<br><br>
</section>
<section>
Have a nice day.<br><br>
Good luck.<br><br>
</section>
</body>
</html>
Thank you for help.
You can use flexbox grid for block alignment.
body {
height: 100%;
}
section {
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1) {
background: white;
}
section:nth-child(2) {
background: #f2efef;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
John is happy.<br><br>
Thank you.<br><br>
</section>
<section>
Have a nice day.<br><br>
Good luck.<br><br>
</section>
</body>
</html>
I hope this helps you.
in the CSS file you can use the following ways,
section {
text-align:center;
height: 60vh;
}
/* or */
section {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
Please give me a clue how to achieve that with pure css?
I need to make 2 divs side by side and I have some element that is adding to the one of that divs, but far below it's bottom. The page automatically resizes then, but these 2 divs heights stays unchanged. Is it possible to make them still fit whole page as it is described in the css, or the only solution is to specify their exact heights by script?
Or maybe there's another way to make such a layout with a div added by script?
Let me show it in the fiddle:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
Thank you!
Short update: I just found, that neither html nor body heights were not updated after adding, but browser lets scroll to the newly added div. It's very strange behavior even for the css/html
I'm not sure exactly what you're aiming for, but maybe overflow: hidden is what you need? It will make it so the div won't expand to include that addition...
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.top="2000px";
d.style.left="0";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html, body
{
height: 100%;
}
div#col1
{
background: #eee;
position: absolute;
top: 0;
bottom: 0;
left: 5rem;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
position: absolute;
top: 0;
bottom: 0;
left: 10rem;
right: 0;
overflow: hidden;
}
div#dd
{
position: absolute;
background: #f99;
border: 2px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>
If you don't need scrolling - try position:fixed instead of absolute.
You don't need all this CSS, all you need to do is to set their height in CSS explicitely:
first to height: 100vh
after you add new element, to height: calc(100vh + X) where X is distance from initial divs bottom to bottom of the added element.
EDIT: Another solution with removed position: absolute:
window.onload=run;
function run()
{
document.getElementById("b1").addEventListener("click", function()
{
var d=document.createElement("div");
d.id="dd";
d.style.width="50px";
d.style.height="20px";
d.appendChild(document.createTextNode("Test"));
document.getElementById("col2").appendChild(d);
});
}
html {
height: 100%;
}
body
{
display: flex;
min-height: 100%;
margin: 0 5rem 0 0;
}
div#col1
{
background: #eee;
width: 5rem;
text-align: center;
}
div#col2
{
background: #eff;
width: calc(100vw - 10rem);
}
div#dd
{
background: #f99;
border: 2px solid red;
margin-top: 2000px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Test
</title>
</head>
<body>
<div id="col1">
<input type=button id="b1" value="+">
</div>
<div id="col2">
</div>
</body>
</html>