I am trying to make a drawer fade in effect on my page. I need to make a div that takes 100% of the height of the screen. And then on click of the button another div fades in and takes over the screen. Not sure how to do that?
This is my html:
<html lang="en">
#section('head')
#include('customer.layouts.partials.head')
#show
<body>
<div id="app">
<div class="main-section">
#section('topBar')
#include('customer.layouts.partials.top-bar')
#show
#section('header')
#include('customer.layouts.partials.header')
#show
#section('carousel')
#include('customer.layouts.partials.carousel')
#show
</div>
<div "id="magazine-detail">
#section('magazine-detail')
#include('customer.layouts.partials.magazine-detail')
#show
</div>
<div class="large-10 large-centered columns content">
#yield('content')
</div>
</div>
#section('scripts')
#include('customer.layouts.partials.scripts')
#show
</body>
</html>
CSS:
.magazine-detail {
display: none;
}
html, body {
height: 100%;
}
.main-section {
height: 100%;
}
Here the div main-section should take 100% height, and div magazine-detail should fade in on a click of a button. I wonder how to achieve that?
I am struggling with setting the the first div to 100% height when magazine-detail is first hidden.
You need to give your pages an absolute position.
First make your #app a relative container, this way, any of its child elements with absolute positioning will be positioned relative to the parent.
#app {
position: relative;
height: 100%;
}
Next, give your "pages" an absolute position and size them. This will cause them to be positioned in the top left corner of the #app container and fill the width and height of it.
.main-section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#magazine-detail {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
You can control which layer is on top by adding z-index attributes to the "pages".
Related
I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one's position has to be fixed. Also if the red one's height increases, yellow has to move forward to the bottom. How can i do that?
Here is my css and html code:
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<!-- End your code here -->
</body>
</html>
This is possible with simple CSS using a few positioning tricks. First off, since everything orients around your red div, you need this to be the cornerstone. Setting this div to a relative position and inserting the remaining divs as children will allow all of its children to be positioned absolute relative to the parents location.
Because using absolute positioning as a percent will base off of the relative positioned parents size, we can use this to always attach the bottom div off of its base with position:absolute;top:100%. This places the child div at 100% distance from the top of your parent div.
Under that same logic, we can place a div always at the top of the parent using position:absolute;bottom:100%;
Note: I've changed your ID's to classes to allow multiple examples
.div1 {
width:100px;
height:140px;
position:relative;
top:200px;
background:red;
/* ignore this in a real case, these allow multiple examples to stack nicely*/
float:left;
margin-left: 5px;
}
.div2 {
width:100px;
position:absolute;
bottom:100%;
background-color:green;
}
.div3 {
width:100px;
position:absolute;
top:100%;
background:yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="div1">
<div class="div2" style="height:100px;"></div>
<div class="div3" style="height:100px;"></div>
</div>
<div class="div1">
<div class="div2" style="height:200px;"></div>
<div class="div3" style="height:200px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:120px;"></div>
<div class="div3" style="height:227px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:20px;"></div>
<div class="div3" style="height:360px;"></div>
</div>
<!-- End your code here -->
</body>
</html>
When in doubt, create more parent or wrapper elements around the elements you want to manipulate.
* {
box-sizing: border-box;
}
.parent {
position: absolute;
top: 0px;
left: 0px;
border: 5px solid #0000ffc0;
width: 100%;
height: auto;
}
#div1-wrapper {
border: 2px solid lime;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div1 {
position: absolute;
bottom: 0px;
left: 0;
background: green;
width: 100px;
height: 20vh;
}
#div2-wrapper {
border: 2px solid #ff3300;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30vh;
}
#div2 {
width:100px;
height: 30vh;
position: absolute;
top: 0;
left: 0;
background: red;
}
#div3-wrapper {
border: 2px solid #ffff00;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div3 {
width: 100px;
height: 100%;
position: relative;
top: 0;
right: 0;
background: yellow;
}
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1-wrapper">
<div id="div1"></div>
</div>
<div id=div2-wrapper>
<div id="div2"></div>
</div>
<div id=div3-wrapper>
<div id="div3"></div>
</div>
</div>
I created a wrapper around each of the elements named #div. The wrapper around #div1 is #div1-wrapper, and then #div2-wrapper, and so on...
Just to make sure that you overwrite any native browser position styling, give position: relative to each wrapper. With a top: 0 and left: 0. This will make sure that each element begins on the far left of the .parent element and each one begins just after the end of the last one.
If you want #div1 to grow and shrink with the size of the screen, give it a height in vh instead of pixels. #div1's outer wrapper should be position: relative, but the #div1 element itself should be position: absolute. (If you try to set its position to relative, it will stick to the top of its wrapper, rather than the bottom, as you want.
You said you wanted the red div (#div2) to be fixed from the top, but able to grow and shrink underneath. To achieve this, you need to set the position of #div2 to absolute, sitting inside of a position: relative wrapper.
You also need to make sure that it's wrapper (#div2-wrapper) has a height set in vh, instead of pixels. That way, the whole outer wrapper will grow and shrink. And to have the inner element (#div2) grow and shrink with it, set its height to 100% of the parent.
Next, set the #div3-wrapper to position relative and a set height of your choosing (in this case, 100px).
And lastly, set the #div3 (yellow div) to height: 100%;
To make the interactions more clear, I gave the outermost .parent element a blue border, and I gave each #div-wrapper a border color that matches the inner #div and I set box-sizing: border box on all elements.
I have two divs inside a container. One is absolutely positioned and is on the top. The second div is the bottom of their container. They are both inside a container that is has position: relative. If the user scrolls horizontally not vertically on the bottom div, the absolutely positioned div will also scroll. The problem is that since it is positioned absolutely, the entire div will move when the bottom is scrolled.
Is there a way to prevent this? I just want to div to remain in place no matter what.
Here is a JSFiddle example. I can't just change the position: relative attribute of the container because in my case, it would mess up everything else in the page.
https://jsfiddle.net/2m16rtjp/6/
To see a desired set of results (I'm talking about how it is viewed when scrolling horizontally), replace position: absolute to position: fixed for .titleSection-right. I need to have the div positioned absolutely for a plugin to work.
I provided new fiddle with simple markup, as yours is not clear enough, hope this help,
The idea is very simple, on rightSide scroll, we can change left of titleSection-right.
HTML:
<div class="container">
<div class="box1">
<div></div>
</div>
<div></div>
</div>
CSS:
.container {
position: relative;
width 500px;
overflow-x: auto;
height: 200px;
}
.box1 {
position: absolute;
width: 400px;
height: 50px;
background-color:red;
overflow: auto;
}
.box1 > div{
width: 2000px;
height: 200px;
}
.box1 + div{
width: 2000px;
height: 200px;
}
JS:
$('.container').on('scroll', function(){
$('.box1').css('left', $(this).scrollLeft());
});
jsfiddle link
Try position:fixed instead of postion:absolute
.titleSection-right {
position : fixed;
top : 0;
}
add this in your script
$(".rightSide").scroll(function() {
if ($(".rightSide").scrollLeft() > 0)
{
$(".titleSection-right").css( "position", "fixed" );
} else {
$(".titleSection-right").css( "position", "absolute" );
}
});
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?
Here is a jsFiddle demonstration, and here's the markup:
HTML
<div class="container">
<div class="overlay"></div>
<div class="content">
<p>Content here</p>
<p>Overflow content here</p>
</div>
</div>
CSS
div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }
and JS (load on DOM Ready)
$('div.container').click(function(){
$('div.overlay').toggle();
});
In order to achieve what you were asking for I did the following
CSS
.container {
/* setting this to relative means
overlay is positioned relative to its parent */
position: relative;
}
.overlay {
/* element taken out of normal flow */
position: absolute;
/* removed bottom and right properties otherwise
updating top property has no effect */
height: 100px;
/* When scrollbar appears width decreases to less than
100px hence having to set to 100% to allow automatic calculation */
width: 100%;
}
JavaScript
Using jQuery I now set the top property appropriately
$(".container").scroll( function( ) {
$(".overlay").css({ top: $(this).scrollTop( ) });
});
Fiddle here
Assuming you really want to cover only the visible portion:
http://jsfiddle.net/GNCaT/1/
<style type="text/css">
div.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height:100px; /* fixed height, set by CSS or javascript, no bottom */
background: #F00;
opacity: 0.5;
}
</style>
<script>
$('div.container').click(function(){
$('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});
</script>
This will position the overlay to the top of the visible portion of the container.
You can use the DOM property scrollHeight :
$('div.container').click(function(){
$('div.overlay').css("height", this.scrollHeight).toggle();
});
http://jsfiddle.net/p6k2Z/1/
EDIT :
In order to just overlay the visible portion, you can use this :
$('div.container').click(function(){
$('div.overlay').css({
top: this.scrollTop,
height: $('div.container').css("height")})
.toggle();
});
http://jsfiddle.net/p6k2Z/3/
I have two divs in a content container one floating left and the other floating right. I am using the whole width of the screen. Left div width is 1290px and right div width is 625px. Sometimes when loading the page the scroll bar is changing the width of the available screen width and causing the div that floats right to get caught under the div that floats left. This happens after I added a footer div. I don't want to make the two divs a smaller width because this is for an ad display in clients offices. I need the full screen. Thanks!
Would it be possible for you to switch from floats to absolutes wrapped in a relative container?
Something like this (I shortened the widths for the sake of the sample...):
http://jsfiddle.net/perrytew/E6dUj/
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#container{
/* width: 1915px; */
width: 200px;
position: relative;
}
.leftpane {
/* width: 1290px; */
width: 100px;
position: absolute;
top: 0;
left: 0;
}
.rightpane {
/* width: 625px; */
width: 100px;
position:absolute;
top: 0;
/* left: 1290px; */
left: 100px;
}
</style>
</head>
<body>
<div id='#container'>
<div class='leftpane'>Left Content</div>
<div class='rightpane'>Right Content</div>
</div>
</body>
</html>