Im trying to get content to hide behind actionbar when scrolling. I have this example pen:
https://codepen.io/Wocha/pen/ExKVNRW
HTML:
<div class="app-content">
<div class="main-content">
<div class="content">
Some main content
</div>
<div class="footer">
Footer content
</div>
</div>
</div>
CSS:
body {
background: #F2F3F5;
}
.app-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
padding: 0;
margin-top: 60px;
}
.main-content {
width: 100%;
margin: 0;
padding-left: 16px;
padding-right: 16px;
}
.content {
background: #fff;
padding: 16px;
min-height: 82vh;
width: 100%;
margin-bottom: 25px;
}
.footer {
display: block;
position: sticky;
bottom: 15px;
width: 100%;
color: #fff;
background: #000;
padding: 10px;
margin-top: 20px;
}
What i would like is for content to hide behind footer / actionbar when scrolling so that there would always be a small line of background gray visible between footer and content.
I could do it by setting content height and overflow: auto, but that would create extra scrollbar to content div and i want it to work when scrolling main window.
This post is very close to what i would like to happen, but there Action Bar just scrolls over content, same as in my pen example.
Fixed action bar, taking footer into account
change the z index of the action bar to 1
z-index: 1;
Related
I'm trying to create a design using multiple divs using CSS.
I'm already written code for it but don't know what is the problem with my code as my left and right side div not aligning at vertically center and all the divs are not overlapped with main yellow centered div which is I'm unable to achieve.
Note: I tried this with z-index but did not get what I want.
Output I'm getting:
Output I want to achieve:
My code :
<!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">
<title></title>
</head>
<style>
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
}
.sdiv {
width: 55%;
height: 600px;
background-color: #ffff00ec;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
</style>
<body>
<div class="maind">
<div class="fdiv">
<p>Some content here...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Some content here..</p>
</div>
<div class="sdiv">
<p>Some content here..</p>
</div>
<div class="wr1">
Some content here...
</div>
</div>
<div class="tdiv">
<p>Some content here..</p>
</div>
</div>
</body>
</html>
Please somebody help me with the Source Code I tried almost all the related answer.
You can use Flexbox or Positioning.
Using Positioning makes it more flexible to add content to the holder element.
While Flexbox is more flexible when it's about adding and aligning boxes.
# Positioning
Description:
Create 4 elements to be the boxes.
Each .box has it's direction.
Example: <div class="box top"></div>.
Wrap all of them in div.boxes. This way you can separate the .boxes from the content (if there) in the holder,
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
Style the the position of .wrapper so all the positioned absolute elements stays in the .wrapper.
.wrapper {position: relative;}
Finally, set the position of each box:
Example:
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
Notes:
Don't use:
left property on .box.right.
top property on .box.bottom.
It won't set the negative margin which pushes them to edges.
In case content added to the holder (.wrapper), wrap the content in div.content and add inner space using padding. The value of padding in the code example is 40px, which it's related to the .boxes dimenstions.
The space (padding) is added to prevent overflow between content and .boxeses. And we can go further with styling the .boxes with overflow and z-index property.
For more about using negative maring and the boxes dimenstions:
Check for Notes in Flexbox
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 600px;
height: 600px;
border: 1px solid;
margin: 50px auto;
}
.box {
position: absolute;
border: 1px solid;
background-color: red;
}
.box.top, .box.bottom {
width: 200px;
height: 80px;
}
.box.left, .box.right {
width: 80px;
height: 200px;
}
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
.box.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: -40px;
}
.box.left {
top: 50%;
left: 0;
transform: translateY(-50%);
margin-left: -40px;
}
.box.right {
right: 0;
top: 50%;
transform: translateY(-50%);
margin-right: -40px;
}
.content {
padding: 40px; /* check notes */
}
<div class="wrapper">
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
<div class="content">
<h1>Hello World!</h1>
</div>
</div>
# Flexbox
Description:
Create 3 elements to hold the .boxes.
top: holding top box
center: holding left and right boxes
bottom: holding bottom box
In other words:
Each .box is nested (a child) in a div that has the class of the direction.
Example: <div class="top">BOX</div>.
Left and right are nested in center.
HTML:
<!-- top box -->
<div class="top">
<div class="box"></div>
</div>
<!-- left, right boxes -->
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<!-- bottom box -->
<div class="bottom">
<div class="box"></div>
</div>
Wrap all of them in a div.wrapper:
<div class="wrapper">
<!-- top box -->
<div class="top"></div>
<!-- left, right boxes -->
<div class="center"></div>
<!-- bottom box -->
<div class="bottom"></div>
</div>
The lines below will style the 3 elements and set them to their positions, .top will be centered (left right) and on top, .center will be centered from all the directions, .bottom is centered (left right) and at the bottom, by displaying the .wrapper children horizontally (flex-direction: column;) and centered (align-items: center;) with (space-between) them, using flex.
Check: A Complete Guide to Flexbox
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
Then we do something similar with the .center element, by displaying both of left and right next to each other, centered and space-between them.
(No flex-direction property in the declaration, since the default is in a row (vertically))
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
And finally, with negative margin we move the boxes to the edges.
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom: -40px;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
Notes:
The left and right boxes are (width: 80px), each, which means the margin should be -40px (80 / 2 = 40) to set on center.
left: margin-left: -40px
right: margin-right: -40px
Same for top and bottom, since the dimensions are flipped.
top: margin-top: -40px
bottom: margin-bottom: -40px
This way, all the boxes are gonna be centered at the edges.
By default, when displaying with flexbox, the parent(.center) will take the width of it's content/children (fitted)! which means, width: 40px * 2, since we have 2 boxes in there. Now to make sure that the space-between value works, we should "stretch" the .center element (parent) by styling it's width to 100% which allows to the boxes to have as much as space-between, then every box is gonna be on it's position.
.wrapper .center {
width: 100%; /* Don't delete, check notes */
}
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
border: 1px solid;
max-width: 600px;
min-height: 600px;
margin: 60px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.box {
border: 1px solid;
background-color: red;
}
.wrapper .top .box,
.wrapper .bottom .box {
width: 200px;
height: 80px;
}
.wrapper .center .box {
width: 80px;
height: 200px;
}
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom:-40px;
}
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
<div class="wrapper">
<div class="top">
<div class="box"></div>
</div>
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<div class="bottom">
<div class="box"></div>
</div>
</div>
EDIT:
As #anatolhiman mentioned in the comments:
but negative margins will create a problem by having the elements
overflowing right and left (especially on narrow screens).
A simple solution:
(same works for both examples)
wrap the HTML that we added before in another div, .container for example, and add spacing with CSS, either padding or margin works, depends on your situation.
So the question is...
Is it a space within the .container? --> padding.
Or outside of it? --> margin.
Give the .container a background-color, resize the window, and check both margin and padding to see the differences.
HTML - Update:
<div class="container">
<div class="wrapper">
</div>
</div>
CSS - Add:
/* outside space */
.container {margin: 50px;}
/* Or */
/* inside space */
.container {padding: 50px;}
You may have to edit the margin property in .wrapper for top bottom.
Extra space added (50px) to include spaces for the .boxes as well.
Remember: .wrapper{max-width: VALUE} is taking a place in this functionality, since it's max-width is X but it could be smaller. So if the property is width: and not max-width then it'll behave differently, and won't work as expected (fully responsive), unless we use #media query or JavaScript.
Maybe something like following snippet, with absolute positioning:
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
position: absolute;
top: 0;
left: 35%;
z-index: 22;
}
.sdiv {
width: 80%;
position: absolute;
top: 10%;
left: 10%;
height: 600px;
background-color: #ffff00ec;
z-index: 12;
margin: 0 auto;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
bottom: 20%;
left: 35%;
z-index: 22;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
left: 0;
z-index: 22;
}
.wr2 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
right: 0;
z-index: 22;
}
<div class="maind">
<div class="fdiv">
<p>Top...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Left..</p>
</div>
<div class="sdiv">
<p>Somessss content here..</p>
</div>
<div class="wr2">
<p>Right...</p>
</div>
</div>
<div class="tdiv">
<p>Bottom..</p>
</div>
</div>
I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.
You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly
I want to add a z-index of 1 on individual divs, buttons, and h1 that are underneath an overlay. I'm trying to make it similar to the chrome developer tools :hover feature. In Dev Tools, when you hover over an individual element, it highlights, however in my case, I'd like it to come above the overlay. In dev tools, you can highlight a child div without it's parent highlighting, and that's what I'm looking to do too.
I've tried messing with opacity, but when it has a nested div, the nested div gets double the opacity and I don't want that. Here's the codepen and the code...
http://codepen.io/jareko999/pen/wWGpwz
HTML
<div class="cover">
</div>
<h1 class="title">Here's your website</h1>
<div class="container">
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
</div>
CSS
body {
margin: 0;
width: 100%;
height: 100%;
}
.cover {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0,0,0,.4);
z-index: 1;
}
.title {
text-align: center;
width: 60%;
margin: 40px auto;
}
.container {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 300px;
height: 200px;
margin: 10px;
background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
background-size: cover;
display: flex;
}
button {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: #276cd6;
color: white;
font-weight: 600;
font-size: .8em;
padding: 16px 24px;
border-radius: 10px;
margin: auto;
}
I have a situation where I am loading content into a overlay window and sometimes it will have a scroll applied with overflow-y: auto; and if users scroll and then click the button again I would like the scroll to go back to the top, not where they last left it.
This works fine without using Bootstrap, but once you start using bootstrap methods to show/hide a overlay window it doesn't work.
Specifically this is what doesn't work:
$('#preview .main').scrollTop(0);
However, for whatever reason this does work:
$('#preview .main').scrollTop(1);
I have read this question but I am not using bootstrap modals, so it doesn't really apply to me; I also read this question but the accepted answer didn't work for me.
Sample code:
HTML
<section class="row collapse" id="preview">
<div class="wrapper">
<div class="side col-xs-2">
</div>
<div class="main col-xs-4">
<div class="content_wrapper">
<div class="loader">
loading...
</div>
<div class="content post">
</div>
</div>
</div>
</div>
</section>
<input type="button" id="btn" value="Click Me!" data-toggle="collapse" data-target="#preview">
<input type="button" id="hide" value="Hide Content" data-toggle="collapse" data-target="#preview">
CSS
#preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
z-index: 2000;
background-color: #fff;
}
#preview .wrapper {
display: table;
width: 100%;
padding: 0 !important;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
}
#preview .side {
display: table-cell;
text-align: center;
height: 200px;
padding: 10px 30px 15px 30px;
vertical-align: top;
background-color: #FAFAFA;
}
#preview .main {
display: table-cell;
height: 200px;
max-height: 200px;
padding: 10px 13px 16px 13px;
vertical-align: top;
overflow-y: auto;
}
#preview .main .content_wrapper {
padding-bottom: 32px;
line-height: 1.5;
}
#preview .main .content_wrapper .loader {
text-align: center;
}
#preview .main .content_wrapper .loader p {
margin-top: 15px;
font-weight: bold;
}
#preview .main .content_wrapper .content {
display: none;
}
#btn {
margin-top: 210px;
}
JS
$('#btn').click(function() {
var content_el = $('#preview .main .content_wrapper .content');
var loader_el = $('#preview .loader');
content_el.hide();
loader_el.show();
// Set the content
content_el.html('some content here...');
loader_el.hide();
// Show the content area
content_el.show();
// Reset the scroll position of preview window
$('#preview .main').scrollTop(0);
});
CodePen: http://codepen.io/anon/pen/rVzppz
Having to set it to 1 and not 0 isn't a big deal, so I guess just wondering why it works on 1 and not 0?