We Keep Coding

Javascript div toggle - Fade in not working?

I am trying to have two divs that are able to be toggled with their own respective buttons. They are dramatically different in size so I need the flow of the webpage to change when the div with the most/least content is shown so I can't have them 'position: absolute' on top of each other. One needs to be 'display: none' to take it out of the flow of the webpage, and on the toggle of a button, it should be 'display: block' and the other div should be 'display: none'.
So by doing it this way, the page isn't dramatically longer than it should be and it adjusts to the smaller size of content.
Problem is though, with 'opacity', I cannot get it to fade in. Could anybody help me with this?
//Sections
section1 = document.getElementById("section1");
section2 = document.getElementById("section2");
//Buttons
btn_section1 = document.getElementById("btn_section1");
btn_section2 = document.getElementById("btn_section2");
btn_section2.addEventListener("click", function () {
section1.classList.remove("active_content");
section1.style.opacity = "0";
section1.style.display = "none";
section2.classList.add("active_content");
});
btn_section1.addEventListener("click", function () {
section2.classList.remove("active_content");
section2.style.opacity = "0";
section2.style.display = "none";
section1.classList.add("active_content");
});
.active_content {
opacity: 1 !important;
display: block !important;
transition: all 0.3s ease-in-out !important;
}
#section1 {
opacity: 1;
transition: all 0.3s ease-in-out !important;
}
#section2 {
opacity: 0;
transition: all 0.3s ease-in-out !important;
}
<button id="btn_section1">Section 1</button>
<button id="btn_section2">Section 2</button>
<div id="section1">
<h1>Section 1</h1>
</div>
<div id="section2">
<h1>Section 2</h1>
</div>

That's because of the display css property (transition will not work, display is on or of). It may be better to use a few css-classes for fading in/out, something like this snippet (simplified code by using event delegation). For moving elements out of the way (effectively take them out of the page flow) you can use an absolute position with a negative top position.
document.addEventListener("click", evt => {
const origin = evt.target;
if (origin.id.startsWith("btn")) {
document.querySelector(`#${origin.dataset.fadeout}`).classList.remove("fadeIn");
document.querySelector(`#${origin.dataset.fadein}`).classList.add("fadeIn");
}
});
.fade {
opacity: 0;
transition: opacity 0.3s ease-out;
position: absolute;
/* move out of the way if not used */
top: -5000px;
}
.fade.fadeIn {
opacity: 1;
top: initial;
transition: opacity 0.3s ease-in;
}
<button id="btn_section1" data-fadein="section1" data-fadeout="section2">Section 1</button>
<button id="btn_section2" data-fadein="section2" data-fadeout="section1">Section 2</button>
<div id="section1" class="fade fadeIn">
<h1>Section 1</h1>
</div>
<div id="section2" class="fade">
<h1>Section 2</h1>
<div>
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>

You can use setTimeout function with this code.
setTimeout(function() {
section2.style.display = "none"
}, 300);
setTimeout(function() {
section1.style.display = "none"
}, 300);

Dialog with a fixed footer

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...

how to change the dimensions of multiple backgrounds of a single div elements using jquery

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>

Read more script and side by side divs not working together properly

