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]
});
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)
}
The image is fine if it's not full screen, but with full screen, there's a white area on the right (probably because the image is not large enough). How do I make the image automatically stretch so that its width covers the full screen?
CSS (see .landingImage):
.body {
margin: 0px, 50px;
}
.home {
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px;
}
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
margin: 0 auto;
width: 100vw;
}
index.js(built using nextjs):
<Head>
...
</Head>
<div id="wrapper">
<Image className={indexStyles.landingImage} src={orcas} />
</div>
<div className={indexStyles.home}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
></link>
</Head>
<body>
...
</body>
</div>
tried width: 100% also didn't work
from the doc
When using layout='fill', the parent element must have position:
relative
This is necessary for the proper rendering of the image element in
that layout mode.
What can you do is :
CSS :
add relative to the landingImage class and remove margin auto
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
width: 100vw;
position: relative;
}
Wrap Image on the div
<div className='landingImage '>
<Image
layout='fill' // required
objectFit='cover' // change to suit your needs
src='orcas' //
/>
</div>
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 recently discovered that my content in google chrome was not being rendered when it was longer than 16777216px in length.
jsfiddle
FULL HTML:
<html>
<head>
<style>
#content {
height: 16777316px;
position: relative;
font-size: 2em;
font-weight: 700;
}
#semi-hidden {
position: absolute;
bottom: 0;
background-color: #000000;
color: #ffffff;
height: 200px;
width: 50%;
float: left;
}
#hidden {
position: absolute;
bottom: 0;
background-color: #ffffff;
color: #000000;
height: 100px;
width: 50%;
float: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="content">Scroll Down ↓
<div id="semi-hidden"> The Bottom 100px of this DIV is not rendered. </div>
<div id="hidden"> This DIV is completly hidden. </div>
</div>
</body>
</html>
EDIT: This is due to Google Chrome not supporting layouts larger than 16777216 px.
Google Chrome represents laid out element positions using LayoutUnits, which can represent 1/64th the space of a signed int (2^31 / 64 integral values, or +/-16777216).
Google Chrome has no intention of supporting larger values in the near future.
Bug Report
I am trying to have a white round rectangle as the background in part of my website. I have attempted this with CSS, but I cannot get the round rectangle to stretch or shrink to the size of the div.
My other attempt is below using an img element. I can now get my image to stretch dynamically according to how much text is in the div BUT now I cannot place any text over it.
Do you know how I can get text to appear over my background in column 2?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body { background-color: red; }
.col1 { width: 20%; float: left; background-color: blue; }
.col2 { width: 60%; float: left; }
.col3 { width: 20%; float: left; background-color: yellow; }
#content { z-index: 10; }
#bk { z-index: 0; top: 0px; left: 0px; }
-->
</style>
</head>
<body>
<div class="col1">
abvdvf
</div>
<div class="col2">
<div id="content">
kjfdjkf
</div>
<img id="bk" src="i.png" width="100%" height="100%" /> <!-- Correctly resizes my picture but now I cant place any text over the pic -->
</div>
<div class="col3">
abvdvf
</div>
</body>
</html>
Try this as your #content CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
The technique is using a CSS3 rule called border-radius. You should look into it. Also, you don't normally need to set z-index.
The usual technique is to have four images for each of the rounded corners, and use CSS to place these on the edges of the box (you may need extra dummy divs to make this work.) Having the browser stretch an img is ugly, to say the least.