Have div maintain screen width and height - javascript

I am looking to create a website in which it has a main div in which both the width and the height is always the size of the screen. No matter what is contained within this div it must contain this width and height.
If you look at this example of what I want.
My aim is for the navigation section to be contained in the large blue part on the left and for the main page content to be displayed within the white box and for this white div to only scroll sideways. I have searched for days on trying to get this to work but something always goes wrong. Examples of things I have tried are:
How to make the main content div fill height of screen with css
how to make a full screen div, and prevent size to be changed by content?
How to make a div to fill a remaining horizontal space?
If somebody can help with this or at least point me in the right direction for guidance it would be awesome. Thanks in advance.

1. Using CSS3 flexbox
/*QuickReset*/ *{margin:0; box-sizing:border-box;} html,body{height:100%;}
/*
OP: -I am looking to create a website in which it has a
main div in which both the width and the height is
always the size of the screen
A: -let this be body!
*/
body{
background: #0ae;
display: flex;
flex-flow: row nowrap;
padding: 40px;
}
/*
OP: -My aim is for the navigation section to be
contained in the large blue part on the left
A: -Thanks to CSS3 flexbox on body all you need is a desired menu width:
*/
aside{
width: 140px; /* or any size you want, px, %, ... */
}
/*
OP: -and for the main page content to be displayed within
the white box and for this white div to only scroll sideways
A: -add overflow:auto; to make it scroll and flex:1 to grow to available size
*/
article{
background: #fff;
overflow: auto; /* make element scrollable */
flex: 1; /* let the browser grow this element */
}
/* just to demonstrate sideways scroll */
article{
display: flex;
flex-flow: row nowrap;
}
section{
min-width:100%;
}
<aside>
Menu
</aside>
<article>
<section>"and I want this CONTENT area to scroll sideways"</section>
<section style="background: #eee;">YEY</section>
</article>
2. The old-school way (compatible down to IE8)
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;}
body{ /* your app */
padding:40px;
background: #0ae;
}
#aside{ /* your menu */
float:left;
width: 100px;
}
#content{ /* white content area */
overflow: auto;
margin-left: 100px; /* menu is 100px remember? */
height:100%;
background: #fff;
}
/* Just to test horizontal scrollability */
#content{
white-space:nowrap;
}
.page{
white-space: normal;
display: inline-block;
vertical-align: top;
width: 100%;
height:100%;
margin-right: -4px;
/* Todo: make scroll vertically each page if needed */
}
<div id="aside">
Menu
</div>
<div id="content">
<div class="page">Content A</div>
<div class="page" style="background:#eee;">Content B</div>
</div>

after setting the main div css overflow properties the way you like them,
you can always javascript it (as in the given example)- and it will be fully backward compatible.
<div id=[mainDivID]>
<script>
[maindDivID].style.width = screen.width +"px";
[maindDivID].style.height = screen.height +"px";
</script>
<!-- main div content -->
</div>

Related

Adjust the width of two side-by-side divs by user drag operations

I have 2 side-by-side div. If there is any simple solution that allows user to adjust the width of two div by dragging.
If the width of one div increase, the the width of another div decreases, and keep the sum of 2 div width the same.
It would be great if it can be implemented by pure javascript or css. And addding any other items, like div, is welcomed.
The code of 2 divs is as following:
.left {
float: left;
width: 49%;
min-height: 50px;
border: 2px dashed #f0f
}
.right {
float: right;
width: 49%;
min-height: 50px;
border: 2px dashed #00f
}
<div class="right"></div>
<div class="left"></div>
Appreciate any ideas!
Out of curiosity I created a small trial and found out that it was easier accomplished using a main flexbox container .wrapper containing the .left and .right elements and have the flexbox mechanism do the hard work.
Two things:
When using resize, property overflow needs to be auto to make the handle visible (tested on Windows Firefox and Chrome/Edge).
Choose one of child elements that can be resized and hold the handle, I chose .left. Because they are flexbox child elements, using flex: 1 on the other element (.right) the flexbox mechanism will make that element follow the size of the resized element and fill any remaining space.
MDN Reference: resize
/* Flexbox container for easy resizing of .right */
.wrapper { display: flex }
.left, .right {
/* initial size, browser will remember last state until page reload */
width: 50%;
min-height: 50px; /* at least some meat to show */
min-width : 50px;
}
.left {
overflow: auto; /* required to make the handle visible */
resize: both; /* enable resize in either direction */
/* use horizontal/vertical for single direction */
}
.right {
flex: 1; /* will fill the remaining horizontal/vertical space */
}
/* Eye-candy */
.left { border: 2px dashed #f0f }
.right { border: 2px dashed #00f }
<div class="wrapper">
<div class="left" ></div>
<div class="right"></div>
</div>

One section moves upward and the other one stays sticky untill first sections disappears upward

I am trying to make a Curtain Effect. I want the curtain image to go upward and reveal the text and image below. once it's completely hidden then it scrolls to the next page. This is something that I have made https://jsfiddle.net/poezny2a/3/ but it's not perfect as you can see the curtain from above has less opacity. Any Jquery or javascript code would work. Thanks a lot :)
:root {
--minh: 98vh;
--color1: wheat;
--color2: midnightblue;
}
.bg {
/** create the "split" background **/
background-image: url('https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/curtains.png');
background-repeat:no-repeat;
position:absolute;
width:100%;
height:100%;
background-size:cover;
}
/** add extra space to the bottom (need this for the "sticky" effect) **/
.curtain::after {
content: "";
display: block;
min-height: var(--minh);
}
img{
max-width:100%;
}
h2{
position:absolute;
}
.invert {
/** make the content sticky **/
position: sticky;
top: 20px;
/** blend the content with the contrast effect **/
mix-blend-mode: color-burn;
/** center the content **/
display: flex;
align-items: center;
justify-content: center;
/** set the minimum height of the section **/
min-height: var(--minh);
}
<div class="curtain">
<div class="bg">
</div>
<div class="invert">
<img src="https://taschenoper.pocketoperator.de/wordpress/wp-content/uploads/2022/06/image.jpg">
<h2>
Hello world
</h2>
</div>
</div>

Hide text underneath the image/background color

I have my logo (an image inside a div) with these properties in jade-
style="opacity:1;filter:alpha(opacity=100);display:block;border-bottom: thick solid #000000;background:rgba(255, 255, 255, .8)"
This div is on the page top and a report displayed as the main content. I am using stickyjs to keep the logo fixed on scrolling down the page.
But, when i scroll down, the page content behind the logo is not hidden and is visible as text behind the image as,
How can i set options for background-color, to hide the text contents lying underneath?
Ok, without knowing your site architecture, here's a sample of what you could do...
Working CodePen Demo
HTML
<div id="main">
<div id="header">
<img src="http://www.myiconfinder.com/uploads/iconsets/256-256-1c93adf1d2e3c02dcb629a40fb065e81.png" />
</div>
<div id="content">
<p>This is the body content.</p>
...
<p>
<p>This is the body content.</p>
</div>
</div>
CSS
#header {
height: 60px;
width: 100%;
position: fixed; /* Keeps the header fixed at the top of the page */
top:0;
z-index: 10;
background-color: #fff; /* opaque background to hide text */
margin: 0;
padding: 0;
}
#header img {
height: 100%;
}
#content {
position: absolute; /* begin content beneath header */
top: 55px;
z-index: -1; /* hide the body text */
}
You don't need JS to fix a header at the top of the page. I'd suggest simplifying and using CSS positioning to make sure the header bar stays at the top of the page.

