Equal height column across two divs - javascript

I have been searching and cannot find an answer to this question. I have two divs, one contains one column and the other contains two columns. I am looking to get the three columns to equal heights across the the tow divs. I am sure this is possible I just don't know it yet. Here is code below. As you can see I can get them to align across the bottom but I am missing something.
.cplan-section{
display: flex;
}
.technical-products{
width:33%;
}
.training-products{
width:66%;
}
.section-title{
padding: 30px 0;
}
.technical-products, .training-products{
display:flex;
flex-direction: column;
justify-content: space-between;
}
.cproducts, .train-video, .job-aids{
padding:10px;
}
.col-header p{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.col-body{
padding:0 10px;
color:#000;
background-color: #d5deed;
}
.col-header{
min-height: 100px;
line-height: 100px;
text-align: center;
background-color: #98cb42;
color:#fff;
}
.col-tp{
width:50%;
border:2px solid #000;
}
.col-cp{
border:2px solid #000;
}
.sectioncp, .sectiontp{
display:flex;
}
.col-tp{
flex-direction:vertical;
}
.cp-header, .tv-header, .ja-header{
background-color:#98cb42;
color:#fff;
padding:5px
}
/*media for plan section */
#media (max-width: 767px){
.covid-plan-section{
display: inline;
}
.technical-products, .training-products{
display:block;
}
.technical-products{
width:100%;
}
.training-products{
width:100%;
}
.sectiontp{
display:flex;
}
.col-tp{
display:flex;
flex-direction: column;
justify-content: space-between;
}
}
#media (max-width: 479px){
.covid-plan-section{
display: block;
}
.technical-products, .training-products{
display:block;
}
.technical-products{
width:100%;
}
.training-products{
width:100%;
}
.sectiontp{
display:inline;
}
.col-tp{
width:100%;
}
}
<div class=cplan-section>
<div class=technical-products>
<div class=section-title>
<h2 style="text-align: center;">This is Section 1</h2>
</div>
<div class=sectioncp>
<div class=col-cp>
<div class=cproducts>
<div class=col-header>
<p style="text-align: center;">Title 1</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class=training-products>
<div class=section-title>
<h2 style="text-align: center;">This is section 2</h2>
</div>
<div class=sectiontp>
<div class=col-tp>
<div class=train-video>
<div class=col-header>
<p style="text-align: center;">Title 2</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class=col-tp>
<div class=job-aids>
<div class=col-header>
<p style="text-align: center;">Title 2</p>
</div>
<div class=col-body>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Your proposal, without setting a height or min-height property is not possible.
"Same-height" elements have no possibility of doing that, without referencing siblings in the same "line" using flexbox.
What you could do (unorthodox, almost a bad practice if you will be needing to dynamize, I'm guessing you won't), at least is my solution for your problem is to put it all together in the same flex container, one after the other.
That will end up as:
.title1
.title2
.col1
.col2
.col3
Rendering this:
But how? Your structure simplified:
<div class="cplan-section">
<div class="products">
<div class="title1">
<h2 style="text-align:center;">This is Section 1</h2>
</div>
<div class="title2">
<h2 style="text-align:center;">This is section 2</h2>
</div>
<div class="col1">
<div class="cproducts">
<div class="col-header">
<p style="text-align: center;">Title 1</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class="col2">
<div class="train-video">
<div class="col-header">
<p style="text-align: center;">Title 2</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
<li>Lorem Ipsum is simply dummy text.</li>
</ul>
</div>
</div>
</div>
<div class="col3">
<div class="job-aids">
<div class="col-header">
<p style="text-align: center;">Title 2</p>
</div>
<div class="col-body">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
And this is your CSS:
html { padding:30px; }
* { font-family:"Arial", sans-serif; box-sizing:border-box; }
.cplan-section .products {
width:100%;
display:flex;
flex-wrap:wrap;
border:1px solid #aaa;
padding:10px;
}
.cplan-section .products div[class^="title"] {
text-align:left;
padding-left:20px;
}
.cplan-section .products .col1,
.cplan-section .products .col2,
.cplan-section .products .col3 {
border:1px solid #777;
padding:10px;
}
.cplan-section .products .title1,
.cplan-section .products .col1 { flex-basis:40%; }
.cplan-section .products .title2 { flex-basis:60%; }
.cplan-section .products .col2,
.cplan-section .products .col3 { flex-basis:30%; }
#media (max-width:479px) {
.cplan-section .products {
flex-direction:row;
flex-wrap:wrap;
}
.cplan-section .products div[class^="title"],
.cplan-section .products div[class^="col"] { flex-basis:100%; }
.cplan-section .products .title1,
.cplan-section .products .col1 { order:-2; }
.cplan-section .products .title2 { order:-1; }
}
That's ok, but, what about when we stack elements in a mobile/responsive view? They will be badly organized.
Ok, by default every flex element contained has a 0 'order' value, and they stack for rendering in order of appearance. So if I modify that property for the first 3 elements, that should do it.
Take a look at the bottom of the CSS code.
And this is how viewport 479px and under should look:
Fiddle: https://jsfiddle.net/Dethdude/ch0mrgbe/23/

