CODEWITHSUNDEEP
javascriptcss
jgozal
jgozal

Reputation: 1582

css speech bubble responsive and hidden

I was reading this article regarding how to make a simple css speech bubble.

How would you make the bubble adjust its size according to the text inside of it, and also hide when there's no text?

I'm fine with using js if necessary but it would be cool to do it just from the css.

html:

<p class="speech">SitePoint Rocks!</p>

css:

p.speech
{
    position: relative;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    border: 8px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
}

NOTE:

The CSS provided in the article that I have linked above was incompatible with my needs. I had to look for another responsive css speech bubble and I found this fantastic tool: http://www.ilikepixels.co.uk/drop/bubbler/

Upvotes: 2

Views: 1167

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28583

Size and hide with jquery

$(document).ready(function() {
  $(".description > em").hide();
  $('a.to_links').click(
    function() {
      $(this).next("em").show('800');
      $(this).hide();
    });
  $('a.out_links').click(
    function() {
      $(this).parent("em").hide();
      $(this).parent().parent().find('a.to_links').show('600');
    });
});
.description {
  background: none repeat scroll 0 0 whiteSmoke;
  border: 1px solid #DBE1E6;
  overflow: hidden;
  width: 60px;
  padding: 20px;
  position: relative;
  z-index: 10;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  text-shadow: 1px 1px 0px white;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  border: 8px solid #666;
  -webkit-box-shadow: 2px 2px 2px #888;
  -moz-box-shadow: 2px 2px 2px #888;
  box-shadow: 2px 2px 2px #888;
}
.description:empty:before {
  display: none;
}
.description:empty:after {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="description">Speech bubble css
  <a class="to_links">read more</a>
  <em> and a little bit of jQuery – just to show more content or hide it.
         <a class="out_links">less</a>
       </em>
</div>

Reference

Upvotes: 2

gopalraju
gopalraju

Reputation: 2309

The "css only" way to hide the bubble when there's no text:

p.speech:empty:before,
p.speech:empty:after{
 display:none;
}

Upvotes: 2

Related Questions