I have a grid based control panel, that takes the width and height of the entire screen.
the grid area is 2/2 and and the top left grid cell is left without an element to occupy its area.
Under neath the grid (also with the screens dimensions), I have another Element.
I would like the area underneath the grid to respond to mouse events in the empty grid cell.
I was in search for this topic. I had the same problem. I included a snippet which illustrates that an anchor is unresponsive while it is under an empty cell.
Is there a way to make the link responsive while the grid setup is laying over it?
<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>
<style>
body {
padding: 50px;
}
a {
border: 1px solid red;
}
.grid {
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
width: 100%;
height: 100%;
display: grid;
grid-column-gap: 8px;
grid-row-gap: 8px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
". widget2"
"widget3 widget4";
}
.grid-item {
position: relative;
background-color: silver;
}
.grid > div:nth-child(1) {
grid-area: widget1;
}
.grid > div:nth-child(2) {
grid-area: widget2;
}
.grid > div:nth-child(3) {
grid-area: widget3;
}
.grid > div:nth-child(4) {
grid-area: widget4;
}
</style>
</head>
<body>
Click me if you dare
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
Related
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 have made a splash screen that works as intended, and can be seen on this codepen:
https://codepen.io/dbake3452/pen/VwmeoGa
However when I copied that code onto my project, the splash screen no longer goes away after 3 seconds. I'm thinking there is conflicting code somewhere, but I have not been able to spot it
My code:
'/ ///HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" `enter code here`integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<link rel="stylesheet" href="css/kayportfolio.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
</head>
<body>
<div id="container">
<header>
<nav>
<img id="bun" src="images/kay logo.png">
</nav>
</header>
<div class="splash">
<img class="fade-in" src="images/pippinhop.png">
</div>
<main>
<i class="fas fa-caret-up"></i>
<img id="myth" src="images/mythologyproj.png">
<i class="fas fa-caret-down"></i>
<img id="fingerguns" src="images/fingerguns.png">
</main>
<footer>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
<script src="js/kayportfolio.js" async defer></script>
</body>
</html>
///SASS
$purple: #a9aaff;
body {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
display: grid;
grid-template-rows: 25vh 1fr 25vh;
header {
grid-area: 1 / 1 / 1 / -1;
display: flex;
align-items: center;
justify-content: center;
img {
width: 400px;
}
}
.splash {
width: 100%;
height: 100vh;
background-color: $purple;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12.5%;
}
}
.display-none {
display: none;
};
#keyframes fadeIn{
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
main {
grid-area: 2 / 1 / 2 / -1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
i {
font-size: 60px;
margin: 20px;
color: $purple;
}
i:hover {
cursor: pointer;
}
#myth {
width: 800px;
}
#myth:hover {
opacity: .5;
cursor: pointer;
}
#fingerguns {
width: 400px;
position: fixed;
left: 5%;
top: 49%;
}
}
footer {
grid-area: 3 / 1 / 3 / -1;
}
}
/// JS
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
Sass has to be compiled to CSS for your browser to understand it, in VS code, there are handy extensions to require this, for example live sass compiler.
Click the watch sass button on the bottom (or compile in any way you want).
You can see that the compiler added the CSS version to the project.
Now just include the CSS file in your html, for example (if CSS file is in the same folder):
<link rel="stylesheet" href="./style.css" >
Don't forget to put your JS code in <script></script> tags as well, or create a separate file and include it.
<script>
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
</script>
I am developing a simple UI using CSS grid layout and HTML. I have many grid rows and columns
This is how I have coded the CSS and HTML as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WP Desktop</title>
<style>
html, body, .grid-container { height: 98%; margin: 2; }
.grid-container * {
border: 2px solid blue;
position: relative;
}
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1.8fr 0.2fr 1fr;
grid-template-areas: "プロジェクトビュー Design-Area Design-Area Design-Area Outline" "プロジェクトビュー Design Source Others Outline" "プロジェクトビュー Terminal Terminal Terminal Properties";
}
.プロジェクトビュー { grid-area: プロジェクトビュー; }
.Design-Area { grid-area: Design-Area; }
.Design { grid-area: ""; }
.Source { grid-area: ""; }
.Others { grid-area: ""; }
.Terminal { grid-area: Terminal; }
.Outline { grid-area: Outline; }
.Properties { grid-area: Properties; }
</style>
</head>
<body>
<div class="grid-container">
<div class="プロジェクトビュー"></div>
<div class="Design-Area"></div>
<div class="Design" ><button id="btndesign" > Design </button></div>
<div class="Source"><button id="btnsource"> Source </button></div>
<div class="Others"><button id="btnothers"> Others </button></div>
<div class="Terminal"></div>
<div class="Outline"></div>
<div class="Properties"></div>
</div>
</body>
</html>
I have not given any text in DIv class. But the grid are displays test Design-Area
How to hide this text.
PS: I am new to CSS and HTML
Note: Updated with complete code snippet
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Remove the content:attr(class); property from the above class. You're now adding a content to the grid area that prints your classname.
Your problem is this part of the css, in which you show the attibute as the box's content, which you apparently don't want:
.grid-container *:after {
content:attr(class);
position: absolute;
top: 0;
left: 0;
}
Removing this removes the text in your layout.
There is no display of test Design-Area unless you specifically put it there. So just remove the text.
.grid {
display: grid;
grid-template-areas: "Design-Area area-two";
grid-template-rows: 1fr 1fr;
}
.Design-Area {
border: 1px dotted grey;
grid-area: Design-Area;
}
.area-two {
border: 1px dotted grey;
grid-area: area-two;
}
<div class="grid">
<div class="Design-Area"></div>
<div class="area-two"> Here is text, Design-Area has no text </div>
</div>
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;
}