I'm working on a react-app and I want the basic structure of (header, sidebar and content) using flex-box, so what I did is that I gave the body the height of 100%, overflow equal hidden and wrapped the three components in one component with the display of flex and direction to column, now the header is wrapped in a container and the sidebar and the content are wrapped in another, the header flex is 0 and the height is totally up to the padding needed, the sidebar and the content's parent's display is flex with the direction of row, same as the header the sidebar's flex is 0 and the content is 1 the basic view is alright but when the content's children overflow the height I'm not able to scroll even when adding the height of the parent to 100% and overflow-y to scroll or auto, what am I missing here ?
here is the page view
here is the component's structure
import React from 'react';
import Header from './components/header';
import Sidebar from './components/sidebar';
import Content from './components/content';
function App() {
return (<React.Fragment>
<div className="header-container">
<div className="header" style={{
backgroundColor: 'red',
color: 'white'
}}>
<h1>Header</h1>
</div>
</div>
<div className="content-container">
<div className="sidebar" style={{
backgroundColor: 'blue',
color: 'white'
}}>
<h1>Sidebar</h1>
</div>
<div className="content" style={{
backgroundColor: 'green',
color: 'white'
}}>
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</React.Fragment>);
}
export default App;
and here is the css
html, body {
margin: 0 !important;
padding: 0 !important;
}
body {
height: 100% !important;
overflow: hidden;
}
h1 {
margin: 0;
}
#root {
display: flex;
flex-direction: column;
}
p {
width: 30px;
}
.header-container {
display: flex;
flex: 0;
}
.content-container {
display: flex;
flex-direction: row;
flex: 1;
height: auto;
}
.header {
padding: 10px 0;
flex: 1;
width: 100%;
}
.sidebar {
flex: 0;
padding: 0 10px;
}
.content {
flex: 1;
flex-grow: 1;
}
Related
I have a dialog with some items ("tags") and a footer with a "done" button. When the items get populated enough, scroll is added and the footer is shown BENEATH all the items.
But I want to show the footer at all times, to be fixed, and make the scroll only work for the populated items.
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeWithoutSavingDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: false,
}}>
<div className={styles.tags}>
<div className={styles.tagsDialogCloud}>
{this.state.dialogTags.map((tag, index) => this.renderDialogTags(tag, index))}
</div>
</div>
<DialogFooter>
{this.state.showDialogButton == true ?
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>:null
};
</DialogFooter>
</Dialog>
</div>;
enter image description here
Picture shows an example of what I want to achieve. The "tags" part is scrollable, but the "Done" button is always shown.
This sounds more like a CSS problem than a React one.
The problem with your code is that the DialogFooter component should be absolute so it won't extend the parent's height and you should render the button without a condition.
Here's an example of how you can achieve it:
JSX:
<div className="popup-wrapper">
<div className="popup">
<div className="popup-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className="popup-footer" />
</div>
</div>
CSS:
.App {
font-family: sans-serif;
text-align: center;
}
.popup-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
height: 300px;
width: 200px;
background: grey;
position: relative;
}
.popup-footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
background: silver;
}
.popup-content {
max-height: 260px;
overflow: auto;
}
And a sandbox can be found here
Try this HTML as your dialog code/you can modify the code as per your dialog this is a code to give you a hint.
<div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
Hope this helps...
Happy coding...
I have given multiple backgrounds to a single div in a webpage. I wanted that as I scroll down that the background-image(Stickman), which is at the front, should remain of the same size, and the background-image(Landscape), which is behind it, should zoom.
I want to keep the size of stickman less than the container size.
But in my code both the background images are getting zoomed, kindly help me with it.
Below is the code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>
You've just forgot to set a value for the stickman.
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
See the snippet below:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});
body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
I have a layout with an image on the left and a tab menu on the right. I would like the image and the text to always occupy each 50% of the width (except if the browser window is too small, in which case the image and tabbed menu stack on top of each other), meaning that both should automatically resize.
The image and tab menu are set as two columns:
.col-container {
display: flex;
margin-left: auto;
margin-right: auto;
width: 100%;
clear: both;
}
.col {
flex: 1;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
<div class="col-container">
<div class="col" style="background:white">
<img src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="">
</div>
<div class="col" style="background:white">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
</div>
Full running code here: fiddle
Now, my problem is that I would like height of the content of any tab to be limited to that of the image. There should never be text that goes further down than the left image's height. It means that if there is too much text, it should become scrollable. As the viewer windows get rescaled, both the image and the "allowed text height" should adapt. As you can see on the fiddle example, the text in the "About" tab currently runs down way past the image height.
I have rewrote your code a little so it can work as desired. This code is fully responsive (resize the browser to see) and cross browser supported.
I have coloured the background red so you can see what is happening here.
I have also reduced #media all and (max-width:700px) to 500 just for this demo so it fits the stackoverflow window.
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
.col-container,
.col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.col-container {
-ms-flex-flow: wrap;
flex-flow: wrap;
}
.col {
background: #b00;
position: relative;
-ms-flex: 1 1 0%;
-webkit-box-flex: 1;
flex: 1 1 0%;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
#menu {
position: relative;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
background: #fff;
z-index: 10;
}
.scroll {
overflow-y: auto;
position: absolute;
top: 0;
max-height: 100%;
z-index: 5;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
#media all and (max-width:500px) {
.col-container {
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;
}
.InputItem,
.col {
-ms-flex: 1 1 auto;
-webkit-box-flex: 1;
flex: 1 1 auto;
text-align: center;
}
.scroll {
position: relative;
padding-top: 0;
}
}
<div class="col-container">
<div class="col">
<img id="menuImg" src="https://wallpaperbrowse.com/media/images/4995_Sibl_9780307957900_art_r1.jpg" alt="" width=100%>
</div>
<div class="col">
<div id="menu" class="col">
<h2>Hello World</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
</div>
</div>
<div class="content col">
<div id="Home" class="tabcontent scroll">
<h3>Home</h3>
<div>
Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime
hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae
sunt, non sunt tamen ab earum spe causae diligendi profectae. Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem
ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter
ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Accedebant
enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute
velut filo pendere statum orbis terrarum fictis vocibus exclamabant. Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt
et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus. Ut enim benefici
liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus. Et quia Mesopotamiae
tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta
vastarat. erat autem quod cogitabat huius modi. Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus. Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus
parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare. Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur
nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Oportunum
est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Quae dum ita struuntur, indicatum
est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi,
qui atrocium criminum ponderibus urgebantur. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas
Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? At
nunc si ad aliquem bene nummatum tumentemque ideo honestus advena salutatum introieris, primitus tamquam exoptatus suscipieris et interrogatus multa coactusque mentiri, miraberis numquam antea visus summatem virum tenuem te sic enixius observantem,
ut paeniteat ob haec bona tamquam praecipua non vidisse ante decennium Romam. Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros
excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.
</div>
</div>
<div id="About" class="tabcontent scroll" style="display:none;">
<h3>About</h3>
<p>Blah.</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can use flex and then position properties on the divs to acheive this.
Add this CSS to your fiddle and you are done.
.col-container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.col {
flex: 1;
border: 1px solid red; /*For demo purpose*/
}
.col:nth-child(2) {
position: relative;
overflow: auto;
}
#Home {
position: absolute;
}
#About {
/*This only for the first load. You are anyway changing the display property
on the tab clicks*/
display: none;
}
See the fiddle
You should give max-height to tabcontent class.
overflow: auto;
max-height: 386px;
you can get img elemet height than you can et tabcontent height
if you use jquery it s easer than dom js
var imageHeight= document.getElementById("img_element").style.height;
document.getElementsByClassName("tabcontent").style.height=imageHeight;
Just add this and try I hope this will sort out your problem.
.scroll
{
height:100vh;
overflow:hidden;
}
If it does not work just comment :) remember just add this in last of your css. Do not delete anything.
I started learning javascript this week and I'm getting my head round the basics. I've started building what will be a "FAQ" section for a page that uses a toggle switch to open and close target divs.
However, by default the div's display is set to visible. I've put a function in that will set this to hidden, so that the dropdown's are collapsed on page load. I've tried stacking them (the toggle function, and display functions), separating them with a semi-colon within "onLoad" in the body tag.
Now, before I applied these functions to run "onLoad" both worked fine. However now only the 2nd function works that toggles the divs, but the function stating to have the divs collapsed onLoad is not.
Where am I going wrong here?
Also, seeing as I'm new to this, if there's a better way, or more shorthand version of this feel free to let me know :)
function toggleOnLoad() {
document.getElementById('dropdown01').style.display = 'none';
}
function toggleFunction() {
var dropDown = document.getElementById('dropdown01');
var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png";
var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png";
if (dropDown.style.display != 'none') {
dropDown.style.display = 'none';
document.getElementById('toggle-image').src = dropDownExpand;
} else {
dropDown.style.display = '';
document.getElementById('toggle-image').src = dropDownCollapse;
}
}
css: body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 3em 1em 3em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300;
height: 3em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 2em;
background-color: #eeeeee;
}
HTML & Javascript:
<body onLoad="toggleOnLoad(); toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<button id="toggle" onClick="toggleFunction()">
<img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%">
</button>
</div>
</div>
<div id="dropdown01" class="dropdowns">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
</div>
</body>
Do create an init function manually.
window.addEventListener("load", myInit, true); function myInit(){ // call your functions here.... };
By doing this you can call that set of functions anytime.
The better way to do it i believe is to call your functions inside window.load instead of the body as follows:
window.onload=function(){
toggleOnLoad();
toggleFunction();
}
Your idea is correct. Probably we can simplify the implementation.
First, let's define a new class hidden to remove elements.
.hidden {
display: none;
}
Now we just can toggle this class to show and hide the content.
function toggleFunction() {
...
content.classList.toggle('hidden')
...
}
Also remove toggleOnLoad function from the body and add hidden to the content div
<body onLoad="toggleFunction()">
...
<div id="dropdown01" class="dropdowns hidden">
...
</body>
Finally, the toggleFunction must add the right class based on the hidden class of the content.
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
...
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
This is functional snipped:
const content = document.getElementById('dropdown01')
const dropDown = document.querySelector('#toggle-image')
const collapse = 'fa-plus-square'
const expand = 'fa-minus-square'
function toggleFunction() {
dropDown.classList.remove(expand, collapse)
content.classList.toggle('hidden')
const state = content.classList.contains('hidden') ? collapse : expand
dropDown.classList.add(state)
}
body {
background-color: #cccccc;
padding: 0;
margin: 0;
}
.container {
margin-left: 20%;
margin-right: 20%;
background-color: white;
padding: 1em 2em 1em 2em;
}
.toggle-header {
padding: 0.5em;
background-color: #0067b1;
overflow: auto;
}
#toggle {
border: none;
width: 300px;
height: 2em;
background-color: #0067b1;
outline: 0;
}
.button-container {
float: right;
margin-right: 0.5em;
display: inline-block;
}
.dropdowns {
padding: 1em;
background-color: #eeeeee;
}
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<body onLoad="toggleFunction()">
<div class="container">
<div class="toggle-header">
<div class="button-container" title="">
<i id="toggle-image" class="fas fa-plus-square" onClick="toggleFunction()"></i>
</div>
</div>
<div id="dropdown01" class="dropdowns hidden">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</div>
</body>
I have been working on a Pop up but i'm unable to properly place it inside the container...
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">×</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
I'm trying to insert the pop up into the container whenever the minimize button is clicked. Any help will be appreciated.
Change .popup container from position:fixed to position:absolute
Add below css in .minimized class
.minimized {
position: relative;
z-index: 1;
vertical-align: bottom;
}
bottom property works when position is specified to the container.
position:relative will come handy in this scenario.
Try to reduce the height (approzimately more then the red div).
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
var fatherDiv=elem.parentNode.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
fatherDiv.style.zIndex="2";
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false;
fatherDiv.style.zIndex="0";
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
};
.container {
height: 89px;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background-color: red;
}
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
width: 100%;
height: auto;
overflow: auto;
z-index: 0;
top: 89px;
position: fixed;
}
.maximized {
top: 89px;
position: fixed;
display: block;
width: auto;
height: auto;
z-index: 2;
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;z-index:2;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">×</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>
<div class="container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>
</html>
Log:
new var fatherDiv that is the container div "Popup";
add "fatherDiv.style.zIndex='2'" to set the Div in front of the red Div (z-index work like a layer,is like 2 layer of paper).zIndex work only on the main container of a thing (in this case the Popup Div,may doesn't work on the children in some case);
add the "top" and "position" rule in .minimized because you can't use top without the position rule (i balance the position only to show you this result,you may balance this value in your file)
Say me what you think about this.