How to apply css to overflow:hidden elements?

Question

here i want to apply some css to those divs are not visible because if its height. So i want to apply some css dynamically which are not showing here(sanjana, giri, santhosh divs)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

In your example, all divs are visible. Can you clarify please? — jaswrks, Nov 06 '17 at 07:51
here i have mentioned 8 names, but only 5 names are visible here, so here i want to apply some css to those which are not visible here — Ganesh Putta, Nov 06 '17 at 07:53
What's the point? You can't see the elements, why to bother to style them? — Teemu, Nov 06 '17 at 07:53
so that i can get the value of visible part using jquery like $("div.slot").not(":hidden").prop("id"); — Ganesh Putta, Nov 06 '17 at 07:56
?? In your example the divs have no ids nor classes. Please post the exact code you have. — Teemu, Nov 06 '17 at 08:09
my main problem is to get the names which are in visible part — Ganesh Putta, Nov 06 '17 at 08:12

Tschallacka · Answer 1 · 2017-11-06T08:11:05.513

If it's inline defined, you can use this:

[style*="overflow:hidden;"],[style*="overflow: hidden;"]

What it does is looking for ANY type of tag,
that has a style attribute set
and that style attribute contains: overflow:hidden; or overflow: hidden;

then applies relevant styles.

var value = 'initial';
var old = 'hidden';
function toggle() {
    $('div[style]').css({'overflow':value});
    var tmp = value;
    value = old;
    old = tmp;
}

[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
    color:white;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

Now if you only wish to do something to the NOT visible divs, you need to use javascript, and you can use Bounding boxes to test if something is visible:

Also see How to check if an element is overlapping other elements?

$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
   var $el = $(element);
   var $parent = $el.parent();
   
   // get the bounding boxes.
   var rect1 = $parent.get(0).getBoundingClientRect();
   var rect2 = element.getBoundingClientRect();
   
   // check for overlap(if it's visible)
   if(!(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)) {
                
      $el.removeClass('hidden');
   }
   else {
      // it's hidden!
      console.log('found hidden div '+$el.text());
      $el.addClass("hidden");
   }
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>

nice...! Can u please take a look at my prob https://stackoverflow.com/questions/47130582/get-id-of-a-visible-div-failed-in-all-methods — Ganesh Putta, Nov 06 '17 at 08:14
You can do it yourself there. Just have the wrapper div as rect1, and then loop through all the $('div.slot') and compare their bounding boxes to the one of the wrapper div. — Tschallacka, Nov 06 '17 at 08:46
@Tschakkacka tried but not getting the result as expected .. Can u help me there — Ganesh Putta, Nov 06 '17 at 09:14

score 1 · Answer 2 · answered Nov 06 '17 at 07:57

You can check the height from the wrapper via javascript and then add a class to all the elements which are not fully visible inside the wrapper. Added a class wrap to the wrapper to make it more obvious.

var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS

wrap.querySelectorAll('div').forEach(function(element){
    var elementBottomPosition = element.offsetTop + element.offsetHeight;
    if(elementBottomPosition >= wrapHeight) {
        element.classList.add('some-class');
    }
});

.wrap {
    height:100px;
    overflow:hidden;
    background:red;
    border:2px dashed #000;
}

.some-class {
    color: lime;
}

<div class="wrap">
  <div>Ganesh</div>
  <div>Om shankar</div>
  <div>Sai</div>
  <div>venkat</div>
  <div>Sireesha</div>
  <div>Sanjana</div>
  <div>Giri</div>
  <div>Santhosh</div>
</div>

I like this, nice and elegant, and without jQuery. – Tschallacka Nov 06 '17 at 10:34 — Tschallacka, Nov 06 '17 at 10:34

How to apply css to overflow:hidden elements?

2 Answers2