get size child elements - Download Get The Size Of Child Elements - jQuery getSizeChilds

Download Get The Size Of Child Elements – jQuery getSizeChilds

By Posted on

This time I will share jQuery Plugin and tutorial about Get The Size Of Child Elements – jQuery getSizeChilds, hope it will help you in programming stack.

get size child elements - Download Get The Size Of Child Elements - jQuery getSizeChilds
File Size: 2.95 KB
Views Total: 274
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

getSizeChilds is a small yet sometimes might useful jQuery plugin which can be used to get the size (height & width) of child elements inside a given container.

How to use it:

1. Insert the minified version of the getSizeChilds plugin after loading jQuery JavaScript library.

view source
1 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous">
4 </script>
5 <script src="getSizeChilds.js"></script>

2. Get the total size of child elements.

view source
1 <div class="container">
2   <h2>Element 1</h2>
3   <h2>Element 2</h2>
4   <h2>Element 3</h2>
5   ...
6 </div>
view source
1 .container
2 {
3   display:inline-block;
4   height:300px;
5   overflow-y: scroll;
6   width:400px;
7 }
view source
1 $(function(){
2  
3   var size = $('.container').getSizeChilds();
4  
5 });

3. Output the height & width in pixels.

view source
1 alert('width:' + size.width +'; height:' + size.height);

This awesome jQuery plugin is developed by wanes101. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: