1

Is there a way to hide a partially shown div in JavaScript (or maybe using some CSS magic).

My setup has a fixed-width parent div with overflow: hidden and white-space: nowrap (so the divs don't flow onto the next line). Essentially, I don't want the children divs (of variable width and display: inline-block) to go onto the next line if they overflow as it spoils the layout.

As the children divs have a variable width and don't break onto the next 'line' of divs, some of them are hidden from the view, and some only partially shown. If they are hidden, it's fine, but the partially shown divs look silly (they contain text, so sometimes it's half-shown).

The child divs are added programmatically with JS in response to realtime data, so I have no way of knowing how many will fit as their widths vary. I just want to hide those that flow over the edge of the div (overflow: hidden) or are partially shown.

Is there an easy way to hide those partially shown divs? I don't really want to query the widths of the children divs as some other content needs to be refreshed a lot and I don't want to slow down the refresh with unnecessary DOM property queries.

<div style='overflow: hidden; white-space: nowrap; max-width: 500px'>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> partially shown </div>
     <div style='display: inline-block'> hidden </div>
     <div style='display: inline-block'> hidden </div>
</div>
10
  • Maybe you could check the inner divs positions? api.jquery.com/position Jun 12, 2014 at 10:23
  • Well I don't see any other property that distinguish the divs you're talking about from the rest, except the width, do you?
    – kidwon
    Jun 12, 2014 at 10:24
  • How much overhead would that have? My problem is that I'm re-rendering the page every 200ms it already runs at the borderline of usable on some tablets.
    – Wojtek
    Jun 12, 2014 at 10:25
  • I'm not so sure. You could benchmark it somehow. If there aren't loads of divs, it shouldn't be an issue. Jun 12, 2014 at 10:26
  • @kidwon, you are correct. I wondered if there was some magical CSS trick that would hide them if they are partially shown/hidden
    – Wojtek
    Jun 12, 2014 at 10:27

2 Answers 2

2

As I mentioned in the comments, you could use the jQuery .position(). Then you would run through your inner divs and check their top right position against their container.

Something around these lines:

CSS (For demonstration only)

div div {
  background-color: red;
  width: 130px;
}

Javascript (jQuery)

$(function() {
  $("div div").each(function(index, element) {
    // By adding the element width to its left position you have the right 
    // position, which is not provided by the jQuery .position() method.
    var rightPos = $(this).position().left + $(this).width();

    var containerWidth = $(this).parent().width();

    // If the element top right corner position is outside its parent right edge,
    // it's being partially displayed, so hide it and also its subsequent 
    // siblings.
    if (rightPos > containerWidth) {
      $(this).hide().nextAll().hide();

      // Break the loop to save resources.
      return false;
    }
  });    
});

Demo

6
  • +1 That's what I'm trying to achieve exactly. However, I don't want to touch the DOM too much (querying the offsets and widths). In another part of the page I have to create/destroy potentially a lot of divs in quick succession (every 200ms in the worst case - it's realtime data), which slows the whole thing down sufficiently to make it only just acceptable on tablets (works fine on desktops) and I want to make it work on tablets in particular... I guess this may be the only solution in absence of any css tricks.
    – Wojtek
    Jun 12, 2014 at 10:50
  • That's an issue when you need to play around with the DOM - performance. Unless someone else comes up with a CSS solution, I'm afraid that's the only way you have. Jun 12, 2014 at 10:57
  • I've slightly edited my answer, now making the subsequent divs also disappear, and breaking the loop when the job is done. Jun 12, 2014 at 11:16
  • Also, you could take a different approach, but following the same concept. You would check the divs positions in the moment you're adding them to the container, not hiding the overflown ones, but just not adding them. Jun 12, 2014 at 11:56
  • This approach wouldn't work I don't think - querying the width of the not-yet-added-to-the-DOM element returns zero, so we can't check for the position of its right hand edge:( I'll accept your answer if no css magic is suggested, as it is helpful, even in suggesting that there may be no other way (even though it's not exactly what I was looking for).
    – Wojtek
    Jun 12, 2014 at 13:00
0

There is no easy way to check if the content of the container exceeds the width, you will have to query the width of the children divs and check against the width of the parent div

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.