I need to add a scrolling bar when there is not enough space on a div.
Also, I would like to insert rows from bottom of this div.
I tried overflow:auto but it doesn't seem to work.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
});
});
#mydiv {
position: absolute;
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
height: 49vh;
max-width: 260px;
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
overflow: auto;
display: table-cell;
text-align: center;
vertical-align: bottom;
}
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
}
#add{
position:relative;
top:270px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
<div id="content">
</div>
</div>
<button id="add">add</button>
Add height:100% in #content. DEMO
#content{
width:100%;
height:100%;
position:absolute;
bottom:0;
overflow: auto;
}
You can also provide a down scroll for each new element. Test this Fiddle
var a=0;
var content=$('#content');
$(function(){
$('#add').click(function(){
a++;
content.append('line'+a+'<br>');
content.scrollTop(content.height());
});
});
in #content
you should have the following:
#content {
width:100%;
position:absolute;
bottom:0;
overflow: auto;
max-height:49vh;
}
If you want the scrolling bar to be down always, simply do in js:
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br>');
$('#content').scrollTop($(document).height());
});
});
Here's a working FIDDLE
Applying overlflow-y: scroll should've worked but instead made the scrollbars inert on both divs (never seen that before). I removed the outer div and changed the #content div position: absolute it works great now. As content grows, the scrollbar gets longer. If you want the box to expand as the content grows, use position: relativeI also changed the dynamic content from text lines to divs.
var a=0;
$(function(){
$('#add').click(function(){
a++;
$('#content').append('line'+a+'<br/>');
});
});
#content {
display: table-cell;
position: absolute;
/*Use relative if you want the box to expand with the content.*/
/*position: relative;*/
top: 1%;
bottom: 1%;
left: 2%;
width: 40vw;
max-width: 260px;
height: 70vh;
/*Use this if you want the box to strech to the edge */
/*min-height:100%;*/
font-size: 12px;
border: 1px solid black;
background-color: white;
border-radius: 5px;
text-align: center;
vertical-align: bottom;
bottom:0;
overflow-y: scroll;
}
#add {
position:absolute;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
</div>
<button id="add">add</button>
Related
So i have a container with a some text and a button after the text. This widget is repeated several times on my screen. Each container is having its height set based on the height of its contents and its a bootstrap column so its width changes as well. My problem is I want the button to always stick to the bottom of its widget, but if I set the position: absolute; bottom:0; right:25%; it is only centered as long as the widgets width doesn't change. Which it does. Any suggestions?
Here's your "flex"able friend in action. I am using some arbitrarily sized divs for illustration purposes:
div {
background: pink;
display: flex;
justify-content: center;
align-items: flex-end;
float: left;
margin-right: 10px
}
#flexDiv1 {
height: 200px;
width: 100px;
}
#flexDiv2 {
height: 300px;
width: 70px;
}
#flexDiv3 {
height: 100px;
width: 200px;
}
<div id="flexDiv1">
link
</div>
<div id="flexDiv2">
link
</div>
<div id="flexDiv3">
link
</div>
Check if this is what you need:
<div class="holder">
<div class='widget-footer'>
<button class="btn-inner">
foo
</button>
</div>
</div>
html, body{
height:100%;
margin:0;
padding:0;
}
.holder{
width: 100%;
height:100%;
/*height: 250px;*/
background: #dedede;
position:relative;
}
.widget-footer{
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.btn-inner{
margin-bottom: 5px;
}
https://jsfiddle.net/qw54w9j9/2/
Easy:
CSS
#dinamic {
position:relative;
height: 300px;
background: #ddd;
}
.center-bottom {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}
HTML
<div id="dinamic">
<div class="center-bottom">
<button>Click-me!</button>
</div>
</div>
https://jsfiddle.net/8pyn4Le4/
I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.
No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/
Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/
Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.
I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle
I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});
use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position
The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/
Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"
I have a page I'm creating where I want to have to columns the first colomn has a fixed a sized and the second column has to fill the rest of the window width. This is what I came up so far but it doesn't seen to work.
HTML:
<div id="container">
<div class="nav"></div>
<div class="page">my page content</div>
</div>
CSS:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
float:left;
background-color:#FFF;
}
JS FIDDLE
Just remove float: left and add width: 100% to .page
http://jsfiddle.net/scNSL/2/
You probably can do it like this: http://jsfiddle.net/scNSL/4/
<div id="container">
<div class="page">
<div class="nav"></div>
Inhalt
</div>
</div>
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:200px;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width:100%;
float:left;
background-color:#333;
}
Try this,
.page{
height:500px;
width:100%;
background-color:#FFF;
}
Note: Removed float:left; & added width:100%;
Instead of writing it myself...
Check out this article for more information:
http://css-tricks.com/fluid-width-equal-height-columns/
Should help you learn more about equal height columns 100% height etc.
Try this:
#container{
width: 100%;
padding: 0 0;
}
#container > div{
color: white;
}
.nav{
width:40%;
height:500px;
float:left;
background-color:#666;
}
.page{
height:500px;
width: 60%;
float:left;
background-color:#333;
}
The classical way of creating a fixed + fluid column layout is to float an element next to another element with padding:
HTML:
<div class="container">
<div class="nav"></div>
<div class="page">content</div>
</div>
CSS (float):
.container {
color: #FFF;
}
.nav {
background-color: #666;
float: left;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
height: 200px;
padding-left: 200px;
}
This has some drawbacks, particularly when the .nav and .page elements have differing heights, or when you want to add a border around the .page element.
The modern way of creating a fixed + fluid column layout is to use flexbox:
.container {
color: #FFF;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.nav {
background-color: #666;
height: 200px;
width: 200px;
}
.page {
background-color: #333;
-webkit-flex: 1;
flex: 1;
height: 200px;
}
fiddle (pardon the BEM classes, they're used so that the difference in CSS between these two methods can be seen more readily)
True Fit (allows for borders)
Change to this (see fiddle):
.page{
height:500px;
overflow: hidden; /* or auto */
background-color:#FFF;
}
By not floating the .page, and setting an overflow other than visible, the browser fills a block level element with the space beside the floated element (good explanation here).
Why this can be better than setting width: 100%
Compare these div elements with borders. One with width at 100%, one with the overflow set as above.