Looking to have 100% height on two divs side by side. I want to keep each div independent in scrolling content in each but in the blue div/column, I would like to have a smooth scroll feature. It works now but you will see the red column does not retain its 100% column height.
Thanks for any insight...
$(document).ready(function (){
$('a').click(function (){
$('html, body').animate({
scrollTop: $("#sectionb").offset().top
}, 2000);
});
});
<div id="adiv" style="height: 100%; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: relative; background: blue; overflow: auto">
Click Me
<section>
Section A
</section>
<section>
<div id="sectionb">
Section B
</div>
</section>
</div>
jsFiddle
$(document).ready(function (){
$('a').click(function (event) {
event.preventDefault();
$('#bdiv').animate({
"margin-top": "-" + $("#sectionb").offset().top
}, 2000);
});
});
$(document.body).css({"overflow": "hidden"}); // No scrollbar
body, html {height: 100%; padding: 0; margin: 0;}
a {color: #FFF}
section {height: 700px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adiv" style="height: inherit; float:left; position: relative; width: 30%; background: red;">
A
</div>
<div id="bdiv" style=" position: absolute; left: 30%; background: blue; overflow-y: scroll; width: 70%;">
<section id="sectiona">
Section B
<br>
Section A
</section>
<section id="sectionb">
Section A
<br>
Section B
</section>
</div>
100% means 100% of the current screen's height/width so it stretches to the height of the current screen, but here is a solution to make the red area the exact same height as the blue area.
Related
At the moment, I am learning how to write in javascript and jquery.I wrote a simple jquery code where you have a navigation menu which on click it is scrolling to a specific div inside an overflow container. However, the scroll function is not working. If someone can help me I am going to be really grateful. Thank you in advance.
My Code:
$(document).ready(function() {
$("#Anchor_A").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_A").offset().top
}, 'slow');
});
$("#Anchor_B").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_B").offset().top
}, 'slow');
});
$("#Anchor_C").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_C").offset().top
}, 'slow');
});
$("#Anchor_D").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_D").offset().top
}, 'slow');
});
$("#Anchor_E").on('click', function() {
$('.Container').animate({
scrollTop: $("#Box_E").offset().top
}, 'slow');
});
});
.Wrapper{
display:flex;
position:relative;
width:90vw;
height:90vh;
background-color:purple;
}
.Menu{
position:relative;
width:10vw;
height:90vh;
background-color:blue;
}
.Menu li{
position:relative;
font-size:4vw;
line-height:5vw;
text-align:center;
color:white;
cursor:pointer;
list-style-type: none;
}
.Container{
position:relative;
width:80vw;
height:90vh;
background-color:red;
overflow-y:hidden;
}
.Box{
position:relative;
width:80vw;
height:90vh;
background-color:purple;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A">A</li>
<li id="Anchor_B">B</li>
<li id="Anchor_C">C</li>
<li id="Anchor_D">D</li>
<li id="Anchor_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
Best regards,
George S.
The key point here is that you need to use position() but not the offset() method. The offset() method returns coordinates relative to the document.
Description: Get the current coordinates of the first element in the set of matched elements, relative to the document.
However you are trying to scroll them inside a container. See the implementation:
Note 1: I've optimized code a bit so instead of multiple similar blocks data-target attribute is used to define which block scroll to.
Note 2: the position() method returns coordinates from left top corner of the container. Thus the coordinates are changed once the content has been scrolled. That is why we need to compensate it by adding $('.Container').scrollTop().
$(document).ready(function() {
$(".Menu li").on('click', function() {
$('.Container').animate({
scrollTop: $($(this).data('target')).position().top + $('.Container').scrollTop()
}, 'slow');
});
});
.Wrapper {
display: flex;
position: relative;
width: 90vw;
height: 90vh;
background-color: purple;
}
.Menu {
position: relative;
width: 10vw;
height: 90vh;
background-color: blue;
}
.Menu li {
position: relative;
font-size: 4vw;
line-height: 5vw;
text-align: center;
color: white;
cursor: pointer;
list-style-type: none;
}
.Container {
position: relative;
width: 80vw;
height: 90vh;
background-color: red;
overflow-y: hidden;
}
.Box {
position: relative;
width: 80vw;
height: 90vh;
background-color: purple;
cursor: pointer;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="Wrapper">
<div class="Menu">
<li id="Anchor_A" data-target="#Box_A">A</li>
<li id="Anchor_B" data-target="#Box_B">B</li>
<li id="Anchor_C" data-target="#Box_C">C</li>
<li id="Anchor_D" data-target="#Box_D">D</li>
<li id="Anchor_E" data-target="#Box_E">E</li>
</div>
<div class="Container">
<div class="Box" id="Box_A">
Box A
</div>
<div class="Box" id="Box_B">
Box B
</div>
<div class="Box" id="Box_C">
Box C
</div>
<div class="Box" id="Box_D">
Box D
</div>
<div class="Box" id="Box_E">
Box E
</div>
</div>
</div>
</body>
</html>
I am trying to create a push animation, where one element 'pushes' the other.
I have 4 divs in a parent div 2 are boxes that I want the push animation happening on, and 2 'button' divs. The wrapper div doesn't have a set height.
The problem is, the second box div gets placed under the first box div. How can I get them to be right and left of each other, not one on top of the other.
Also, I need a bit of help with the animation. How can I get one box div to 'push' the other?
This is what I mean by 'push' effect:
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#leftBox').animate({
left: '-200px'
});
$('#rightBox').animate({
left: '-200px'
});
});
$('#rightBtn').click(function() {
$('#leftBox').animate({
left: '200px'
});
$('#rightBox').animate({
left: '200px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
}
#leftBox,
#rightBox {
width: 400px;
height: 100px;
display: inline-block;
position: relative;
}
#rightBox {
left: 400px;
}
#leftBtn,
#rightBtn {
width: 200px;
height: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div><div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
You can use display:inline-block on #leftBox & #rightBox to place them side by side. For animation, wrap them with another div(#wrapper) & change the position of #wrapper on click .
Example:
JSFiddle
HTML:
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
</div>
JS:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?
You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo
Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}
Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle
Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class
If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}
I'm essentially trying to create this effect:
https://squareup.com/
but I cannot figure out how to get my div to overflow to the left while it stays centered on the page when the window is resized.
Here's a Fiddle
HTML
<div class="content">
<div class="wrapper">
<h1>CONTENT</h1>
</div>
</div>
CSS
.content {
background: url(../bg-image.png) center no-repeat;
width: 100%;
height: 400px;
}
.wrapper {
width: 980px;
height: 400px;
margin: 0 auto;
}
I need to set the width of a div depending on the page size.
I have three columns. The first and third ones are 50px fixed. I need to set my middle one so it will take all the space with a small margin. I haven't found how to do it in CSS. So I tried using Javascript with window.innerWidth and subtracting the two 50px.
Here is my CSS :
<div class="col1">
...
</div>
<div class="col2">
<div class="col2-1">
...
</div>
<div class="col2-2">
...
</div>
</div>
And the corresponding Javascript
<script type="text/javascript">
setStoreInfoWidth = function () {
$('div.col2-1').css('width', window.innerWidth-100 + 'px')
};
setStoreInfoWidth();
$(window).resize(function () {
setStoreInfoWidth();
});
</script>
Here is a JsFiddle with the code working : http://jsfiddle.net/MrYUb/
However, I can't make it work on my actual website.
Do you have any idea why?
You can use negative margins to create a 3 column layout:
http://jsfiddle.net/teynon/J2mx7/2/
<div class="container">
<div class="leftCol">
Left stuff
</div>
<div class="rightCol">
Right Stuff
</div>
<div class="middleCol">
Middle stuff
</div>
</div>
<div style="background-color: #0000BB; clear: both;">Test</div>
CSS:
.container {
width: 100%;
position: relative;
}
.leftCol {
float: left;
margin-right: -50px;
width: 50px;
left: 0px;
min-height: 100px;
background-color: #FF0000;
}
.rightCol {
width: 50px;
margin-left: -50px;
right: 0px;
min-height: 50px;
background-color: #00FF00;
float: right;
}
.middleCol {
margin: 0px 55px 0px 55px;
background-color: #0000FF;
min-height: 50px;
}
Why not using percent? If you have 2 divs, that 'll make 50% for each.