diff --git a/css/ebi-global.css b/css/ebi-global.css index 09e3f0dbd13f78586045e00e5477f5011bab668d..05a996fccad66df83aaee14ef5bd8db7ae3ab055 100644 --- a/css/ebi-global.css +++ b/css/ebi-global.css @@ -718,6 +718,20 @@ h6 a span.link-pdf { display:none; } #ebi_search_results { display: none; } } +/* Clearable text inputs + Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text */ +input.clearable { + background: #fff url('data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=') no-repeat right -10px center; + border: 1px solid #999; + padding: 3px 18px 3px 4px; + border-radius: 3px; + transition: background 0.4s; +} +input.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */ +input.clearable.onX{ cursor: pointer; } /* (jQ) hover cursor style */ +input.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */ + + /* Tablesorter styling */ table.tablesorter thead tr .header { background-image: url(../libraries/tablesorter/themes/blue/bg.gif); diff --git a/js/foundationExtendEBI.js b/js/foundationExtendEBI.js index 94869a79ffa05c43360e7eeef7533a48bc1fd0f8..a5b2094aee149ea26b1397cde5b2616d203e8a24 100644 --- a/js/foundationExtendEBI.js +++ b/js/foundationExtendEBI.js @@ -10,6 +10,18 @@ var localMenuOption = $('ul.dropdown.menu.float-left').html(); $('ul.dropdown.menu.float-left').prepend('<li class="show-for-small-only"><a href="#">Also in this section</a><ul class="menu">' + localMenuOption + '</ul></li>'); + // Clearable text inputs + // Also need JS, via: http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text + function tog(v){return v?'addClass':'removeClass';} + $(document).on('input', '.clearable', function(){ + $(this)[tog(this.value)]('x'); + }).on('mousemove', '.x', function( e ){ + $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX'); + }).on('touchstart click', '.onX', function( ev ){ + ev.preventDefault(); + $(this).removeClass('x onX').val('').change(); + }); + $.fn.foundationExtendEBI = function() { // Link overlay images $(function() {