We Keep Coding

How to dynamically get the length of a div using JQuery and JavaScript?

I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary

I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>

Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>

Removing display: none when changing between #media sizes

I have two divs. When the resolution is large enough, both divs are shown next to each other. But when the resolution is too small it only shows one of the divs, but I can toggle between them with two buttons appearing at this resolution.
So my HTML is just like this:
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT </div>
<div id="right"> CONTENT </div>
The JavaScript used for the toggle is just:
<script>
$(function() {
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
});
</script>
Basically everything works fine. When the resolution is too small, the buttons pop up, and it is divided into one div at a time, and when the resolution is large enough they are next to each other.
However, if I change the width of my browser window, and toggle between the two divs, and then go back, one of the divs still has display: none resulting in it not showing when there has been toggled.
I know one might argue that people don't change resolutions on phones, and therefore this shouldn't be a problem. But somehow it annoys me a lot. So I was wondering if there was some way to tell it, that if above a certain resolution, BOTH divs should have the display: none or inline style removed.

You could add a resize listener to show both elements if the size is sufficiently high:
$('#buttons> p').click(function() {
var ix = $(this).index();
$('#left').toggle(ix === 0);
$('#right').toggle(ix === 1);
});
$(window).resize(function() {
if (Number($(window).width()) > 600) $('#left, #right').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
<p>LEFT</p>
<p>RIGHT</p>
</div>
<div id="left"> CONTENT1 </div>
<div id="right"> CONTENT2 </div>

use media queries for setting different css based on screen size. PFb sample. you can also add display style as css as None or Block based on screen width.
body {
background-color: red;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Lightgallery - Showing local comment box html instead of fb comment box

I would like to display my custom comment box html instead of facebook's comment box in my CakePHP site's Lightgallery implementation. How can I do that? Will it need plugin customization?
And, facebook comment box implementation is not responsive while I would need it to be responsive as well.

I had a similar situation where I needed to display the Photo captions and My own data as well. I created my own sidebar and overlaid it on top of the gallery but I was running into lots of height issues. So I utilised the Gallery layout by inserting my sidebar into the gallery.
Here's what I did, I created my sidebar and added it in the body, and hid it, then when the Gallery opens I cloned it and inserted it into the gallery. When the gallery closes I destroy it, and call it again when the gallery opens again.
I also hide the captions by default and write them to the sidebar after each slide transition.
Have a look at the lightGallery API Events, without them this would not be possible.
HTML
// My own sidebar element, I added this just before the closing Body tag, it is hidden via CSS
<div class="gallery-info-box">
<div class="slide-caption-wrap">
// Photo captions will be populated here
</div>
// include advert
// include comments
</div>
CSS
// Push Gallery objects 420px to the right so the controls wont be covered by the sidebar
.lg-admin-wrap,
.lg-outer .lg-video-cont,
.lg-outer .lg-thumb-outer,
.lg-thumb-open .lg-toogle-thumb,
.lg-outer .lg-toogle-thumb,
.lg-toolbar.group
#media (min-width: 768px)
padding-right: 420px
.lg-actions .lg-next
#media (min-width: 768px)
margin-right: 420px
// Position and style gallery sidebar
.gallery-info-box
display: none
.lg
.gallery-info-box
display: block
position: absolute
z-index: 1080
top: 0
right: 0
width: 400px
height: 100%
padding: 20px
background-color: white
#media (max-width: 767px)
display: none
.slide-caption-wrap
h4
margin-top: 0
font-size: 24px
JS
var $lg = $('#light-gallery');
// Perform any action just before opening the gallery
$lg.on('onAfterOpen.lg',function(event){
// Hide the original comments
$('.lg-sub-html').hide();
// Insert sidebar into the gallery
$('.gallery-info-box').clone().appendTo('.lg').show();
});
// Perform any action after the slide has been loaded
$lg.on('onAfterAppendSubHtml.lg',function(event){
var lgSubContent = $('.lg-sub-html').html();
// Populate the sidebar with the captions
$('.lg .slide-caption-wrap').html(lgSubContent);
});
// Perform any action just after closing the gallery
$lg.on('onCloseAfter.lg',function(event){
// Remove the gallery sidebar
$('.lg .gallery-info-box').remove();
});

At the end, we decided to use light gallery only in case of desktop and have normal responsive page link in case of smaller screens. It went something like this :
HTML
<a href="/projectitems/view/[ID]" class="light-thumb" data-image="/upload/projectitems/[ID]/image.jpeg">
<img src="/upload/projectitems/[ID]/image.jpeg" alt="">
</a>
...
JS
if ($(window).width() > 991) {
// Code to load lightgallery files by $.getScript() and append to <head>
$( "a.light-thumb" ).each(function( index ) {
var currentHref = $(this).attr('href').replace('/view/', '/viewNew/'); // Link change to load only comment box
$(this).attr('data-sub-html', '<div class="fb-comments" id="comments-' + index + '" data-href="' + currentHref + '"></div>');
$(this).attr('href', $(this).attr('data-image'));
});
$(".row-fluid.slider").lightGallery({
selector: '.light-thumb',
appendSubHtmlTo: '.lg-item',
addClass: 'fb-comments',
mode: 'lg-fade',
download: false
});
$(".row-fluid.slider").on('onAfterSlide.lg', function(event, prevIndex, index) {
var commentBox = $('#comments-' + index);
var dataUrl = commentBox.attr('data-href');
$.ajax({
url : '<?= $this->base ?>' + dataUrl,
type : 'GET',
success : function(response){
commentBox.html(response);
commentBox.css('background-image', 'none');
$("body").css("overflow", "hidden");
}
});
});
$(".row-fluid.slider").on('onCloseAfter.lg', function(event) {
$("body").css("overflow", "auto");
});
}

Automatically resize text area based on content [duplicate]

This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 8 years ago.
On one of my pages, I have a text area html tag for users to write a letter in. I want the content below the text area to shift down, or in other words, I want the text area to resize vertically with each line added to the text area and to have the content below simply be positioned in relation to the bottom of the text area.
What I am hoping is that javascript/jquery has a way to detect when the words wrap, or when a new line is added and based on that do a resize of the text area container.
My goal is to make the content below the text area stay the same distance from the bottom of the text no matter how much a user writes.
The text area creates a scroll bar when the text overflows.

Since I wasn't too happy with several solutions I found on the web, here's my take on it.
Respects min-height, max-height.
Avoids jumping around and flashing the scrollbar by adding a buffer to the height (currently 20, may replace by line-height). However still shows scrollbar when max-height is reached.
Avoids resetting the container scroll position by incrementally reducing the textarea height instead of setting it to 0. Will thusly also remove all deleted rows at once. Works in IE and Chrome without browser sniffing.
http://jsfiddle.net/Nd6B3/4/
<textarea id="ta"></textarea>
#ta {
width:250px;
min-height:116px;
max-height:300px;
resize:none;
}
$("#ta").keyup(function (e) {
autoheight(this);
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));

http://www.jacklmoore.com/autosize/
Download the plugin first:
Step 1: Put "jquery.autoresize.min.js" where you keep your jquery plugins.
Step 2: Link the file in HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script> Be sure that this link comes after your jquery link, and before your own javascript/jquery code links.
Step 3: In your javascript code file simply add $('#containerToBeResized').autosize();

$('textarea').keyup(function (e) {
var rows = $(this).val().split("\n");
$(this).prop('rows', rows.length);
});
this work sample.

See this Fiddle from this answer. That increases the height of the textarea based on the number of lines.
I think that's what you're asking for.
Copied the code from the answer below:
HTML
<p>Code explanation: Textarea Auto Resize</p>
<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>
JS
/*global document:false, $:false */
var txt = $('#comments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');
$('body').append(hiddenDiv);
txt.on('keyup', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}

Css not rendering properly after the script call

I am currently using two accordion bars where both have two different colours rendering when they are clicked.First one shows a green color.Functionality is to toggle the information needed down the bar when clicked on it.
Clicking again it should toggle back all the information rendering a different colour,for which i am using a java script for the toggle to happen. Previously we used to used three different images for this bar wheres as now,I need to remove the images.
As you can see in my .xhtml file a section-middle will be used as a primary bar and all the color attributes and moz-tool kit to make it rounded are declared in my CSS file.I am using moz-tool kit and jquery rounded corners to make my accordion corners rounded both in IE and mozilla.Its working charmingly in mozilla but in IE its not rendering the color for the bar when i click on it,the toggling operation is working properly as i can see the information in the bar popping up and down when i click on it.
My only problem is with the color of the bar as it is not rendering properly when its clicked on it.It stays the same green color even after the click.When i remove moz-took kit its working fine but with out rounded corners.I am unable to figure out the problem whether it is with java script or CSS.This is my java script and css and my xhtml file.is there any solution for this.Do i need to make any code change in my script?The rest of the site i am able to populate this bar perfectly.but seems like problem is coming when i use a script.
css for first green bar
#layout-container .section-open .section-middle {background-color:#99CC33;}
#layout-container #layout-detail .columns .section-middle { width: 624px; }
#layout-container #layout-detail .columns .section-open .section-left, #layout-container #layout-detail .columns .section-open .section-right, #layout-container #layout-detail .columns .section-closed .section-left, #layout-container #layout-detail .columns .section-closed .section-right {
float: left;
height: 20px;
margin: 0;
padding: 0;
width: 6px;
-webkit-border-radius: 7px;-moz-border-radius: 7px
}
css for second bar
#layout-container #layout-detail .section-closed .section-middle{background-color:#efe8dc; background-image: url(../../images/icons5.png); background-repeat:no-repeat; background-position: 612px -1392px;-webkit-border-radius: 7px;-moz-border-radius: 7px;}
my xhtml
<ui:fragment rendered="#{current.index le 8 or current.last}">
<div class="columns">
<div
class="#{current.first ?'faq-accordion section-open' : 'faq-accordion section-closed'}">
<span class="section-middle">
<h2>
<h:outputText value="#{priority.statementDescription}" />
</h2> </span>
my script
$('.faq-accordion').live("click", function() {
$(this).next('.content-toggle').toggle();
// $('.show-all').show();
// $('.hide-all').hide();
if ($(this).hasClass('section-closed')){
$(this).addClass('section-open');
$(this).removeClass('section-closed');
}
else
{
$(this).addClass('section-closed');
$(this).removeClass('section-open');
}
var total = $('.faq-accordion').length;
var open = 0;
for (i=0; i<total; i++) {
if($('.faq-accordion').eq(i).hasClass('section-open')){
open = open + 1;
}
}
if (total != open) {
$('.show-all').show();
$('.hide-all').hide();
}
else {
$('.hide-all').show();
$('.show-all').hide();
}
})
$('.show-all').click(function(){
$('.content-toggle').show();
$('.content-toggle').prev('div').addClass('section-open');
$('.content-toggle').prev('div').removeClass('section-closed');
$(this).hide();
$('.hide-all').show();
return false;
});
$('.hide-all').click(function(){
$('.content-toggle').hide();
$('.content-toggle').prev('div').addClass('section-closed');
$('.content-toggle').prev('div').removeClass('section-open');
$(this).hide();
$('.show-all').show();
return false;
});

Try this:
-webkit-border-radius: 7px !important;-moz-border-radius: 7px !important;
I have used your code and !important fixed the issue.