After following this post on how to set up a "read more" for text sections, as well as this post to set up two side by side divs, I've been having an issue where the left floating div works fine - clicking "Read More" shows the rest of the text in the div, and vice versa for "Read Less". However, the second div does not work as intended - clicking "Read More" hides the text of the second div while also changing the ellipsis of the first div.
To make it more clear:
//Script for Read More/Read Less
<script>
$(document).ready(function() {
var showChar = 200;
var ellipsestext = "...";
var moretext = "Read More";
var lesstext = "Read Less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10">'+moretext+'</div></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(".moreelipses").toggle();
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
.comment {
width: 100%;
margin: 0 auto;
}
a.morelink {
outline: none;
color: #5bc0de !important;
}
.morecontent span {
display: none;
}
</style>
//First Div
<div class="container" style="width:620px; float:left;">
<div class="row">
<div class="comment more col-lg-8 col-lg-offset-2 text-center">
<p class="comment more">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.
</p>
</div>
</div>
</div>
//Second Div
<div class="container" style="width:620px; float:right;">
<div class="row">
<div class="comment more col-lg-8 col-lg-offset-2 text-center">
<p class="comment more">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>
</div>
<div style="clear:both">
</div>
Results:
If both divs are not expanded, both show up fine.
If div 1 is expanded and div 2 is not, div 1's text expands as expected. Div 2 stays the same.
If div 2 is expanded and div 1 is not, div 2's text stays contracted. Both div's ellipsis (...) disappear.
If both divs are expanded, div 1's text expands as expected, div 2's text stays contracted. Div 1 still shows its ellipsis when it's not meant to.

You just needed a tidying up with the code...
Here is the Fiddle: https://jsfiddle.net/bgssveqq/5/
partial JS:
$(".morelink").on("click", function() {
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
}
else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().parent().children("p").children(".moreelipses").toggle();
$(this).parent().parent().children("p").children(".morecontent").toggle();
});

How to make div "margin-bottom" equal to another div height?

I have this code (make element ".aaa" margin-bottom equal to element ".bbb" height):
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
It works but... how to make it to work dynamically if ".bbb" elements have varying heights?
I am very sorry, but I do not know how to explain it better.
Edit: Sorry, this is a code sample to better understand what I mean: https://jsfiddle.net/d77n9ajx/1/
Should be like the first one.

Try the following code:
$('.aaa').css('margin-bottom', $('#bbb').height() + 'px');

You can use the jQuery method outerHeight() to get .bbb height.
.outerHeight( [includeMargin ] ) Returns: Number
Description: Get the
current computed height for the first element in the set of matched
elements, including padding, border, and optionally margin. Returns a
number (without "px") representation of the value or null if called on
an empty set of elements.
After you get .bbb height you assign it to .aaa margin-bottom property with .css() function.
Code Snippet:
(function() {
var a = $(".aaa"),
b = $(".bbb");
var bOuterHeight = b.outerHeight();
a.css("margin-bottom", bOuterHeight);
var aMarginBottom = a.css("margin-bottom");
console.log("bbb height:" + b.outerHeight() + " aaa margin bottom:" + aMarginBottom);
})();
* {
box-sizing: border-box;
}
div {
height: 50px;
}
.aaa {
background-color: gold;
}
.bbb {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>

This is only an example, the objective is that you add the code:
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
in the event that resize the element bbb
function ChangeDivSize(){
$('.bbb').height(100);
$('.aaa').css( 'margin-bottom', $('.bbb').css('height'));
}
.aaa{
background-color:red;
height:100px;
margin-bottom: 10px;
}
.bbb{
background-color: blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>
<input type="button" value="Change Div Size" onclick="ChangeDivSize()" />

This is not very neat, but it should work.
var previousHeight = null;
setInterval(function()
{
var height = $('.bbb').height();
if (height == previousHeight)
return;
$('.aaa').css('margin-bottom', height);
previousHeight = height;
}, 10);
animate();
function animate()
{
$('.bbb').animate({ height: '0px' }, 1000, function()
{
$('.bbb').animate({ height: '100px' }, 1000, animate);
});
}
.aaa {
background: red;
height: 10px;
}
.bbb {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aaa"></div>
<div class="bbb"></div>

Here's a solution for your problem.
The code properly resizes aaa margin-bottom in case your bbb div changes as well.
HTML
<div class="aaa">Test the code</div>
<div class="bbb">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. </div>
jQuery
<script type="text/javascript">
$(document).ready(function(){
var bheight=$('.bbb').height();
$('.aaa').css('margin-bottom',bheight);
new ResizeSensor($('.bbb'), function() {
bheight=$('.bbb').height();
$('.aaa').css('margin-bottom',bheight);
}); //Function runs incase bbb div changes size
});
</script>
Please do include the following scripts to run your code:
<script src="js/jquery.min.js"></script>
<script src="js/ElementQueries.js"></script>
<script src="js/ResizeSensor.js"></script>
These .js files are my local versions. You do download it for yourself. You can find ElementQueries.js and ResizeSensor.js in following link:http://marcj.github.io/css-element-queries/
Hope this satisfies your concern!!

Since you have more .aaa and .bbb elements you should use each().
var calculateMargin = function(){
// Make ".aaa" margin-bottom equal to ".bbb" height
$('.aaa').each(function(){
$(this).css( 'margin-bottom', $(this).next('.bbb').css('height'));
});
};
calculateMargin();
$(window).on('resize', function() {
calculateMargin();
});
.wrap {
position: relative;
float: left;
margin: 10px;
}
.aaa {
width: 200px;
height: 200px;
background-color: pink;
}
.bbb {
position: absolute;
bottom: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro voluptatum dolorem deleniti laborum sapiente...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet...
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit....
</div>
</div>
<div class="wrap">
<div class="aaa"></div>
<div class="bbb">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae ipsa cum eum aspernatur sint eligendi. Accusantium, veniam, porro voluptatum dolorem...
</div>
</div>
or if .bbb will not always be the next sibling of .aaa, but will be within the same container; than:
$('.aaa').each(function(){
$(this).css( 'margin-bottom', $(this).parent().find('.bbb').first().css('height'));
});
Both will work in your example.

Based on #mbadeveloper try this:
$( ".bbb" ).resize(function() {
$( ".aaa" ).css( "margin-bottom" , $( ".bbb" ).height());
});
Hope the syntax is correct :/