CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fahad
Fahad

Reputation: 1444

Div height always zero - how to make it assume height automatically

I want to show notifications on my site and the AwNotices plugin seems like an apt solution. However, the problem is that height of the section is always zero, because of which it doesn't push down any content after it and appears over the same.

HTML:

<section class="awNotices">
  <a notice-color="orange" href="http://adobewordpress.com" class=""><i class="fa fa-bell"></i>
            <font><font> 'Tomorrowland' Is a Box-Office Disappointment</font></font></a>
  <a notice-color="red" class="active"><i class="fa fa-heart"></i><font><font> Sunday Book Review: Shakespeare in Love</font></font></a>
  <a notice-color="blue" class=""><i class="fa fa-desktop"></i><font><font> Overvalued in Silicon Valley, but Do not Say "Tech Bubble"</font></font></a>
  <a notice-color="green" class=""><i class="fa fa-leaf"></i><font><font> Created for the World Health Emergency Fund Agency</font></font></a>
  <a notice-color="dark" class=""><i class="fa fa-comments"></i><font><font> John Nash, Nobel Prize Winner, Dies in Crash.</font></font></a>
  <span class="controller fa fa-pause"></span>
</section>

<div>
  Hello World.
</div>

JS:

$('.awNotices').append('<span class="controller fa fa-pause"></span>');
$('.awNotices a:nth-of-type(1)').addClass('active');

function awNotice() {
  if (!$('.awNotices').hasClass('stopped')) {
    var $active = $('.awNotices a.active');
    var $next = $active.next('a');

    if ($next.length) {
      $next.addClass('active');
      $active.removeClass('active');
    } else {
      $active.removeClass('active');
      $('.awNotices a:first-of-type').addClass('active');
    }
  }
}

$('.awNotices .controller').click(function () {
  $(this).toggleClass('fa-pause fa-play');
  $('.awNotices').toggleClass('stopped');
})

function awNotices(timer) {
  setInterval("awNotice()", timer);
}

awNotices(2000);

I've created a fiddle for the same: http://jsfiddle.net/pm3hz9x1/4/

How can I make sure that the section assumes its height automatically and pushes down all content like it should?

Upvotes: 1

Views: 69

Answers (1)

Kartic
Kartic

Reputation: 114

I just checked your fiddle and found your .awNotices a had position:absolute; so it won't take actual place in the content (<section>).

and if i remove position from it, it works but it looks ugly because you used visibility:hidden. i removed visibility and used display none/block instead with active classes.

Now it looks good as it should be IMO. here's code that i modified with two of your classes.

.awNotices a {
  /* position: absolute; */
  /* visibility: hidden; */
  display: none;
}
.awNotices a.active {
  /* visibility: visible; */
  display: block;
}

The above code is only showing the changed to particular CSS attributes, you must include the other class properties to get the results as ecpected. please have a look at the fiddle that i updated!

Upvotes: 1

Related Questions