I have multiple rows, every row has multiple columns, in each column i have a div + a paragraphe, the div includes an image. i need to set the div with the class cover-bg to the lowest height of cover-bg in the same row the calculated height of the cover-bg in the first row can't be the same height in the second row
<div class="row">
<div class="col-md-4">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
<div class="col-md-6">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
<div class="col-md-4">
<div class="cover-bg"><img src="url"></div>
<p>text here</p>
</div>
</div>
I have tried this but it sets the lowest height of all the rows :
var minHeight = Math.min.apply(null, $('.cover-bg').map(function(){return $(this).height()}));
$('.cover-bg').height(minHeight);
I am having trouble manipulating the siblings() and children()
The problem is how to separate and set the height for each row
You'll need to set an image height for each row otherwise all will have the same height.
I got a bit confused with the suggested jquery so here is a snippet which spells it out in pure JS.
For each row it finds the minimum image height and then sets a CSS variable property of that row to that height. This is used to style each of the images in that particular row.
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<style>
.row {
margin-bottom: 20px;
}
.row .cover-bg img:first-child {
height: calc(var(--h) * 1px);
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-4">
<div class="cover-bg"><img src="https://picsum.photos/id/1015/200/500"></div>
<p>
weofijae
<br/> weofjiawef awoeifj awoefij
</p>
</div>
<div class="col-md-6">
<div class="cover-bg"><img src="https://picsum.photos/id/1016/200/1000"></div>
<p>text here</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="cover-bg"><img src="https://picsum.photos/id/1015/200/300"></div>
<p>text here</p>
</div>
<div class="col-md-4">
<div class="cover-bg"><img src="https://picsum.photos/id/1016/200/200"></div>
<p>text here</p>
</div>
</div>
<script>
function start() {
const rows = document.querySelectorAll('.row');
rows.forEach(row => {
const imgs = row.querySelectorAll('img');
let heights = [];
imgs.forEach(img => {
heights.push(img.height);
});
row.style.setProperty('--h', Math.min.apply(null, heights));
});
}
window.onload = start;
</script>
</body>
</html>
Note: you need to wait til the images are loaded before getting their natural heights.
Run the snippet full page otherwise the rows may wrap.
Try this:
var minHeight = Math.min(...$.map($('.cover-bg'), (e) => ($(e).height())));
$('.cover-bg').height(minHeight);
Here is the example.
Related
I have multiple number of divs with class .row, I want to copy all those divs in sections with respective of their heights , Maximum height for each section should be 1100px, I want to copy all the divs in different sections and if section height reaches 1100 pixel then new section should be created, please see below example:
<div class="row row1">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row2">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row3">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row4">
<p>some html tables and paragraphs here </p>
</div>
In the above example first of all I should get the heights of all divs then I should make the calculation and create sections using jQuery.
Let suppose .row1 has 700px height, .row2 is 900px , .row3 is 300px and .row4 is 100px.
So the resultant sections should be generated like this
<section>
<div class="row row1">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row3">
<p>some html tables and paragraphs here </p>
</div>
<div class="row row4">
<p>some html tables and paragraphs here </p>
</div>
</section>
<section>
<div class="row row2">
<p>some html tables and paragraphs here </p>
</div>
</section>
each section should not exceed the height of 1100px.
I want to print each section with 1100px on separate Legal Page, I don't want to have more than 1100px section.
I would appreciate if anyone can implement this logic.
Consider the following.
$(function() {
function makeSection() {
return $("<section>").insertAfter($("section:last"));
}
function checkHeight(a, b, h) {
if (h == undefined) {
h = 1100;
}
var r = a + b;
return r > h;
}
$("section:first .row").each(function(i, el) {
var t = $("section:first .row").length;
if (i < t) {
if (checkHeight($(el).height(), $(el).next().height())) {
var nextSection = makeSection();
nextSection.append($(el).next().detach());
}
}
});
});
section {
border: 1px solid #999;
padding: 3px;
}
section .row {
border: 1px solid #ccc;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<section>
<div class="row row1" style="height: 700px;">
<p>Item 1</p>
</div>
<div class="row row2" style="height: 900px;">
<p>Item 2</p>
</div>
<div class="row row3" style="height: 300px;">
<p>Item 3</p>
</div>
<div class="row row4" style="height: 100px;">
<p>Item 4</p>
</div>
</section>
Here you can see we have some smaller helper functions. checkHeight will calculate the combined height values. If they are less then the threshold h (defaulting to 1100), it returns false. If it is more than the threshold, it return true.
You can then iterate each of the rows and get the height from each. 1 & 2, 2 & 3, 3 & 4. If too high, the second section is moved to a new one.
In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
I want to show all the nodes of my html page inside a div.
What i have so far (js):
var nodes = document.getElementsByTagName("*");
div3.innerHTML = nodes;
And html:
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
The output I get from this code in div3: [object HTMLCollection]
How do I get all the nodes to show like:
BODY
DIV
DIV
DIV
DIV
DIV
DIV
DIV
SCRIPT
So every node in the file basically
You have to loop through all the nodes so that you get the nodeName property individually.
Please Note: Since document object has some other tags like HTML, HEAD, STLYLE, SCRIPT etc., all of them will be targeted with * selector.
var nodes = [...document.getElementsByTagName("*")];
nodes.forEach(function(el){
div3.innerHTML += el.nodeName + ' ';
})
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
You can use JavaScript querySelectorAll method, which is used to select all the nodes based on the parameter we passed. for example if we pass * inside document.querySelectorAll('*'), it selects all the node in the document. "*" is the universal selector.
var allNode=document.querySelectorAll('*')
console.log(allNode)
<body>
<div id="content">
<div>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
Use element_name.querySelectorAll('*') to get all elements inside it.
var b=document.getElementById('div3')
document.querySelectorAll('*').forEach(e=>b.innerHTML+=e.nodeName + "<br>")
<body>
<div id="content">
<div id="1-1">
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div>
</div>
</div>
<script src="script201.js" rel="text/javascript"></script>
</body>
I currently have the following setup.
<div class="elegant-1">
<div class="hold-1">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="image-3"></div>
<div class="image-4"></div>
<div class="image-5"></div>
<div class="image-6"></div>
</div>
</div>
I would like to have this setup...
var divs = $('div[class^="hold-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(900)
.delay(6000)
.fadeOut(900, cycle);
i = ++i % divs.length;
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elegant-1">
<div class="hold-1">
<div class="image-1">1</div>
<div class="image-2">2</div>
<div class="image-3">3</div>
<div class="image-4">4</div>
<div class="image-5">5</div>
<div class="image-6">6</div>
</div>
<div class="hold-2">
<div class="image-7">7</div>
<div class="image-8">8</div>
<div class="image-9">9</div>
<div class="image-10">10</div>
<div class="image-11">11</div>
<div class="image-12">12</div>
</div>
<div class="hold-3">
<div class="image-13">13</div>
<div class="image-14">14</div>
<div class="image-15">15</div>
<div class="image-16">16</div>
<div class="image-17">17</div>
<div class="image-18">18</div>
</div>
</div>
The reason I would like the following setup is because I would like to scroll through my divs and move the previous divs out of the page while introducing the next div and just have this on a constant loop. I know how to fade the divs one by one by using the above JavaScript.
However, I would like an animation moving them out of the screen and introducing the next one. Any help is appreciated.
I have a visible div on screen, but when I gets its height, it always returns 0. How it is possible? I have tried many jquery and javascript methods to get hight but it returns 0. This is my div:
<div class="option-content">
<div class="row">
<div class="col-sm-12">
<div class="dropDownStyling" id="filterDropdowns">
</div>
</div>
</div>
<!-- Other contents -->
</div>
I have tried following methods to get height:
var $element = $("#filterDropdowns");
$element.css("height")
$element.height()
$element.innerHeight()
$element.outerHeight()
Also I tried javascript:
document.getElementById('filterDropdowns').offsetHeight
document.getElementById('filterDropdowns').clientHeight
But in all cases, it returns 0 while it returns the width value. Then why height value gets 0?
if you use blank DIV without any content than you will always get 0 height.
For Example :
<div id="demo" class="text">
<div id="abc">
</div>
</div>
so you must add content in DIV
Second way to get height of DIV you can use clientHeight.
document.getElementById("xxx").clientHeight;
create one function & Call after DOM ready
function test () {
var height = $('#filterDropdowns').innerHeight();
alert(height)
}
$(document).ready(function(){
$('#filterDropdowns').append('23');
test();
})
<div class="option-content">
<div class="row">
<div class="col-sm-12">
<div class="dropDownStyling" id="filterDropdowns">
</div>
</div>
</div>
//Other contents
</div>
https://jsfiddle.net/azL0070r/3/
HTML
<div class="option-content">
<div class="row">
<div class="col-sm-12">
<div class="dropDownStyling" id="filterDropdowns">
</div>
</div>
</div>
Javascript
var height = $('#filterDropdowns').height();
alert(height)<br>
CSS
#filterDropdowns {
height: 150px;
}