Fixed header/footer keep vertical scroll bar on top? - javascript

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

Related

Creating a boxed/ framed layout

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>

Modal fixed position content shift

After a lot of research, I am unable to find a proper solution for the shifting to the right of fixed positioned elements, cover images, and standard content, when a modal window is open.
Note: I am looking for a general, clean solution, not an hardcoded fix that would work just on a specific layout.
Does anyone know how to fix this issue? Please refer to this example: http://codepen.io/microcipcip/pen/kXdRWK
body {
height: 2500px;
&.-modal-open {
overflow: hidden;
}
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
background: #FF0000;
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity .2s ease-in-out;
body.-modal-open & {
opacity: 1;
}
}
The solution is very simple and a pure css fix:
.-modal-open .fixed,
.-modal-open .content {
overflow-y:scroll;
}
..however, this requires that your content is styled differently. You should never use a margin for your content, but rather wrap it in a container and use padding instead.
The scrollbar's width isn't always 17px... 17px is for Firefox, but 15px for chrome, sometimes IE doesn't even have a scrollbar width depending on the code.
Here is the updated pen:
http://codepen.io/scooterlord/pen/KgKLwB
edit: forgot to say, that this is a cross-browser solution and works flawlessly everywhere I tested it. If the browser is mobile, then no change of width happens anyway from the addition/removal of the extra scrollbars and depending on the browser the newly created scrollbars for the content/fixed elements is always the same as the initial body scrollbar.
The main trick is to not use body as your content wrapper. Use a dedicated div as wrapper and place your modals outside so the scrollbars don't interfere with each other.
var $btnShow = document.querySelector('.show');
var $btnHide = document.querySelector('.hide');
var $body = document.querySelector('.modal');
$btnShow.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
$btnHide.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
.wrapper {
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
overflow: auto;
}
.content {
background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1');
background-size: cover;
background-position: center center;
height: 2500px;
width: 100%;
}
.clickme {
position: fixed;
top: 50%;
left: 50%;
padding: 10px;
border: none;
background: #000000;
color: #ffffff;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
.clickme:hover {
background: grey;
cursor:pointer
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
transition: opacity .2s ease-in-out;
z-index: 3;
}
.modal.-modal-open {
display:block;
}
.modal-content {
min-height: 1500px;
margin: 100px;
background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1');
background-size: cover;
}
<div class="modal">
<div class="modal-content">Content
<button class="clickme hide">Toggle Modal HIDE!</button>
</div>
</div>
<div class="wrapper">
<div class="content">
<button class="clickme show">Toggle Modal SHOW!</button>
</div>
</div>
How about adding 17px right-margin to the body each time a modal is opened. That would emulate the space that was reserved for the scroll bar. (17px is the width of standard browser width)
body.-modal-open {
margin-right: 17px;
}
meanwhile, for for fixed element you recalculate the width;
.-modal-open .fixed {
width: calc(100% - 17px);
}
There is still one problem though, the CSS background image is still shifted, the solution is simply placing it in a div container instead of the body.

How to line up images horizontally and center with css when using a premade javascript magnifying glass?

I've been working on placing a javascript magnifying glass on site.
I need help positioning the images in a straight horizontal line, right next to each other, with no white space in between. Setup must also be centered in middle of page.
Like this: http://s17.postimg.org/6nwizreov/Screenshot.png
Code: http://jsfiddle.net/NightSpark/dtsqcpv8/
(The two js files and css are from magnifier.js, by Mark Rolich)
Thanks
.magnifier-thumb-wrapper {
position: relative;
display: block;
top: 0;
left: 0
}
.magnifier-lens {
position: absolute;
border: solid 1px #ccc;
z-index: 1000;
top: 0;
left: 0;
overflow: hidden
}
.magnifier-loader {
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
color: #fff;
text-align: center;
background: transparent;
background: rgba(50, 50, 50, 0.5);
z-index: 1000;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
}
.magnifier-loader-text {
font: 13px Arial;
margin-top: 10px
}
.magnifier-large {
position: absolute;
z-index: 100
}
.magnifier-preview {
padding: 0;
width: 100%;
height: 150px;
position: relative;
overflow: hidden
}
.magnifier-preview img {
position: absolute;
top: 0;
left: 0
}
.opaque {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}
.hidden {
display: none
}
demo - http://jsfiddle.net/dtsqcpv8/2/
adding this you can center it replace body with the parent of the element
body{
text-align:center;
}
.cont{
display:inline-block;
}

Absolute positioned element not extending with scrollable content (past 100%)

I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }

Categories