Creating a boxed/ framed layout - javascript

I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)

The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>

Related

Navigation bar : position Absolute and Sticky

I'm trying to make a navigation bar that overlap my header and stick to the top of the window on scroll.
It will start at top: 45px and stick at top: 0 on scroll.
My first approach was to set it at position: fixed; top: 45px and change the value with JS on a scroll event. But Firefox gave me the warning about "asynchronous panning" discussed on this post.
I have been able to do it with a bit of CSS trickery, but I am wondering if there is a simpler CSS way or a valid JS approach to do this (not throwing a warning).
body {
position: relative;
height: 100%;
width: 100%;
background-color: grey;
overflow-x: hidden;
margin: 0;
}
.container {
position: absolute;
top: 0;
left: -1px;
width: 1px;
bottom: 0;
padding-top: 45px;
overflow: visible;
}
nav {
position: sticky;
top: 0;
transform: translateX(-50%);
margin-left: 50vw;
width: 300px;
height: 70px;
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
width: 100%;
background-color: green;
}
<div class="container">
<nav></nav>
</div>
<header>
</header>
<main>
</main>
You can simplify your code and avoid using an extra container:
body {
background-color: grey;
margin: 0;
}
nav {
position: sticky;
top: 0;
width: 300px;
height: 70px;
margin:45px auto -115px; /* 115 = height + margin-top */
background-color: red;
}
header {
height: 50vh;
background-color: blue;
}
main {
height: 200vh;
background-color: green;
}
<nav></nav>
<header>
</header>
<main>
</main>

Change a div's appearance on hover of another div with absolute positioning (not-repeat)

I have several divs with absolute position on top of primary div which has relative position (duh). I am trying to make one div change its background-color etc when hovering another div within same parent div.
Now, I'm aware of adjacent-div classes but they don't seem to work (maybe because of absolute positioning).
Below is an example of my code (actual is a lot bigger). What would be best way to change for e.g. m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?
P.S. If CSS alone ain't an option, a jQuery solution can also work.
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
</style>
You can not do it with pure css and your current html structure, need javascipt or jquery to do this.
Example:
$('.m2wrap-hover').hover(function() {
$(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
$(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-back.hover {
width: 120px;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
</div>
Or if you want to use just css, you need to change the order of your elements (because it has position: absolute so the order doesn't matter):
.m2wrap {
position: relative
}
.m2wrap-back {
position: absolute;
top: 15px;
left: 0;
width: 110px;
height: 0;
text-align: center;
vertical-align: middle;
}
.m2wrap-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
border-radius: 4px;
opacity: 0.6;
cursor: pointer;
}
div.m2wrap-hover:hover {
background-color: #bf0000;
}
.m2wrap-hover:hover + .m2wrap-back {
width: 120px;
color: red;
}
<div class="m2wrap">
<h3 class="xhfb-text"> Some text here.. </h3>
<div class="m2wrap-bz1"></div>
<div class="m2wrap-bz2"></div>
<div class="m2wrap-hover">hover here</div>
<div class="m2wrap-back">
<h3 class="m2wrap-back-title">Title</h3>
</div>
</div>

Fixed header/footer keep vertical scroll bar on top?

I have a partly transparent fixed footer and header with scrolling content: https://jsfiddle.net/ru8jgxg9/
What changes to that JSFiddle would need to be made to keep the vertical scroll bar on top when there is overflow content (but keep the scroll bar the whole height of the window too)?
I notice stackoverflow.com seems to be able to do it:
html {
height: 100%;
}
body {
height: 100%;
}
/* Fixed Header */
.dvTableTop {
display: table;
width: 100%;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #000000;
top: 0px;
height: 50px;
position: fixed;
left: 0;
right: 0;
opacity: 0.7;
background-color: Red;
z-index: 1030;
}
/* Scrollable Content */
.dvContentContainer1 {
position: fixed;
top: 0;
bottom: 0;
padding-top: 30px;
overflow: auto;
left: 0;
right: 0;
}
/* Fixed Footer */
.dvFooterContainer1 {
position: fixed;
height: 50px;
background-color: Yellow;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}
Your fixed header and footer needs to be inside the scrolling container. Currently, they're outside the content container and will overlap it and its scrollbar.
Also, your content container can't have a position: fixed, otherwise it will fight with other fixed elements for position and cause overlaps. Fixed elements are always relative to the document, not the container.
Below is a working example.
body {
margin: 0;
padding: 0;
font-family: arial, helvetica, san-serif;
}
.content {
height: 1000px;
background: linear-gradient(45deg, blue, red);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
<div class="content">
<div class="header">Header</div>
<div class="footer">Header</div>
</div>
I am confused why you are doing it that way. All you have to do is remove your position: fixed from your .dvContentContainer1 like so
.dvContentContainer1 {
padding-top: 30px;
}
And as long as the content extends past the bottom of the page it will work the way you are wanting it to.
See this updated fiddle
Edit: If you remove the height: 100%; from the body tag the scroll bar will go away if the content does not extend past the height of the screen.
See this updated fiddle 2

How to achieve this without using a photo editor?

Can i change:
into:
without using a photo editor
Here Is CSS and HTML code
I couldn't upload the logo because i should have at least 10 reputation to post more than 2 links so i maybe insert it in another comment
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
display: inline-block;
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
background-size: 100%;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
You can use opacity to create a semi-opaque image, and you may be fine with that by adjusting it to whatever you need.
But if you also want to change the color of the image darker, you can use CSS filters. You can make it darker/maroon/brown-ish by adjusting the hue. It's worth noting the browser support - https://caniuse.com/#feat=css-filters
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
looks like a one time thing - i.e. it being a logo and all - It's just a lot easier to do such a thing with Photoshop.
I up-voted Michael's answer since I believe that's as close as you can get with CSS alone. Unless there's some "hacky" way to do this.
My method:
Use Photoshop.
Then add the photo as the background image of a one of the pseudo-elements for your header div / img
I created a sample below of the expected end result.
I encoded the overlay image as Base64 since it's only 1kb in size. It should be checked with your CSS file. Read more about Base64
You can control the opacity of the pseudo-element.
.content {
width: 100%;
max-width: 100%;
height: 500px;
position: relative;
background: url(https://unsplash.it/800/310) no-repeat
}
.content::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .25;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==')
}
<div class="content"></div>

How to move images slightly up on scroll using Jquery?

I'm trying to create a simple parallax effect using Jquery (without plugins). Basically I have a few different images layered on-top of each-other and need them to move slightly upwards at different speeds when a user scrolls down, similar to a parallax scrolling effect.
Here's the layout so far (excuse the sloppy code):
body {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #ededed;
z-index: 4;
display: table;
}
.header {
position: relative;
width: 100%;
background-color: #ffde15;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.headertopimg {
position: absolute;
width: 100%;
z-index: 10;
}
.headerbehindimg {
position: absolute;
width: 100%;
z-index: 9;
top:0%;
}
.headerbehindbehindimg {
position: absolute;
width: 100%;
z-index: 8;
margin-top: 8%;
}
.headerbgimg {
position: absolute;
width: 70%;
z-index: 7;
left: 50%;
margin-left: -35%;
}
<body>
<div class="header">
<div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
<div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
<div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
<div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
</div>
</body>
Any help would be much appreciated!

Categories