Add horizontal scroll bar when viewport is narrower for any block level element

I used to use bootstrap '.responsive-table' class to add a horizontal scroll bar when screen size is less than 768px;
This is the bootstrap way of doing this, but it only intends to apply on tables.
.table-responsive {
#media screen and (max-width: #screen-xs-max) {
width: 100%;
margin-bottom: (#line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #table-border-color;
-webkit-overflow-scrolling: touch;
}
Let's say I have a div, or a <ul> tag,
<div class="foo" style="width:980px">
/*content here is 980px width*/
</div>
How to make the scroll bar appear on div.foo on a page with bootstrap loaded, when the screen size is smaller then 980px?
This css should help
div.foo {
min-width: 980px;
overflow: auto;
}
This will not let the width of div.foo go below 980px. It it goes then it will display a scrollbar.

CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally

I have a div , something like this
#footer
{ position:fixed;
left:40px;
top:0px;
}
The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.
I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?
Fixed position in only one direction
I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks
Seems to be impossible to get this "look fine" with only CSS/HTML.
As mentioned from Ruup or Fixed position in only one direction, layering over JS for it, is a good option.
Fortunately, i found a way to get it work somehow (not that beautiful):
http://jsfiddle.net/MKEbW/5/
HTML (inside the body-tag):
<div id="simulated-html">
<div id="footer">
<span>
<!-- Footer text here -->
</span>
</div>
<div id="simulated-body">
<!-- Your website here -->
</div>
</div>
CSS:
* { margin:0; padding:0; }
html {
font: 12px/1.5em Georgia;
}
p { padding: 5px; }
html, body {
height: 100%;
overflow: hidden; /* hide scrollbars, we create our own */
}
#simulated-html {
background: orange;
overflow-x: scroll; /* force horizontal scrollbars (optional) */
overflow-y: hidden; /* hide. we use the #simulated-body for it. */
position: relative; /* to align #footer on #simulated-html */
height: 100%;
}
#simulated-body {
overflow-y: scroll; /* force vertical scrollbars (optional) */
overflow-x: hidden; /* hide. we use the #simulated-html for it. */
height: 100%;
background: #eee;
/* use as a container */
width: 450px;
margin: 0 auto;
}
#footer {
position: absolute;
bottom: 0px; /* vertical align it to #simulated-html */
width: 100%;
background: red;
z-index: 99; /* always show footer */
color: white;
}
#footer span {
width: 450px;
margin: 0 auto;
background: green;
display: block;
}
​
Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.
Tested with scrollbars, smaller and wider viewports in Chrome 18.
I recommend a fallback for not capable browsers and/or a JS workaround.
The linked post is exactly what you need. You can copy the exact script.
$(window).scroll(function(){
$('#footer').css('left','-'+$(window).scrollLeft());
});
The div css is like this (probably not footer when it has top 0px :P but ok)
#footer
{ position:fixed;
left:40px;
top:0px;
}
When you scroll the jquery script just adjusts the left(x) coordinate to the same value as the scrollLeft of the window.
There is a small fix on the previous code.
The changed javascript code for moving fixed div horizontally
$(window).scroll(function(){
$('#footer').css('left',-$(window).scrollLeft());
});
how should the horizontal axis vary? the way this code is currently it would stay 40px from the left at all times. in order to make the left margin change position relative to the size of the window you must use percentages and negative margins. for instance, to center a fixed div:
#centered {
height: 350px;
top: 0;
position: fixed;
width: 1024px;
left: 50%;
margin-left: -512px;
z-index: 9999;
}
notice that your negative margin must be HALF the width of your div. if you want it 40px to the left of center then you would add another 40px to margin-left.

Categories