title: show an element if text input is not empty using jQuery
body: <p>Ok, so I got the element coded and such. It just bit odd, since if the form is empty a clear button is showing in a form of an image ex: (x) </p>
  
  <p>Here is the script, upon page load jQuery focuses on the text input field, and in the same time displays the (x) clear class. What I wish to achieve is this.</p>
  
  <p>Upon page load jQuery still focuses on the text input field, however it does not display clear class (x) but will display it only if there is at least 1 character inputed into the text field other vise it is not displayed.</p>
  
  <p>here is the current code</p>
  
  <pre><code>$(document).ready(function() {
               $('#ui_query').focus();
          });
  
          $('#ui_query').focus(function() {
               $('.clear-helper').css('opacity','0.9999');
          });
  
          $(document).focusout(function() {
               $('.clear-helper').css('opacity','0.3333');
          });
  
  
  
          (function ($, undefined) {
          $.fn.clearable = function () {
          var $this = this;
          $this.wrap('&lt;div class="clear-holder" /&gt;');
          var helper = $('&lt;span class="clear-helper"&gt;&lt;/span&gt;');
          $this.parent().append(helper);
          helper.click(function(){
              $this.val("");
              $('#ui_query').focus();
          });
          };      
          })(jQuery);
  
          $("#ui_query").clearable();
  </code></pre>