emojis

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="emoji-search">
  <i class="em em-smile"></i>
  <div class="emojis">
    <input type="text" placeholder="Search emojis ...">
    <div class="emojiWrapper">
      <div class="row">
        <div class="col-lg-2">
          <ul>
            <li><i class="em em---1"></i></li>
            <li><i class="em em--1"></i></li>
            <li><i class="em em-100"></i></li>
            <li><i class="em em-1234"></i></li>
            <li><i class="em em-8ball"></i></li>
            <li><i class="em em-a"></i></li>
            <li><i class="em em-ab"></i></li>
            <li><i class="em em-abc"></i></li>
            <li><i class="em em-abcd"></i></li>
            <li><i class="em em-accept"></i></li>
            <li><i class="em em-aerial_tramway"></i></li>
            <li><i class="em em-airplane"></i> </li>
            <li><i class="em em-baggage_claim"></i></li>
            <li><i class="em em-balloon"></i></li>


          </ul>
        </div>
        <div class="col-lg-2">
          <ul>
            <li><i class="em em-ant"></i></li>
            <li><i class="em em-apple"></i></li>
            <li><i class="em em-aquarius"></i></li>
            <li><i class="em em-aries"></i></li>
            <li><i class="em em-arrow_backward"></i></li>
            <li><i class="em em-arrow_double_down"></i></li>
            <li><i class="em em-arrow_double_up"></i></li>
            <li><i class="em em-arrow_down"></i></li>
            <li><i class="em em-arrow_down_small"></i></li>
            <li><i class="em em-arrow_forward"></i></li>
            <li><i class="em em-bell"></i></li>
            <li><i class="em em-bento"></i></li>
            <li><i class="em em-bicyclist"></i></li>
            <li><i class="em em-banana"></i></li>

          </ul>
        </div>
        <div class="col-lg-2">
    ...

CSS

.emoji-search {
  
  }
  .emoji-search .em-smile {
    text-align: right;
    display: block; }
  .emoji-search .emojis {
    display: none;
    background: #fff;
    padding: 10px;
    z-index: 10;
    position: absolute;
    width: 270px;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
    
    .emojiWrapper {
  border: 1px solid #eee;
  padding: 15px 20px;
  margin-top: 20px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden; }
  .emojiWrapper ul li {
    text-align: center;
    margin-bottom: 5px; }
    
    .emojiWrapper ul span {
  font-size: 2em; }

JavaScript

$(".em-smile").click(function(e) {
  e.preventDefault();
  $(".emojis").fadeIn(300, function() {
    $(this).focus();
  });
});


$(document).mouseup(function(e) {
  var container = $(".emojis");

  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.hide();
  }
});