Clever Geek Handbook

Displaying a div only if the specified div height is greater than the set height?

I have a tab module that I created that has scrollable content areas. I made a quick blinking arrow style to let users know that this field is scrolling. I would like to make it so that this div is only visible if my content (scrollable textbox area) is above a certain height.

For example, my scrollable area always matters height:450px

. So I need to figure out how to get the height of the content area, then, if the height is less than 450px, to not show my div more-info

.

Here is a jsfiddle with a working demo.

HTML structure

<div class="tabs-left app-about-page">
      <div class="more-info"></div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></a></li>
          <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star">Donor Cultivation</span></a></li>
          <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones">Donor Retention</span></a></li>
          <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time">Donor Blogging</span></a></li>
          <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar">Donor Engagement</span></a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="a">
          </div>


          <div class="tab-pane" id="b">
          </div>


          <div class="tab-pane" id="c">
            </div>

          <div class="tab-pane" id="d">
          </div>

          <div class="tab-pane" id="e">
          </div>

        </div><!-- /tab-content -->
      </div><!-- /tabbable -->

From some searching and building together, I found something like this, so let's assume this is a starting point.

$(document).ready(function () {
    if ($(".tab-pane").height() > 450 {
        jQuery(".more-info").fadeIn(200);
    } else {
        jQuery(".more-info").hide(100);
    });
+3


source to share


5 answers


Just use an event shown.bs.tab

to show and hide your div.

Toggleable tabs Events

shown.bs.tab

This event fires when showing tabs after showing a tab. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available), respectively.



$('.more-info').css('display', 'none');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activeContentElem = $($(e.target).attr('href'));
  if (activeContentElem[0].scrollHeight > activeContentElem.height()) {
    $('.more-info').css('display', 'block');
  } else {
    $('.more-info').css('display', 'none'); 
  }

})
      

        
        
        
      

    
.nav-tabs {
  float: left;
  border-bottom: 0;
}
.nav-tabs li {
  float: none;
  margin: 0;
  width: 106px;
  height: 106.5px;
  left: -30px;
  top: -20px;
  position: relative;
  display: block;
  background-color: #F2F2F0;
  margin-top: 0;
  border-bottom: #FFF 2px solid;
  text-align: center;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.nav-tabs li:last-child{
  border:none;
}

.nav-tabs li a{
  display: block;
  height: 75px;
  position: relative;
  padding-top: 31px;
  font-size: 14px;
  color:rgb(51, 51, 51);
  text-decoration: none;
}
.nav-tabs li:hover {
  background-color: #DBDBDA;
  cursor:pointer;

}

.nav-tabs > li.active, .nav-tabs > li.active a,  .nav-tabs > li a:active, .nav-tabs > li.active > li:focus, .nav-tabs >li a:focus {
  background:rgba(51, 181, 229, 0.45);
  color:#FFF;
  text-decoration: none;
}

.tab-content {
  margin-left: 45px;
}
.tab-content .tab-pane {
  display: none;
  background-color: #fff;
  padding: 0;
  overflow-y: auto;
}

.tab-pane p{
  margin: 0  0 16px 0;
}

.tab-pane p:first-child{
  margin:5px 0 16px;
}

.tab-pane h1{
  padding-bottom: 5px;
  border-bottom: 1px solid #DBDBDA;
  margin-bottom: 16px;
}

.tab-pane img{
  max-width: 70%;
}


.tab-content .active {
  display: block;
  overflow: scroll;
  height: 450px !important;
  padding: 0px 15px 0 0px;
}

.list-group {
  width: 100%;
}
.list-group .list-group-item {
  height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
  line-height: 11px;
}




@-webkit-keyframes circleBounce {
  0% {-webkit-transform: scale(0.9); opacity: 0;}
  20% {opacity: 0.5;}
  50% {opacity: 1;}
  80% {opacity: 0.5;}
  100% {-webkit-transform: scale(1.1); opacity:0;}
}

.more-info {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 2px solid rgb(51, 181, 229);
  border-top: none;
  border-left: none;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
}

.more-info:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 17px);
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.8);
  border: 1px solid rgb(51, 181, 229);
  border-radius: 50%;
  -webkit-animation: circleBounce 2.5s linear infinite;
}

.more-info:hover:after {
  background-color: rgba(51, 181, 229, .15);
  cursor:inherit;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs-left app-about-page">
  <div class="more-info"></div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></a></li>
    <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star">Donor Cultivation</span></a></li>
    <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones">Donor Retention</span></a></li>
    <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time">Donor Blogging</span></a></li>
    <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar">Donor Engagement</span></a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="a">
      <h1>Donor Acquisition</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>


    <div class="tab-pane" id="b">
      <h1>Donor Cultivation</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>


    <div class="tab-pane" id="c">
      <h1>Donor Retention</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

    <div class="tab-pane" id="d">
      <h1>Nonprofit Blogging</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

    <div class="tab-pane" id="e">
      <h1>Nonprofit Engagement</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

  </div><!-- /tab-content -->
</div><!-- /tabbable -->
Run code


+3


source


First run your .more-info

class as hidden in css.
Then you can check the height of your tab content every time the visible tab changes, and if it is more than 450px, change the visibility of your additional information.

This is the jQuery snippet:



$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var div = $($(e.target).attr('href'));

    $('.more-info').hide();
    if (div.get(0).scrollHeight > 450)
        $('.more-info').show();
});
+1


source


I'm not sure here, but I looked around and came up with this.

var clientHeight = document.getElementById('myDiv').clientHeight;

and some combination of this ..

[DIV].style.visibility='visible'

[DIV].style.visibility='hidden'

then use the if statement?

Kind of new to coding, but maybe this is on the right track.

0


source


You can bind an event to your menu anchors that check the height of your active div against the scroll height of that div and show or hide the blinking arrow.

Using JQuery, something like this to get it triggered after the bootstrap completes:

 $(document).ready(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
    ToggleMoreInfoArrow();
     //Call the toggle every time the content changes.
    });

ToggleMoreInfoArrow(); //Call it the first time the page loads.
});

function ToggleMoreInfoArrow()
{
        if( $('div.active').prop('scrollHeight') < $('div.active').height())
        {
            $('.more-info').hide();
        }
        else
        {
            $('.more-info').show();
        }
}

Edit: I'm not sure how your "active" class is set, but you want to run your height checking code after that. It could be on page load or wherever, the operator if

is the important bit.

Edit: See this working fiddle: http://jsfiddle.net/9hkpzagz/7/

0


source


Hi multilevel user, I didn't like the script that was in the example and I changed the CSS a bit by moving the "more" button to the bottom right corner, but I did the following: 1. You should always have a .tab bar with a set height on startup and no scrolling, so I changed the CSS to "overflow: hidden"

  1. I wrote a function that checks the height of the contents of a tab and activates or deactivates "more"
  2. If the more button is clicked, the "overflow-y" parameter of the tab content changes to "auto" - this adds a vertical scroll bar.

http://jsfiddle.net/9hkpzagz/8/

here is my js code:

function checkHeightAndSetMore(clickedMore){
    var activeTabH=$('.tab-content .active').height();
    if(activeTabH >450){
      $('div.more-info').fadeIn();
    }
    else{
    $('div.more-info').fadeOut();
    }
    if(clickedMore == 1){
        $('.tab-content .active').css('overflow-y', 'auto');
        $('div.more-info').fadeOut();
    }

}
$(document).ready(function(){
checkHeightAndSetMore(0);
    $('.more-info').click(function(){        
       checkHeightAndSetMore(1);
    });
});
0


source






More articles:


All Articles