I often need to work with data client side that is returned from the server. Found this neat piece of code which I used to get the available mimetypes so I can validate client side that the file the user is attempting to upload is accepted.
|
1 2 3 4 5 6 7 |
<script type='text/javascript'> <?php $php_array = get_allowed_mime_types(); $js_array = json_encode($php_array); echo "var mimetype_array = ". $js_array . ";\n"; ?> </script> |
Everyone hate IE. Thanks for making our lives hell and halting progress Microsoft.
Here is a simple bit of code which will help to detect an IE browser.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!--[if IE]> <style> /*custom ie styles*/ </style> <![endif]--> <!--[if !IE]><!--><script> //check for IE10 function. If exists put ie10 class in html element if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10'; } </script><!--<![endif]--> |
I had an earlier post about cross browser safe select replacements. This is a function which replaces the gravity forms plugin select drop downs with those cross browser safe drop downs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
//REPLACE GRAVITY SELECT DROPDOWNS function replaceGravitySelects(){ var optionValues = []; var optionHTML = []; var selected = []; var selectedHTML = []; var selectParent = []; var inputName = []; var tabIndex = []; var numSelects = 0; //get options jQuery('.gfield_select').each(function() { optionValues[numSelects] = []; optionHTML[numSelects] = []; jQuery('option', this).each(function() { optionValues[numSelects].push(jQuery(this).val()); optionHTML[numSelects].push(jQuery(this).html()); if(jQuery(this).is(':selected')){ selected[numSelects] = jQuery(this).val(); selectedHTML[numSelects] = jQuery(this).html(); } }); selectParent[numSelects] = jQuery(this).parent(); inputName[numSelects] = jQuery(this).attr('name'); tabIndex[numSelects++] = jQuery(this).attr('tabindex'); }); for(var j = 0; j < numSelects; j++){ var buildSelect = '<div class="dropdown subject" tabindex="'+tabIndex[j]+'"><span id="search-text">'+selectedHTML[j]+'</span>'+ '<input id="'+inputName[j]+'" type="hidden" value="'+selected[j]+'" name="'+inputName[j]+'"></input><ul style="">'; var isSelected = ''; for (var i in optionValues[j]) { if(optionValues[j][i] == selected){ isSelected = 'selected'; }else{ isSelected = ''; } buildSelect += '<li id="'+optionValues[j][i]+'" class="'+isSelected+'">'+optionHTML[j][i]+'</li>'; } buildSelect += '</ul></div>'; // remove the old and set the new select in place selectParent[j].html(buildSelect); } // SET UP FUNCTIONALITY //MOBILE CHECK if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { binding = 'touchstart'; //close the menu if it is open and the user clicks / touches ANYWHERE but the menu $(document).bind(binding, function(e){ var container = $(".dropdown.open"); if (! container.is(e.target) && ! container.children('ul').is(e.target) && ! container.children('ul').children('li').is(e.target) ) { container.children('ul').hide(); container.removeClass('open'); } }); }else{ binding = 'click'; } //dropdown controller $('.dropdown').bind(binding, function(e) { //dropdownOpenClose(this); if( $(this).children('ul').is( ":hidden" )){ $(this).children('ul').show(); $(this).addClass('open'); } }); $('.dropdown').mouseleave(function(e){ if($(this).children('ul').is( ":visible" )){ $(this).children('ul').hide(); $(this).removeClass('open'); } }); $('.dropdown ul li').click( function(e) { e.stopPropagation(); var thisLI = $(this); var sitem = thisLI.html(); var sid = thisLI.attr('data-id'); var parentUL = thisLI.parent('ul'); parentUL.siblings('span.display-text').html(sitem); //add text to display area parentUL.siblings('input').val(sid); //add to hidden field parentUL.hide(); //add to hidden field //wait just a little longer than the slide up time to put in the new text. Looks weird otherwise. setTimeout(function(){ thisLI.addClass('selected'); thisLI.siblings('li').removeClass('selected'); }, 100); }); } |
CSS styles. You will need to edit to fit your needs.
|
1 2 3 4 5 6 7 8 9 10 |
// select dropdown is not easy to style cross browser so replace with custom replacement .dropdown { display: inline-block; border: 1px solid @medium-grey; padding: 8px 15px; color: @light-grey-text; background-color: @white; background-image: image('asc.png'); background-position: 95% center; background-repeat: no-repeat; cursor: pointer; position: relative; width: 100%; border-radius: 4px;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; ul { border: 1px solid @light-grey-text; list-style: none; padding: 0; margin: 0; position: absolute; top: 34px; left: 0px; z-index: 5; border: 1px solid @light-grey-text; width: 100%; color: @light-grey-text; background-color: @white; display: none; li { list-style: none; padding: 0; margin: 0; padding: 2px 15px !important; &.selected { display: none; } &:hover { background-color: @powder-blue; color: @white; } } } &.open, &:focus { border-color: #66AFE9; outline: 0px none; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6); } } |