CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PitaJ
PitaJ

Reputation: 15012

Show one element if another is above a certain height

I have a following HTML:

<span class="day-number">{{day-number}}</span>
<div class="event-box">
  <div class="event-container">
  </div>
  <div class="more-events">more ...</div>
</div>

Event-container is filled with an unknown number of .event elements like the following:

<div class="event">{{event-name}}</div>

I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).

The styling for the above elements:

.event {
    text-align: left;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    color: whitesmoke;
    padding: 0 1px;
    overflow: hidden;
    margin-bottom: 2px;
    cursor: pointer;
}
.event-box {
    max-height: 76px;
    overflow: hidden;
    position:relative;
}
.event-box .more-events {
    height: 10px;
    position: absolute;
    right: 0;
    bottom: 10px;
    display: none;
    z-index: 5;
}

No styling for .event-container

I can do what I want with Javascript (jQuery):

$(".event-box").each(function(){
    var $this = $(this);
    if($this.children(".event-container").height() > 76){
        $this.children(".more-events").css("display", "block");
    } else {
        $this.children(".more-events").css("display", "");
    }
});

And run that every time a make a change, but I'd rather do it with CSS.

Is this possible? Maybe with pseudo elements or media queries or something?

JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/

Upvotes: 1

Views: 745

Answers (3)

a5hk
a5hk

Reputation: 7834

If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle

I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .

The CSS I have added:

.event:nth-child(n){
    display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
    display: block;
}
.event:nth-child(5){
    text-indent: -9999px; 
    position: relative;
    display: block;
    color: black;
    border: none;
    background-color: #FFF;
}
.event:nth-child(5)::before{
    position: absolute;    
    text-indent: 0px; 
    content: "more ...";
    display: block;
}
.event:nth-child(5):hover{
    position: static;
    text-indent: 0; 
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    color: whitesmoke;        
}
.event:nth-child(5):hover::before{
    display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
    display: block;
}

And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.

Upvotes: 3

JJin
JJin

Reputation: 27

while you are using template to render the page, maybe you can do it as follow

<div class="event-container">
{{#each events}}
  <div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}

and

function canshowmore() {
  return events.length >= 4;
}

Upvotes: 0

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:

.event-box .event-container .event:nth-child(n+5){
    display: none;
}

and now when it's more than 4 .event your more text appears. FIDDLE

UPDATE:

HERE I make little change in you js as well and make it more professional,

Upvotes: 0

Related Questions