I'm not quite sure how to title this better, so edits are welcome.
Basically I wanted to animate a right side sliding-in panel in a page over a fixed div panel.
My jQuery ajax does what its supposed to do to animate it. However, I just noticed that after adding the sliding-panel there was a horizontal scroll bar. Indeed it was my sliding-panel.
How can I "hide" it without extending or allowing the user to scroll horizontally and find the empty panel?
My HTML looks like this:
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
CSS:
.right-pane{
width:400px;
height:90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
Apply to body if no overflow is needed. Read about overflow
.right-pane {
width: 400px;
height: 90%;
background-color: whitesmoke;
z-index: 999;
right: 0;
position: absolute;
}
body {
overflow: hidden;
}
<div class="left-pane">
<div id="left-conent"></div>
</div>
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;">
<div id="pane-content-edit" class="pane-content">
</div>
</div>
<div id="right-pane" class="right-pane">
<div id="pane-content" class="pane-content">
...
</div>
</div>
As a possible solution - use overflow-x: hidden on the body tag. But in case the user doesn't have a screen big enough to show the whole, horizontal scrollbar will not appear. Hence the usability of your website will be significantly reduced.
I can suggest you to have a look at this css library in order to achieve the effect of sliding panel - https://daneden.github.io/animate.css/. Then you just need to care about hiding your panel with display: none and when you need to show it - add bounceInRight class to it.
Related
Right now I have a div that I need to have over 100vw in width in order to get the effect I want. What I don't want is for the div to go off the right side of the screen. I want the view to stay at 100vw, no horizontal scroll bar. I have tried overflow: hidden; and overflow-x:hidden; and it is not working.
CSS
.stripe {
height: 500px;
width: 150vw;
top: 350px;
margin-left: -30vw;
position: absolute;
background-color: #4775de;
transform: rotate(6.2deg);
z-index: -1;
}
HTML
<div styleName='hero'>
<div>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Assuming .hero has no padding or margin, give the parent div of .stripe width:100% (or 100vw) and overflow-x: hidden.
You can try to add another div for wrapping the stripe div. and give overflow:hidden. please refer below code.
css
.wrap{position:relative;
width:100%;
height:500px;
overflow:hidden;
}
HTML
<div styleName='hero'>
<div className="wrap>
<div styleName="stripe"/>
</div>
<div className="container" styleName="divide-container">
<div styleName="upper-wrapper" >
</div>
<div styleName="lower-wrapper" >
<MainButtonRow/>
</div>
</div>
</div>
Hiding the overflow in the body tag worked for me when I had this issue.
body {
overflow-x: hidden;
}
I have been following Keith Clark's guide to CSS Parallax. His concept it like so:
HTML:
<div class="container”>
<div class="parallax-child”></div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
perspective-origin: 0 0;
}
.parallax-child {
transform-origin: 0 0;
transform: translateZ(-2px) scale(3);
}
This works perfect for the most part, for example on my development website. However I need to add this effect to another website where I can't control the HTML structure much at all, below is the basic structure tree, added comments to where I can edit.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer">
<p>Content in here scrolls slower than everything else</p>
</div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
I can add any styles I want, just can't edit the HTML structure apart from where stated in the comments.
My issue is I can't seem to get the parallax effect to work, if I put the example container styles for the parallax effect (at the top of this post) on the body the parallax effect works...
From what I have read I would need to add the transform-style: preserve-3d; style onto elements between the container and the children, however this doesn't appear to work.
Anyone know what's going wrong?
Edit:
Codepen of the working CSS on the body.
Codepen of the non-working CSS on the HTML.
Edit:
Due to more complications with fixed positions and detecting body scroll (not possible it seems), I really need to get this working by using the HTML element.
What is strange, is that is sort of works. Follow this link and click and drag the slider left/right, the parallax effect is there, just not when you scroll down...
Not too sure why this effect doesn't work when you scroll down...
Guessing no one knows the answer to this, so thought I may as well post what I did.
It appears that you simply can't use the HTML tag for this Parallax effect, so I have just put the effect on a containing div, so then for things functions such as sticky headers I can simply check for the scroll amount on this div and set anything sticky to position: sticky.
Sticky doesn't work on Edge or IE so a fall back would be just to completely disable the parallax effect on these browsers and give the scrolling back to the HTML element so you can use position: fixed.
Fallback:
#supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {
Not sure if I quite understood your problem, but why don't you ignore the body/HTML and just map it to your own editable elements.
See working example
.body {
perspective: 1px;
height: 100vh !important;
overflow-x: hidden;
overflow-y: auto;
preserve-origin-x: 100%;
}
.body > div { height: 200%; }
p { color: #fff; }
.parallax__group {
position: relative;
// transform-style: preserve-3d;
overflow: hidden;
height: 300px;
margin-top: 100px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
position: relative;
float: left;
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
height: 100vh;
background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg');
background-size: cover;
background-position: center center;
}
.row-block {
background: red;
}
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div class="body">
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
It uses the same CSS of the version you claimed as "working". The only change I made is changing your body for a .body which is an additional div wrapper. This way, it is only touching elements you own / can edit.
I am building a chat application using Bootstrap as a base and fluid-container because it needs to be a 100% height and width app but it seems that Bootstrap does not like this so I've ended up with some custom CSS to sort it.
The idea is that there are two panels shown on the page, the chat panel and the users panel and the panel-body of both should overflow automatically inside itself.
The problem is that now I am also using panel-footer and it's created this strange problem, see here in the screenshot.
Here is the CSS:
.panel {
margin-bottom: 0;
height: 100vh;
max-height: 100vh;
position: relative;
}
.panel-body {
overflow: auto;
position: absolute;
top: 30px;
bottom: 30px;
left: 0;
right: 0;
}
.panel-footer {
position: absolute;
bottom: 0;
}
By the way, I am complete beginner in custom CSS so if I am making it more confusing then it needs to be, and it can all be simplified, please also tell me that! I appreciate it :)
.panel-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
Is there any reason why positioning the panels body and footer abolute? When giving the body a height the footer automatically sticks to the bottom
A similar issue, except that my footer ends up affixing itself to the bottom of the PAGE, not the panel in question. My HTML (everything stripped down to bare bones for testing while I put this together) and minimal CSS (again, everything stripped down to barest while I get this working) are below.
<div class="panel panel-default" style="height:100%;border:1px solid pink;"> <!-- border so I can see what's up -->
<div class="panel-heading">
<h4>Select or create case</h4>
</div>
<div class="panel-body" id="caseSelector">
<!-- empty during testing so as not to muddy the test-->
</div>
<div class="panel-footer case-panel-footer" style="border:1px solid cyan;"> <!-- border so I can see what's up -->
<div class="col-sm-6">
<button class="btn btn-primary case-action-button" type="button" disabled="" data-action="select">Open case</button>
</div>
<div class="col-sm-6 text-right">
<button class="btn btn-primary case-action-button" type="button" data-action="new">Create new</button>
</div>
<div class="clearfix"></div>
</div>
.case-panel-footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
I simply can not get this panel-footer to sit at the bottom of the panel's containment area, even though the pink border clearly shows the panel is taking up the whole region available to it in the container.
I've been trying, but struggling to get this layout going using twitter bootstrap, what I need is a centered page with two side columns that don't scroll with the page but a center column that does.
for reference the black displays the entire screen space, with blue showing body content, two grey boxes being non scrolling, but maroon scrolling normally as it is the main content for the page
Setting any column with position fixed makes them overlap, and attempting to use a traditional sidebar takes it to the edge of the view space, which is also undesired. any ideas?
The example shows to use the universal scollbar (on the right side of browser frame, rather than in the middle), live demo: http://jsfiddle.net/hm4do8mg/
HTML
<div class="left">
<p>left</p>
</div>
<div class="midd">
<p style="height:2000px;">midd</p>
<p>bottom</p>
</div>
<div class="righ">
<p>righ</p>
</div>
CSS
body, p {
text-align: center;
margin: 0;
}
.left,
.righ {
background: lightgrey;
position: fixed;
}
.left {
width: 20%;
}
.midd {
background: paleturquoise;
width: 60%;
position: relative;
left: 20%;
top: 0;
}
.righ {
width: 20%;
right: 0;
top: 0;
}
The layout you asked, is kind of old fashion style like <iframe>. You can also use <table> to do it, it's the most solid, and easiest way to me (ignore it if you need a mobile version).
I made a fiddle that can help you achieve this. But I haven't used Bootstrap. You can easily make these changes on bootstrap grid.
JSFIddle
I think this could fit your needs. It's not perfect, but it's a starting point.
HTML
<div class="container">
<div class="row">
<div class="first col-xs-3">
<div class="fixed">
<p>Fixed</p>
</div>
</div>
<div class="col-xs-6 scroll">
<p>PUT A NOVEL IN HERE</p>
</div>
<div class="second col-xs-3">
<div class="fixed second">
<p>Fixed</p>
</div>
</div>
</div>
</div>
CSS
html, body {
background:#CCCCCC;
height:100%;
}
.container, .row {
height:100%;
}
.fixed {
height:100%;
background:#FFFFFF;
position:fixed;
width:20%;
}
.scroll {
height:100%;
background:#000000;
overflow:auto;
}
.second.fixed{
margin-left:-15px;
}
DEMO
Fiddle
I am trying to achieve a a horizontal scrolling website with a fixed header and footer.
Goals:
1. Fixed Header and Footer
2. No vertical scrolling
3. Content div fills all space between the header and footer
I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal)
However this also causes a vertical scrollbar to appear.
live demo:
http://jsfiddle.net/wQ2XR/230/
how can i achieve my goals without a vertical scrollbar to appear?
thanks a lot in advance!
The html code:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="2">
<div id="b">
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question? </p>
</div>
</div>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
the css:
body, html {
height: 100%;
padding: 0;
margin: 0;
}
body {
width: 100%;
}
header {
}
#a {
position: fixed;
height: 50px;
top: 0;
width: 100%;
background-color: blue;
}
#2 {
position: relative;
padding: 50px 0 25px 0;
}
#b {
height: 100%;
position: absolute;
}
#bb {
position: relative;
height: 100%;
margin: 50px 0 0 0;
width: 2000px;
background-color: yellow;
}
footer {
}
#c {
position: fixed;
height: 25px;
bottom: 0;
width: 100%;
background-color: green;
}
Hmmm, the problem is that the wrapper(s) around your content between the header and footer are taking on the height of the viewport with height:100%. So, when you apply a margin to vertically offset those content wrappers (so that the header becomes visible), they get pushed by that much below the viewport (50px, height of the header). As a result, you get a vertical scrollbar, since the content wrappers are both the full height of the viewport and pushed down - so they can't fit on-screen.
How to avoid this? Well, if your footer and header height won't be dynamic (ie. You'll always be in control of how tall they are through your CSS), you can achieve this in a fairly straightforward manner with position:absolute.
Your structure I modified slightly; I removed the #2 and #b elements, since it looks like they were just there to properly position/size #bb, the actual content-containing element:
<div id="total">
<header id="1">
<div id="a">
<h1>Header</h1>
</div>
</header>
<div id="bb">
<h2>Post Title Example One</h2>
<p>hello world! Have you thoroughly searched for an answer before asking your question?</p>
</div>
<footer id="3">
<div id="c">
<h1>footer</h1>
</div>
</footer>
</div>
Now, with your CSS, I removed the definitions for styling #2 and #b. Additionally, I modified the #bb CSS to read as:
#bb {
position: absolute;
top: 50px;
bottom: 25px;
width: 2000px;
background-color: yellow;
}
Here's an updated JSFiddle to demonstrate what this achieves. Additionally, here's a JSFiddle implementing your multiple-row layout which you gave as a comment in one of the answers.
The reason why overflow:hidden doesn't quite work is because #bb would actually still extend below the viewport - just, no vertical scrollbar would be created because that overflowing region is ignored by the browser. However, when you use a percentage height, it becomes apparent that the height of #bb is not that which is visible. Anyways, hope this helps out! If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
To hide the scrollbar use:
overflow: hidden;
However, the text needs to go somewhere (otherwise it will be hidden), so you need to have the container larger or use text-columns.
Do you intend to achieve something like Windows 8 Metro UI for the scrolling?