Related

How do I make my Sticky NavBar Scroll Animate properly?

I'm trying to create a sticky navigation bar that animates(gets smaller) when scrolling. I followed a video on youtube on creating it but it doesn't seem to be working for me every time I try to input the javascript.
$(window).on('scroll', function() {
if (window).scrollTop(); {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', Helvetica, sans-serif;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: 0.6s;
}
nav.black {
background: rgba (0, 0, 0, 8);
}
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 0.6s;
}
nav .logo a {
position: fixed;
padding-top: 25px;
font-family: 'Montserrat', Helvetica, sans-serif;
font-weight: 600;
color: #fff;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.6s;
}
nav ul {
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
font-weight: 550;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: 0.6s;
}
nav ul li a:hover {
color: #000;
background: #fff;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.sec2 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.content {
padding: 100px;
}
section.content h1 {
margin: 0;
padding: 0;
font-size: 2em;
}
section.content p {
margin: 20px 0 0;
padding: 0;
font-size: 1.1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Website</title>
<link rel="stylesheet" href="maint.css">
</head>
<body>
<nav>
<div class="logo">
<img src="trafficlight.png" style="width: 80px;">
WebSite Name
</div>
<ul>
<li>First</li>
<li>Packages</li>
<li>Classses</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
<section class="sec1"></section>
<section class="content">
<h1>LoremIpsumLorem<br></h1>
<p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
</section>
</body>
</html>
Ok. So. A couple of things to note:
The js line with if(window).scrollTop();{ has two syntax issues:
Parenthesis should wrap around the WHOLE statement that you are concerned with verifying.
You are terminating the statement BEFORE you open your if statements body.
It is generally a best practice to wait until the html document has loaded, before attempting to set up any listeners.
Here's the JS that I propose for your case (filler css added to highlight):
$(document).ready(function() {
$(window).on("scroll", function() {
console.log("scroll position: ", $(document).scrollTop());
if ($(document).scrollTop() > 0) {
$("nav").addClass("black");
} else {
$("nav").removeClass("black");
}
});
});
.black {
background-color: green;
}
body,
section {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="logo">
<img src="trafficlight.png" style="width: 80px;">
WebSite Name
</div>
<ul>
<li>First</li>
<li>Packages</li>
<li>Classses</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
<section class="sec1"></section>
<section class="content">
<h1>LoremIpsumLorem<br></h1>
<p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
</section>

Show and hide element through Javascript

In given below code I want to include show and hidden feature.
There are three header tags with the unordered list in my code.
By default all unordered list are hidden.
When I click on first header then it displays its corresponding unordered list.After it if I click on second/third header then it is not hiding previously opened unordered list.
What i want : when clicking on a header, previously opened unordered list must not display.
Try to understand my question by running below code.
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Help me...
You just need to select all the already .show and change them to .hidden and then atlast changed the clicked header children to .show. In this way only 1 <ul> will have class show
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
document.querySelectorAll('ul.show').forEach(ul=>{
ul.className="hidden"
})
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show < div < article < main > ul{
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Make sure you only add the click eventlistener to the headers, not all elements! Also before you add the show class to the ul belonging to the header, first remove all other show classes from the ul's of the other headers. I have also changed the adding of the show class to toggling of the show class so on a second click on the same header the menu closes again:
//JAVASCRIPT
var selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].parentNode.children[1].classList.remove("show");
}
let parent = e.target.parentNode.children[1]; // selects ul
parent.classList.toggle("show");
}
for (let i = 0; i < selectAllHeader.length; i++) {
selectAllHeader[i].addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
let selectAllUL = Array.from(selectAllHeader).map(header => header.parentNode.querySelector('ul'));
function show_article(e) {
let parent = e.target.parentNode.querySelector('ul') // selects ul
selectAllUL.forEach(function(node) {
node.classList.remove('show');
node.classList.add('hidden');
});
parent.classList.add('show');
parent.classList.remove('hidden');
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>
Not the most elegant solution. But should solve the problem at hand.
You can remove the .show class from all your elements and replace it with hidden, and only once you have done that add the .show class to the click element.
See working example below:
//JAVASCRIPT
let selectAllHeader = document.querySelectorAll('header');
function show_article(e) {
[...document.querySelectorAll('.show')].forEach(elem => {
elem.classList.remove('show');
elem.classList.add("hidden");
});
let parent = e.target.parentNode.children[1]; // selects ul
parent.className = "show";
}
for (let i = 0; i < selectAllHeader.length; i++) {
addEventListener('click', show_article);
}
/* CSS */
article {
float: left;
}
article:nth-child(2n) {
background-color: lightsteelblue;
}
article:nth-child(2n) header {
background-color: #7b9dc9;
}
article:nth-child(odd) {
background-color: lightpink;
}
article:nth-child(odd) header {
background-color: #e595a1;
}
header {
padding: 10px;
cursor: pointer;
}
ul {
list-style-type: circle
}
ul li {
margin-bottom: 40px;
}
ul.hidden {
display: none;
}
ul.show {
display: inline-block;
}
<!-- HTML -->
<main>
<!--article 1 -->
<article id="a1">
<div>
<header>
NANO AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 2 -->
<article id="a2">
<div>
<header>
GEDIT AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
<!--article 3 -->
<article id="a3">
<div>
<header>
TEXTMATE AREA
</header>
<ul class="hidden">
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
<li>Lorem ipsum dolor </li>
</ul>
</div>
</article>
</main>

How to set a variable for the parent's css class using the parent's variable for its id?

So what I want to do first is to set a variable for the parent using the id of it. Then I want to use this variable to find the css class of the parent and set a new variable again. It's important use the variable for the parent's id because later I want to change HTML style of this class with the specific id. My JS works fine without "var parent = parentid.find('.parent');"... I don't know what's wrong.
var parentid = document.getElementById('1');
var parent = parentid.find('.parent');
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
jQuery's .find() doesn't include the selector itself into it's search, you have to use .closest() (begins with the current element) instead:
var parentid = $('#1');
var parent = parentid.closest('.parent');
$(parent).css('background-color', 'gold');
.parent {
width: 150px;
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
The CSS 'background-color' property is PINK.
</div>
In your example, as long as the element only has a single class, you can just reference className
var parentid = document.getElementById('1');
var parent = document.getElementsByClassName(parentid.className)[0];
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>

How do I make the larger child divs to always fit in the parent div?

Html
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
Stylesheet
.child1, .child2, .child3{
display: block;
float: left;
}
.parent{
height: 200px;
}
The child divs may have a height that is larger than 200px but I am not able to figure out how make it fit inside the parent without truncating content of the child div.
See this fiddle
As mentioned in my comment, you could use overflow:auto; for .parent which will make the parent scrollable.
CSS
.child1,.child2,.child3 {
height:100px;
width:50%;
margin:10px;
}
.parent {
height: 200px;
overflow:auto;
}
If you want to just the vertical scrollbar, use overflow-x:auto for .parent instead of overflow:auto;
Please see the docs for more information about overflow.
Use overflow property on the parent or the children.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.parent {
height:200px;
width:400px;
border:1px solid;
}
.parent div {
float:left;
width:33%;
height:100%;
overflow-y:auto;
}
<div class="parent">
<div>Lorem Ispum</div>
<div>Lorem Ispum</div>
<div>Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum Lorem Ispum</div>
</div>

Equal height via script

It's a pain to use equal height with pure css that support at least ie9 and good browsers.
So, I'm decided to use js instead. If there's no js enabled on the user side, having not equal heights are the least of my problems.
However, I have a very specific request on this "equal height" situation.
Using flex, with the help of other SO user, we can have:
http://jsfiddle.net/4an5r1b3/1/
HTML
<div class="container">
<div class="col left">
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<div class="bottom-yeah">
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
</div>
</div>
<div class="col right">
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
<p>lorem ipsium</p>
</div>
</div>
CSS:
.container{
display: flex;
}
.col {
float: left;
width: 30%;
color: #fff;
}
.col.left {
display: flex;
flex-direction: column;
background-color: transparent;
color: red;
}
.col.right {
background-color: blue;
}
.bottom-yeah {
flex-grow: 1;
margin-top: 50px;
background-color: yellow;
}
I'm wondering if we can achieve the same thing,
using jquery so that, old browsers could behave as well?
Any known script that does this, so that we don't re-invent the wheel here?
var leftHeight = $('.col.left').height();
var rightHeight = $('.col.right').height();
if (leftHeight > rightHeight)
{
$('.col.right').height(leftHeight);
} else {
$('.col.left').height(rightHeight);
}
If your site is responsive, you can put this in a function and call it on $(window).resize

Categories

Resources