JSFiddle

  • Mouse & element coordinates

    jQuery (edge), HTML, CSS, JavaScript

    var div1CoordsStart = [$('.div1').offset().left, $('.div1').offset().left];
    var div1CoordsEnd   = [$('.div1').width(), $('.div1').height()];
    
    $(document).mousemove(function(e){
        var mouseCoords ...
  • Pointer-events #3 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    $('.div1').hover(
        function(e){
            $('.div2').text('.div1 mouseover');
        },function(){
            $('.div2').text('.div1 mouseout');
        })
  • Turn a CSV string into a Javascript object #290 is the latest revision

    In response to http://stackoverflow.com/questions/15009744/how-to-iterate-over-a-javascript-line-delimited-string-check-the-semi-colon-del#15009744

    $('#btn_search').on('click', function(e){
        e.preventDefault();
        
        var results = findEntriesWithID($('#search_box').val());
        
        $('.output').text(JSON.stringify(results));
    })
    
    var csvString = $.trim ...
  • Background colour fills padding

    In response to question at http://stackoverflow.com/questions/14986244/css-background-color-not-including-bottom-padding

    <a class="AdminLink" href="#">
    Update Wait Time
    </a>
  • Create an inner shadow that obscures descendant elements #2 is the latest revision

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

    <div class="row">
       some content
    
       <div class="info-box">
          some other content
       </div>
    </div>
  • Tabular layout for forms #6 is the latest revision

    Trying to use CSS table (-*) display properties to force a tabular layout, but the .inputField s (set to display: table-row) won't fill the width. Why?

    <fieldset>
        <div class="inputField">
            <label for="fileTitle">
                Title
            </label>
            <div class="inputWrapper">
                <input id="fileTitle" type="text"/>
            </div>
        </div>
        <div class="inputField">
            <label for="fileDescription">
                Description
            </label>
            <div class="inputWrapper">
                <textarea id="fileDescription"></textarea>
            </div>
        </div>
        <div class="inputField">
            <label for="fileTags">
                Tags
            </label>
            <div class="inputWrapper">
                <input id="fileTags" type="text"/>
            </div>
        </div>
    </fieldset>
  • jQuery UI doesn't force relative positioning #1 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $('div').on('click', function bounce(){    
        $(this).effect("bounce", { times:3 }, 300);
    })
  • Highcharts thousandsSep options property #14 is the latest revision

    Highcharts comes with a configurable `thousandsSep` (short for 'thousands separator') property as part of its localisation (`lang`) options. It has a default value of `,` — which strongly implies that by default, numeric strings will have a comma delimiting thousands. However, even if this option is explicitly set, numeric strings never feature thousands separators. Why is this?

    /* Chart Options */
    var data = (function (data) {
    	return data;
    })({
    	"series": [{
    		"aggregation": "count",
    		"yAxis": 1,
    		"name": "",
    		"data": [{
    			"name": "Foreign policy - 17274",
    			"y ...
  • Absolute positioning recalculates dimension offsets #25 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    <div style="position: absolute; height: 500px;">
        <div style="width: 200px; height: 300px; background-color: Green; position: relative;">
            a</div>
        <div style="width: 200px; background-color: Blue; top: 0px; bottom: 0px; position: absolute;">
            b</div>
    </div>
  • Table rows collapse #129 is the latest revision

    Unless you specify their height

    <table>
        <tbody>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2"> </td>
                <td rowspan="1"> </td>
                <td rowspan="1"> </td>
            </tr>
            <tr>
                <td colspan="2" rowspan="2"> </td>
            </tr>
            <tr>
                <td colspan="1"> </td>
                <td colspan="1"> </td>
            </tr>
        </tbody>
    </table>