Addclass when div width is greater than 80%

Question

How to addclass when div width is greater than 80% ? This is what I just tried

<div class="wrap_bar">
    <div class="bar" style="width:50%;"></div>
</div>
<div class="box"></div>


    <script>
                     var barTotal = $(".bar");
                     var box= $(".box");
                     var width = barTotal.width();
                     if (width > 80%)
                     box.addClass('type2')
    </script>

This code is not working well. Please help

Try getting the width of the div's paren'ts width and comparing it to the div's width. — Andria, Jul 05 '18 at 02:26

score 2 · Accepted Answer · answered Jul 05 '18 at 04:51

If you need this dimension detection only one time (when DOM loaded) then you can just following approach.

function addWhenResized(element){
    var parentWidth = $(element).parent().width();
    var elementWIdth = $(element).width();
    if( (elementWIdth / parentWidth)*100 > 79){
        $('.box').addClass('type2');
    } 
    else {
        $('.box').removeClass('type2');
    }
}

$(document).ready(function(){
    addWhenResized('.bar');
})

But main challenge will be there if you want detect the run time dimension change. Then need to take help from here: http://marcj.github.io/css-element-queries/

After added the plugins from above given link you should follow the following approach:

function addWhenResized(element){
    var parentWidth = $(element).parent().width();
    var elementWIdth = $(element).width();
    if( (elementWIdth / parentWidth)*100 > 79){
        $('.box').addClass('type2');
    } 
    else {
        $('.box').removeClass('type2');
    }
}

new ResizeSensor(jQuery('.bar'), function(){ 
    addWhenResized('.bar');
});

// Great. Thanks for your comment – sam Jul 06 '18 at 00:27 — sam, Jul 06 '18 at 00:27

I. Ahmed · Answer 2 · 2018-07-05T02:48:04.383

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
     var barTotal = $(".bar");
     var barTotalWidth = barTotal.width();
     var box= $(".box");
     var boxWidth = box.width();
     var widthPercent = boxWidth / barTotalWidth;
     console.log(widthPercent);
     if (widthPercent > 0.8)
     box.addClass('type2');
  });
                     
</script>

<div class="bar" style="width:200px;height:100px;background-color:red"> </div>
<div class="box" style="width:190px;height:80px;background-color:blue"> </div>

score 0 · Answer 3 · answered Jul 05 '18 at 02:58

0

your codes don't work because you've just called javascript once when the page loaded , you have to wrap it into an event ! Take a look that answer

or that answer

answered Jul 05 '18 at 02:58

Nguyễn Văn Cao

1
1

1

Please include the relevant info in your answer. – jhpratt Jul 05 '18 at 04:54

score -1 · Answer 4 · edited Dec 27 '21 at 09:45

-1

jQuery(document).ready(function($) {
if ($(this).width() > 768) {
    $('#service-1').addClass('row text-center');
 } else {
    $('#service-1').removeClass('row text-center');
 }
});

this will work fantastic when width is less than or more than will add or remove the class

edited Dec 27 '21 at 09:45

sawan

2,341
3
25
51

answered Dec 27 '21 at 01:44

Fernando

11
5

Addclass when div width is greater than 80%

4 Answers4