I have the following div:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-4 ticker">
</div>
</div>
</div>
<button onclick="lol()">sdas</button>
I append children to that by jQuery.
<script>
function lol() {
$( ".ticker" ).append( "<p>dsadsa</p>" );
}
</script>
I want when the are more children than can fit on the div max-height the div to become scrollable, any help how can I achieve that?
http://jsfiddle.net/#&togetherjs=RuintOf6bR
.ticker{
height: 700px;
max-height: 700px;
background-color: red;
overflow-y: scroll;
}
Related
Given the html and css below, is it possible to have a .child with class selected appear on top of other .child elements? I'd like if you can give an answer that would not change html structure and css position property of .child and .parent.
Also would be great to not toggle anything on parent, it is better to toggle child classes or styles, for parent it is better to set it once.
.parent {
position: absolute;
}
.child {
position: relative;
}
<div>
<div>
<div class="parent">
<div class="child selected"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
</div>
Greatly appreciate any input, thank you.
If you really want to stick to this HTML structure you could as example hide all elements (children) and show them only when they are selected.
A better solution would be having the selected class on the parent so then you could just simply give the selected parent a higher z-index.
Here you can find a snippet of how you can toggle the display without touching the HTML
// for demo purpuses
var toggleLayer = function() {
var next = $('.child.selected').removeClass('selected').closest('.parent').next();
var element = next.length ? next : $('.parent:first-child');
element.find('.child').addClass('selected')
}
.parent {
position: absolute;
}
.child {
position: relative;
display: none;
}
.selected {
display: block;
}
/* for demo purpuses */
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: red;
}
button {
position: fixed;
top: 120px;
left: 10px;
}
<div>
<div>
<div class="parent">
<div class="child selected">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">4</div>
</div>
</div>
</div>
<!--- FOR DEMO PURPUSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>
Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:
I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:
You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/
In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.
Any suggestions would be helpful.
Fiddle:
http://jsfiddle.net/mvn1ngby/12/
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
div.outer {
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div {
height:3000px;
}
#div1 div {
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
It is a hack but works.
The idea is to pull the area of the scroll-bar outside of the view port.
The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)
$('#div1').scroll(function() {
$('#div2').scrollTop($('#div1').scrollTop());
});
$('#div2').scroll(function() {
$('#div1').scrollTop($('#div2').scrollTop());
});
div.outer {
display: inline-block;
overflow: hidden;
border: 1px solid black;
}
#div1>div,
#div2>div {
height: 3000px;
}
.scrollable {
width: 150px;
height: 320px;
overflow-y: auto;
}
#div1 {
margin-right: -25px;
padding-right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="scrollable" id="div1">
<div></div>
</div>
</div>
<div class="outer">
<div class="scrollable" id="div2">
<div></div>
</div>
</div>
Try to add a new container div with css:
.container { width: 100%;}
And inside put the div1, div2
I think similar question must have been asked already, but I don't know how to find it...
I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.
This can be done with css selectors:
.content{
width:100%;
}
.sidebar{
width:25%;
}
.content:not(:only-child){
width:75%;
}
Pen: http://codepen.io/vandervals/pen/zGqorj
I think this is far more elegant than the table solution and the support is really wide: http://caniuse.com/#search=only-child
You need something like following. Use display:table to parent and display:table-cell to child element.
.wrapper{
display:table;
width: 100%;
}
.content{
display:table-cell;
background-color:yellow;
}
.sidebar{
display:table-cell;
width:25%;
background-color:blue;
}
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
Hope it helps.
I know you ask for a CSS solution, but here is a simple jQuery script to have a dynamic sizing (no matter the number of column, it will be divided and fit in the row).
$(document).ready(function() {
$('.row').each(function(k, v) {
var col = $('.column', this),
colNumber = col.length,
percent = 100 / colNumber;
console.log(percent);
col.css({'width' : percent + '%'});
});
});
* {
box-sizing: border-box;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.column {
float: left;
height: 200px;
margin: 0 auto;
border: 1px solid black;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
I am trying to create a series of divs that is horizontal align and only show 1 div that cover the whole screen.
Something like
div1 div2 div3 div4 div5…
Only show 1 div in the screen unless user click next.
My html
<section id='contents-wrapper' class='container'>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
<article class='row'>
<div>
</div>
</article>
</section>
CSS
.row{
float: left;
min-width: 600px;
min-height: 800px;
width: 100%
}
.container{
width: 10000px;
}
How do I only show 1 div at a time on all device and screen resolution?
remove
width:100%
from class ".row",
this makes every article width = 10000px
Have you tried,
.row {
display: inline-block; // as mentioned by bjb568
}
Also, remove all those article tags and add just one article tag and add all the div tags as its child elements.
.theContainer {overflow: auto; white-space: nowrap;}
.theDivs {display: inline-block; width: 100%;}
JS:
document.getElementById('p').onclick = function() { //Back
document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth-1)*document.getElementById('container').offsetWidth;
}
document.getElementById('n').onclick = function() { //Forward
document.getElementById('container').scrollLeft = Math.round(document.getElementById('container').scrollLeft/document.getElementById('container').offsetWidth+1)*document.getElementById('container').offsetWidth;
}
http://jsfiddle.net/KWwZP/