HTML Code:
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
CSS code:
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
I have two Questions
how can I bring black sidebar on top of header while both is fixed?
How can I show content div in whole screen if sidebar & header display is none?
enter image description here
First question:
How can I show sidebar on top of header while both are positioned fixed?
simple answer, you can use z-index = number (z-index = 100 for example),
reference: MDN
The z-index CSS property sets the order of a positioned element and its descendants. Overlapping elements with a larger z-index cover those with a smaller one.
example code:
.screen {
position: fixed;
start: 0;
}
#screenTop {
height: 100px;
width: 100%;
top: 0;
z-index:10;
}
#screenLeft {
height: 100%;
width: 100px;
top:100px; /*To Prevent Overlapping*/
z-index:9;
}
#content{
margin: 50px;
}
Second question:
How can I show content div in whole screen if sidebar & header display is none?
You will need to use a little javascript to perform this,
Add the following code before the end of your <body> tag,
then modify it for your needs.
<script>
function ToggleContent()
{
let screenTopDisplay = document.getElementById("screenTop").style.display;
let screenLeftDisplay = document.getElementById("screenLeft").style.display;
let toggleMargin =
(screenTopDisplay = "" || screenTopDisplay = "block") && (screenLeftDisplay = "" || screenLeftDisplay = "block");
let container = document.getElementById("container");
if(toggleMargin)
{
container.style.margin = "100px 0px 0px 100px";
}
else
{
container.style.margin = "0px";
}
}
</script>
*remember to call the function when you show/hide the .screen ToggleContent()
For your first Question add these 2 properties top:0px;(to start form to 0 of screen) and z-index:99; (to stack over the topbar) to sidebar id #screenLeft
For your 2nd Question after removing sidebar and top bar add this css
#content { margin-left: 0; margin-top: 0; }
it will remove margin form content div.
.screen {
position: fixed;
background: black;
}
#screenTop {
height: 100px;
width: 100%;
background: green;
}
#screenLeft {
height: 100%;
width: 100px;
top:0;
z-index:99;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }
#content {
margin: 100px;
}
<div id="screenLeft" class="screen"></div>
<div id="screenTop" class="screen"></div>
<div id="container">
<div id="content">
Test Possition of Text and whatnot1<br />
Test Possition of Text and whatnot2<br />
Test Possition of Text and whatnot3<br />
Test Possition of Text and whatnot4<br />
</div>
</div>
Related
using only css and html, is it possible to scroll away the inner div (overlay red div) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the red div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ . Or would some sort of JavaScript need to be used?
.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}
.headervideo #inner-box {
background-color: red;
height: 90%;
width: 100%;
}
<div class="headervideo">
<div id="inner-box"></div>
</div>
<div class="headerbreak">
<div>
position:sticky can approximate this:
.headervideo {
background: url(https://picsum.photos/id/1064/800/800) center/cover;
height: 100vh;
position: relative;
z-index: 2;
}
.nextsection {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
top: 0;
}
.container {
height:200vh;
}
body {
margin: 0;
}
<div class="container">
<div class="headervideo"></div>
<div class="nextsection"></div>
</div>
<div style="height:150vh"> more content later </div>
With CSS, you could use the hover event to detect a certain scroll position (e.g. on something just after the red div), but this would not work on touch only devices like mobile phones. It also wouldn't be reliable, as the cursor could be anywhere on the screen.
Using JavaScript to detect scroll position would be necessary. However, you could use the JavaScript only to add a class at different scroll positions and then do the rest with CSS. Here's a simple example:
var red = document.querySelector('#inner-box');
var begin = red.scrollTop;
var end = begin + red.clientHeight;
console.log(begin)
document.body.classList.add('in');
window.addEventListener("scroll", (event) => {
if(this.scrollY < begin) {
document.body.classList.add('before');
document.body.classList.remove('after');
document.body.classList.remove('in');
} else if(end < this.scrollY) {
document.body.classList.remove('before');
document.body.classList.add('after');
document.body.classList.remove('in');
} else {
document.body.classList.remove('before');
document.body.classList.remove('after');
document.body.classList.add('in');
};
});
.headervideo {
background-color: blue;
width: 100%;
height: 900px;
}
.headerbreak {
width: 100%;
height: 300px;
}
.headervideo #inner-box {
background-color: red;
height: 90%;
width: 100%;
}
body {
}
body.before {
background-color: lightgreen;
}
body.in {
background-color: lightpink;
}
body.after {
background-color: lightblue;
}
<body>
<div class="headervideo">
<div id="inner-box"></div>
</div>
<div class="headerbreak">
<div>
</body>
I'm facing problem with breaking the line on website. What do I mean?
HTML code
<main class="clearfix">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
With such HTML code I'd like to have:
fixed height on main element (for example 80vh)
fixed height for all the elements first and third 40vh + second 80vh
fixed width for first and third element 50vw
fluid width for second element - but this is main problem - second element has to be in the same place and grow horizontally (to create scroll on the bottom of the site)
Please find my codepen
I've added button that'll add pixels to second element - but it destroys my website.
I'm not sure if flexbox is better than floats.
I'll appreciate any tip.
Here is the snippet:
let counter = 0;
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".second").style.width = `calc(50% + ${counter}px)`;
console.log(counter);
counter++;
});
* {
padding: 0;
margin: 0;
}
main {
max-height: 80vh;
}
.first,
.third {
height: 40vh;
width: 50vw;
background-color: black;
float: left;
}
.third {
background-color: red;
}
.second {
height: 80vh;
width: 50%;
float: right;
background-color: blue;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
<main class="clearfix">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
I would suggest you to go with position properties. Since you have a little difference between the order of your DOM element and their visual representation, like 1,2,3 in the DOM, but visually it's more like 1,3,2.
However, in such situation float is your enemy. I'm not 100% sure about flex, AFAIK flex would keep all the elements inside the parent element and prevent the scrolling.
If you go with absolute positioning, (since you already have the heights and widths defined)
Apply:
position: relative to the main element, it will be the base point of the child elements if they are set to absolute.
overflow-x: scroll to the main element. it will allow you to scroll horizontally when you increase the width of your second element.
position: absolute on .first, .second, .third, as you have the height and width defined, now set their position accordingly, check the snippet, you'll get it.
Finally you're good to add more value to your width of the target element.
Tip: always keep a consistency in your css units, for example, if used vh / vw use this for similar elements at least, or if px / em / rem is used, try to use the same accordingly.
Check the snippet in full page mode
let counter = 0;
document.querySelector("button").addEventListener("click", function() {
document.querySelector(".second").style.width = `calc(50vw + ${counter}vw)`;
document.querySelector("#added").textContent = counter;
counter++;
});
* {
padding: 0;
margin: 0;
}
main {
overflow-x: scroll;
position: relative;
min-height: 80vh;
}
.first,
.third {
height: 40vh;
width: 50vw;
background-color: black;
position: absolute;
left: 0;
top: 0;
}
.third {
background-color: red;
top: 40vh;
}
.second {
height: 80vh;
width: 50vw;
background-color: blue;
position: absolute;
left: 50vw;
top: 0;
}
button {
margin: 30px 5px;
border: 1px solid #cecece;
padding: 5px 10px;
}
<main>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</main>
<button>Add</button>
<p><span id="added">0</span>vw Added to blue div's width</p>
I have am restricting the body to be the viewport's height and setting overflow: hidden on it. I am using jQuery to slide in a div that is absolutely positioned outside of the viewable area. The div that slides in is larger than the viewport and I would like for its contents to be scrollable within the viewport window.
Here's my fiddle: https://jsfiddle.net/hvew0qx4/1/
HTML:
<div class='buttons'>
<button id="toggle-results">Show Results</button>
</div>
<div class="map general-styling"></div>
<div id="results-area" class='movable'>
<div class="results general-styling"></div>
</div>
CSS:
body {
height: 100vh;
overflow: hidden;
position: relative;
}
.general-styling {
box-sizing: border-box;
width: 100%;
border-width: 10px;
border-style: solid;
}
.movable {
transition: all 0.3s ease;
position: absolute;
z-index: 44;
width: 100vw;
min-height: 100vh;
background-color: white;
overflow-y: scroll;
}
.map {
background-color: red;
border-color: pink;
height: 100vh;
}
.results {
background-color: blue;
border-color: orange;
height: 1000px;
}
.buttons {
position: absolute;
z-index: 1000;
top: 40px;
right: 40px;
}
JavaScript:
var $toggleResultsBtn = $('#toggle-results');
var $resultsArea = $('#results-area');
var $body = $('body');
$('.movable').css('top', $body.height());
$toggleResultsBtn.on('click', function(){
$toggleResultsBtn.text(function(i, text){
return text === "Show Results" ? "Hide Results" : "Show Results";
});
$resultsArea.css('top', function(i, value){
return value === '0px' ? $body.height() : '0px';
});
});
Set the height of the inner div to that of its container, and then add the property overflow-y: scroll to it.
Like so:
.container {
height: 200px;
overflow: hidden;
}
.elem {
height: 200px;
overflow-y: scroll;
}
If you want the div to scroll down at least 1000px (you want a scrollbar without any content in your div), you may want the outer div to have overflow-y set to scroll, like so:
.container {
height: 200px;
overflow-y: scroll;
}
.elem {
height: 1000px;
}
EDIT: I played around with your fiddle, and it looks like the biggest thing holding you back from what you are looking for is that you are using min-height for your .moveable div.
Change it to:
.movable {
transition: all 0.3s ease;
position: absolute;
z-index: 44;
width: 100vw;
height: 100vh; /* Change was made on this line */
background-color: white;
overflow-y: scroll;
}
min-height allows your div to grow. You clearly don't want that here, since if the div can grow, there is no need for scrolling.
EDIT 2: Added bonus - to get the scrollbar back from the edge of the screen, override the default margin given to the body:
body {
margin: 0;
}
EDIT 3: Here's an updated JSFiddle: https://jsfiddle.net/anishgoyal/hvew0qx4/4/
Im creating a page where my footer is growing on a certain event.
My problem is to make the footer grow according to how much space i got.
See my code or jsFiddle. I want the gray footer to grow all the way up to the colored elements with dynamic height (instead of like now, to 20%).
I guess i could count all the elements height above but that doesn't sound like a good solution.
jsFiddle here
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
position: relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
width: 100%;
height: 100px;
background: blue;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
width: 100%;
height: 120px;
background: green;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
width: 100%;
height: 60px;
background: red;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 10%;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
});
</script>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<button type="button" id="btn">Click Me!</button>
<div class="div1">I have a dynamic height</div>
<div class="div2">I have a dynamic height</div>
<div class="div3">I have a dynamic height</div>
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>
Instead of calculating the space of all the elements before, you can simply calculate the height of the most previous one and find the offset().top of that element. Using this approach I calculated the space (you have to make sure in your HTML the footer is directly after the previous element or slightly restructure my jQuery) and essentially you just toggle it between the default value and the default value + the space. Updated jsFiddle
$("#btn").click(function (e) {
var prev = $('.footer').prev(),
winHeight = $(window).height(),
calcTop = $('.footer').height() == Math.round(winHeight / 10) ?
(winHeight - prev.offset().top - prev.height()) : "10%";
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css({
'height': calcTop
});
});
On a side note I used CSS transitions to "animate" the change, not jQuery for performance issues and for ease of editablity
If you just want the position to change, not the height, you can do it by toggling the bottom value instead. Demo of that here
What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>
Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>
To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});
To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit
Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});