Develop Reference

Equal height column across two divs

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/

How to make actual dots on a slick slideshow?

How do I make actual dots on the slideshow as I currently just get buttons with numbers on them. I have no idea how to do this, or where to put it. Can anyone help? The code on my site is exactly what I was told to do on a site, but it doesn't work. This is a brand new site that has not yet been published anywhere.
#slideshow .slick-slide { min-height: 1180px;
}
#slideshow .slick-dots {
transform: translateY(-50);
position: relative;
z-index: 10;
bottom: 50px;
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
li {
margin: 0 0.25rem;
}
button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: blue;
text-indent: -9999px;
}
li.slick-active button {
background-color: red;
}
}
<div id="slideshow">
<div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 1</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
<div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 2</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.header ').stickyNavbar();
$('#slideshow').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
autoplay:true,
autoplayspeed: 2000,
});
})
</script>

you need to add:
slick.css
slick-theme.css

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>

IF function in jQuery function

I have been trying to run an overflow check if I hover on a div. But I use jQuery for the hover function and in the next function there's just simple Javascript. It's not working because I assume one can't use the if then function inside a jQuery function... but then I need the action that if I hover over the div the if then function should be executed. Can someone help me please? =)
So it's jQuery (hover) -> JS (check overflow) -> jQuery (add to div (here: "...read more..."))
HTML:
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
JS:
$('.hover_cap').hover(
if (function checkOverflow(hcd) {
var curOverflow = hcd.style.overflow;
if (!curOverflow || curOverflow === "hidden") hcd.style.overflow = "visible";
var isOverflowing = hcd.clientWidth < hcd.scrollWidth || hcd.clientHeight < hcd.scrollHeight;
hcd.style.overflow = curOverflow;
return isOverflowing;
}) {
function() {
$(this).append($('<a>...read more...</a>'));
},
function() {
$(this).find("a:last").remove();
}
}
}

Here is a snippet for you:
When you hover the outer div, if the inner div's text is overflowed append a 'readmore' button to the outer div.
When you unhover the outer div, if there is an appended 'readmore' button remove it.
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$(document).ready(function(){
$('.hover_cap').hover(function(){
var $this = $(this);
var $textContainer = $this.find('.hcd');
$textContainer.css('overflow','auto');
var isOverflowing = isOverflowed($textContainer[0]);
$textContainer.css('overflow','hidden');
if(isOverflowing) {
$this.append($('<a>...read more...</a>'));
}
}, function(){
var $this = $(this);
var lastA = $this.find("a:last");
if(lastA) {
lastA.remove();
}
})
})
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
<br/>
<br/>
<div class="hover_cap">
<div class="hcd">
Short text, no overflow
</div>
</div>

link hidden until scroll using jquery

I have a back to top link however it shows even when the page is at the top
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
I would like it to be hidden until the user starts to scroll the page - is this possible? If so, how?
The other thing that I have tried and tried to do is make the link change on hover with opacity but it doesn't seem to be working - can anyone see where I have gone wrong.
CSS
.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
opacity: 0;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 0.7;
}

jQuery:
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
$toplink = $('.w-toplink');
if(scrollTop > 0){
$toplink.addClass('active');
} else{
$toplink.removeClass('active');
}
});
CSS:
.w-toplink{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
.w-toplink:hover{opacity:1;}
Edit I've added some extra code for you.
.w-toplink is hidden by default
When the user scrolls it becomes 0.7opacity (through the class .active)
When the users hovers the link, it becomes fully visible (opacity:1)

Do this :
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.w-toplink').fadeIn(250);
} else {
$('.w-toplink').fadeOut(250);
}
});
And add this to your CSS file :
.w-toplink {
display: none;
}

Sounds like fun...
It is possible you have to simply put an eventListener for Scroll.
which is possible in either vanillaJS or jQuery...
see this for more about scroll: https://api.jquery.com/scroll/
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
(Assuming you are already using the jQuery CDN.
<script type="text/javascript">
$("a.w-toplink").hide();
$( window ).scroll(function() {
$( "a.w-toplink" ).css( "display", "visible" ).fadeIn( "slow" );
});
$("a.w-toplink").hide();
$(window).scroll(function() {
$("a.w-toplink").show();
});
.w-toplink {
display: block;
position: fixed;
bottom: 0;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
Back to to top
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
<ul>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>