0

I'm trying to get a font awesome icon to appear once input has been detected, the font awesome search icon must be invisible until user start typing something, but this icon keeps blinking and for some reason jumping altogether with an input box. It must only appear after users input.

Here is codepen: https://codepen.io/ekilja01/pen/pRerpb

    $(document).ready(function() {

      var cursorBlink = setInterval(function blink() {
        $(".searchRequest").toggleClass("hidden");
      }, 500);

      $(".searchRequest").on("click", function() {
        clearInterval(cursorBlink);
      })

      var icon = "<i class='fa fa-search fa-2x'></i>";

      if ($(".searchRequest").length > 0) {
        console.log("Not empty anymore");
        $(".searchIcon").append(icon);
      }

    });
body {
  background: #7b4397;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #7b4397, #dc2430);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #7b4397, #dc2430);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+  */
}
.headertext {
  margin-top: 100px;
  margin-left: 25%;
  margin-right: 25%;
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 60px;
  font-weight: lighter;
}
.searchRequest {
  margin-top: 5px;
  margin-left: 25%;
  margin-right: 25%;
  border: 0;
  outline: none;
  box-shadow: none;
  background-color: inherit;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 40px;
  color: white;
  font-weight: lighter;
  opacity: 0.5;
  box-width: 50px;
  box-height: 5px:
}
.fa-search {
  color: white;
  font-weight: lighter;
  margin-top: 2px;
  margin-left: 40%;
  margin-right: 25%
}
.hidden {
  visibility: hidden;
}
.i {
  color: white;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/43f8201759.js">
</script>
<h2 class="headertext">WIKIPEDIA  <br> VIEWER</h2>
<div class="row">
  <div class="col-10-md">

    <input class="searchRequest" id="cursor" type="text" placeholder="_"></input>

  </div>

  <div class="searchIcon col--md"></div>
</div>

What am I doing wrong? Please help.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Alina Khachatrian
  • 757
  • 1
  • 6
  • 19
  • Well, your code is hiding and unhiding your input box every 500 milliseconds, so that's going to make it hard to click on it. Also your HTML is invalid: there should be no `` since it's an empty tag. – Heretic Monkey Jan 20 '17 at 18:49
  • Thank you Mike I have amended HTML. By hiding and unhiding input box am trying to achieve a blinking effect for an underscore. – Alina Khachatrian Jan 20 '17 at 18:54
  • 1
    Well, it does, but it also makes your page jump around, so pick your poison. Also, `$(".searchRequest").length > 0` will always be `true`, because that just checks that the element existing. I think you want `$(".searchRequest").val().length > 0`... – Heretic Monkey Jan 20 '17 at 18:56
  • Much appreciated. With $(".searchRequest").val().length > 0 the icon doesn't appear after I start to type... – Alina Khachatrian Jan 20 '17 at 19:01
  • 1
    Right, because you're only checking when the page loads. See @bini's answer for where to place that code. – Heretic Monkey Jan 20 '17 at 19:04

1 Answers1

1

Update your JavaScript to this:

$(document).ready(function() {

  var icon = "<i class='fa fa-search fa-2x'></i>";

  $('#cursor').on('keydown', function(){
    var searchIcon = $('.searchIcon');

    if (searchIcon.html().indexOf('fa-search') === -1) { // Prevents inserting multiple icons
      searchIcon.append(icon);
    }
  })

});

Updated with the blinking effect and a pen example: https://codepen.io/anon/pen/mRWaYY

Blink effect taken from How to make blinking/flashing text with css3?

Community
  • 1
  • 1
bini
  • 154
  • 1
  • 5
  • 1
    Why not use `!searchIcon.has('.fa-search')` instead of searching the HTML? Also, since you've already done `$('.searchIcon')` once, just use `searchIcon` before `append`... – Heretic Monkey Jan 20 '17 at 18:58
  • I don't know what the method has does, not really a fan of jQuery. You are correct about the second part, though. – bini Jan 20 '17 at 19:01
  • This one is interesting but _ it's not blinking. I'm trying to achieve blinking effect for placeholder="_" – Alina Khachatrian Jan 20 '17 at 19:02
  • You can use CSS for that. Check the pen: https://codepen.io/anon/pen/mRWaYY – bini Jan 20 '17 at 19:08