Email input placeholders.

Email input placeholders.

<!--
  for AirPR.com's coming soon landing page, on a specific issue generally 
  applicable to anyone on the web looking to use this input & placeholder design
  Problem: email placeholder text gets cut off with different zoom levels, 
  and surely mobile has some inconsistencies. Also, when you click in to type 
  an email, your cursor is overlapping the placeholder text
-->

<!-- Add this to the top of your code -->
<style type="text/css">
  #contact_email {
    text-align: left;
    width: auto; //with these two, 
    padding: 0 12px;
    -webkit-transition: width 0.1s;
  }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    var s = document.createElement('style');
    s.id = 'addedStyles';
    s.innerText = 
      '#contact_email {'+
        //if width: auto isn't later hard set, the transition is very buggy
        'width:'+$('#contact_email').width()+'px;'+
      '}'+ //Also, this could be set with .css or .width directly, but style overidding is strange
      '#contact_email:focus {'+
        //do a nice expansion on the width (like TheScoutApp.com)
        'width: '+ ($("#contact_email").width() * 1.2) +'px;'+
      '}';
    document.head.appendChild(s); //Add this styling.
  });
</script>

<!--
  Ending notes: consider playing with padding-left more to keep the current spacing... 
  but I think the perfect solution (fixing the strange behavior of having the typing 
  cursor overlapping the placeholder) is to use placeholder.js: http://widgetulous.com/placeholderjs/ 
  - but hacking out the legacy IE code for creating placeholder text independent of the 
  input. That is, not using the placeholder attribute, but just directly creating the visual effect, 
  allowing the cursor not to overlap with the placeholder text.
-->