JSFiddle

  • Wide <select> breaks native appearance on click (IE8) #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <select>
    	<option disabled value="indicationCurrent">
    		Indication
    	</option>
    	<option disabled value="companyCurrent">
    		Company
    	</option>
    	<option disabled value="drugPhaseAll">
    		Status
    	</option>
    	<option disabled value="countryCurrent">
    		Country
    	</option>
    	<option selected value="actionsPrimary">
    		Target-based Actions
    	</option>
    	<option value="actionsSecondary">
    		Other Actions
    	</option>
    	<option value="technologies">
    		Technologies
    	</option>
    	<option value="phaseHighest">
    		Highest Status
    	</option>
    	<option value="drugSalesYearActual">
    		Total Reported Sales 2011 (USD M)
    	</option>
    	<option value="drugSalesYearEstimate">
    		Total Forecast Sales ...</option></select>
  • ZoomCat

    No-Library (pure JS), HTML, CSS, JavaScript

    void function handleZoom(){
        var currZoom = 1;
        var buttons  = document.getElementsByTagName('button');
        var i, l;
        
        function Zoom(index){        
            var modifier = index ...
  • Impossible to inject empty iframe without it triggering load event

    Inject, THEN bind events

    $('<iframe>')
        .appendTo('body')
        .on('load', function(){
            alert('Loaded!')
        });
  • Impossible to inject empty iframe without it triggering load event

    Propagation nerfed by jQuery

    $('<iframe>')
        .one('load', function(e){
             e.stopImmediatePropagation();
         })
        .on('load', function(){
            alert('Loaded!')
        })
        .appendTo('body');
  • Impossible to inject empty iframe without it triggering load event #1 is the latest revision

    What's loaded?

    $('<iframe>')
        .on('load', function(){
            alert('Loaded!')
        })
        .appendTo('body');
  • Count the number of lines of text in a given element #60 is the latest revision

    Buggy! Counts 1 line minimum, fails for certain cases of elaborated nested content

    void function $getLines($){    
        function countLines($element){
            var lines          = 0;
            var greatestOffset = void 0;
    
            $element.find('character').each(function(){
                if(!greatestOffset ...
  • Total input[type=file] style control with pure CSS #1361 is the latest revision

    File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask me since the resulting file upload dialogue is completely out of your control). This allows near enough total style freedom using pure CSS.

    <p>So various methods prevent file upload inputs from being styled conveniently. But that needn't be the case!</p>
    <label class="fileContainer">
        Click here ...</label>
  • Dynamically resizing textarea #9 is the latest revision

    Optionally makes use of the plugin @ https://github.com/moagrius/copycss to copy all computed styles (so that dimensions defined by cascade / inheritance / context &c is taken into account).

    // Expand textareas to contain user input
    $(function initDynamicTextareas(){
    	$('textarea').each(function(){
    		var $textarea = $(this);
    		// Reference to determine content-based height
    		var ...
  • Overrule all styles to reveal nothing but a given image, stretching to full width, on print

    Even in Safari! (?)

    <div>
        <div>
            <div>
                <img id="specificimage" src="//lorempixel.com/640/480" />
            </div>
        </div>
    </div>
  • (Near-)Instant change firing with IE

    Not working!

    $(document).on('change', 'input,select', function logChange(e){
        $('pre')[0].innerHTML += '\n' + (this.type || this.tagName) + ' ' + e.type + ' to ' + $(this ...