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>

CSS grid layout changing column width with javascript

I try setting up a CSS grid layout as follows
.wrapper {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(5, 200px);
}
Is it possible to locate grid-template-columns in JS then re-size the columns? I came across a situation where I could find it (lost the code) but when I tried changing it, Chrome DevTools say the value is computed and cannot be changed.
Any help pointing me in the right direction (or other ways to do it, but use of grid is a must) is highly appreciated.
Thanks.

#MikeC, if you're not opposed to using jQuery, you can change the column width using jQuery's .css() function, which
Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.
You can read more on it in jQuery's documentation for the function here.
Also, just so you can see it in action, I put together a codeply project that you can see it in action. If you click anywhere on the grid, it will resize (only once though). It's a primitive example.
Here's the jQuery code it uses.
$( "#grid" ).one( "click", function() {
$( this ).css( "grid-template-columns", "repeat(2, 400px)" );
});

#MikeC You didn't tell anybody how you got it to work.
Assuming you have a button or some event that calls a toolExpandToggle() and assume that your class name for your grid CSS definition is called "canvas" then you can do something like this.
In the CSS I have:
#media only screen and (min-width: 768px) {
.canvas {
grid-gap: .0em;
grid-template-columns: 50px auto; /* the values are the toolbar, content */
grid-template-rows: 50px auto 25px; /* The values are o365Nav (O365 stardard), content, statusbar. Note: o365Nav heigth is the padding value used by the modal menu. */
grid-template-areas:
"o365Nav o365Nav"
"tool content"
"statusbar statusbar";
}
}
In the HTML I have a button. Notice that I have my widths defined as data items where 50 matches the CSS. In any case these values will replace the CSS when used.
<div class="tool" id="pl-tool" data-collasped="50"; data-expanded="200";>
<div class="spacer"></div>
<button class="tool-ms-button"><span class="ms-Icon ms-Icon--GlobalNavButton tool-ms-icon" aria-hidden="true" onclick="toolExpandToggle('pl-tool')"></span></button>
<!-- now the tool bar buttons -->
<div><button class="tool-button">item-a</button></div>
<div><button class="tool-button">item-a</button></div>
</div>
Then I have a javascript function:
function toolExpandToggle(target) {
let id = document.getElementById(target);
let c = id.dataset.collasped;
let e = id.dataset.expanded;
let w = document.getElementsByClassName('tool')[0].offsetWidth;
if(w < e) {
document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = e + 'px auto';
}
else {
document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = c + 'px auto';
}
}
In my case I only had two columns.
When I click a button I call the toggle method and change it to the data value.
I hope this gets someone else a little further down the track.

Change display property and id attribute

I have 2 sections:
<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
<!--stuff --->
</section>
<section class="focus" id="need" style="display:none;">
<!--stuff --->
</section>
I want to display the second section when window is lowered to width less than 1043px. And hide the first section by display:none
Update:
How can I remove id attribute of first section, when width is less than 1043?

You should use CSS media queries. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 1043px) {
section.focus {
display: block;
}
}

Firstly you cannot use same ID for more than one div. So change the id of one div.
And to hide the second div and show the first div:
Use CSS:
#media only screen and (max-width: 1043px) {
.focus {
display: block;
}
.notes {
display: none;
}
}

In response to your requirement for removing the ID attribute, try the following JavaScript. It can only do it once however, and if you are interested in performance you should consider investigating debounce/throttle for the resize handler. (http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/)
$(window).on('resize', function() {
if($(window).width() < 1043) {
$('.notes').removeAttr('id');
$(window).off('resize');
}
});
However, the media queries answers are the correct approach to show/hide based on screen width.

how to disable mouseout visibility="hidden" effect for medias smaller than 768px?

I am pretty new at Javascript. I created this effect where text appears under an image icon when the user hovers over it. I would like the effect to only work when the screen is over 768px and for the text to just stay visible at all times when viewed on smaller devices. I've tried using different variants of
if (screen.width < 768px) {}
and
#media all and (min-width: 768px) {} else {}
to control the effect to my liking but without any luck. Help???
Here is my code:
<section id="s1">
<h1><a href="web/services.html">
<img src="images/ICON-TRANSCRIPTION.png" class="hover"></a></h1>
<p class="text">TRANSCRIPTION</p>
</section>
<script>
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");});
</script>

You do not need any JS to do this. The easiest way to accomplish this is to define the media query to be what you desire, set the element to visibility: hidden; and then add a hover rule to change the visibility attribute.
The visibility would be visible by default (on smaller screens), then set to hidden by the media query with the added hover functionality for larger screens.
#media all and (min-width: 768px) {
.hover { visibility: hidden; }
.hover:hover { visibility: visible; }
}

If you must do it via JS(this can be accomplished with CSS media queries), first you should get the width of the window and set it as a variable, then you can set up your conditional statement like so:
function mouseVisibility() {
var w = $(window).width();
if (w > 767) {
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");});
}
}
mouseVisibility();
Additionally, you should fire the function again if the user resizes the browser window:
$(window).resize(function() {
mouseVisibility();
});

Height not resizing LayerSlider 5

Im having trouble with the latest version of LayerSlider. I have used everything from the full-width responsive demo and read through all the options but when I resize my browser, the height does not update. To make this clearer the image itself scales but the container's height stays the same. In the documentation it says that you must give the container a height.
My code below:
HTML:
<div id="LayerSlider" class="Slider">
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/>
</div>
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/>
</div>
</div>
jQuery
$(document).ready(function () {
$('#LayerSlider').layerSlider({
responsive: false,
layersContainer : 1178,
responsiveUnder : 1500
});
});
In the documentation is says you must use responsive: false if you want to use responsiveUnder which makes it responsive under a specified width.
Link to LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

All you need to do is put the container css inline.
<div id="LayerSlider" class="Slider" style="width:100%; height:427px;">

use jquery to change the #layerslider height when window resize.
<script type="text/javascript">
$(window).resize(function() {
var newHeight;
newHeight = $(window).width();
newHeight = newHeight / 2.25
newHeight = parseInt(newHeight);
// alert(newHeight);
$('#layerslider').css('height', newHeight);
});
</script>

I had the exact same problem. In my case, it was due to a duplicate of css styles, when we migrated the site to liferay cms (which adds all sorts of html). We restructured some of site and copied and pasted the layerslider.css into the document (so we could edit it without having to deploy the theme) - but never removed the original css file. Removing the styles is what fixed the height calculation. Apparently the javascript uses the css styles you set for height and width to calculate the image, text, and parent container sizes.
Hope this helps.

I used css break point to fix this height issue of the layer Slider. Use the layer slider's css editor.
#media only screen and (min-width:800px) and (max-width:960px) {
.ls-wp-fullwidth-container {
height: 65vh!important;
}
#media only screen and (min-width:768px) and (max-width:800px) {
.ls-wp-fullwidth-container {
height: 50vh!important;
}
}
#media only screen and (min-width:600px) and (max-width:768px) {
.ls-wp-fullwidth-container {
height: 42vh!important;
}
}
#media only screen and (min-width:480px)and (max-width:600px) {
.ls-wp-fullwidth-container {
height: 33vh!important;
}
}
-icodefy