JSFiddle

  • Showing a checkbox as a button while keeping full checkbox functionality

    This fixes some of the problems with checkboxes that people have started implementing with buttons

    <div class="checkbox-button">
        <input id="check" type="checkbox" />
        <label for="check"><i class="icon-something"></i>Click to check</label>
    </div>
  • Mimic_7 - javascript

    hide/show fieldsets based on product type dropdown. Validate required fields that r within fieldsets that are currently visible. Show msg detailing which required fields are empty, prevent form submission until required fields are completed.

    $("#section-11,#section-12,#section-13,#section-1011").hide();
    
    var projtype = new Array({
        value: 'Cars',
        sect_id: 'fieldset#section-11'
    }, {
        value: 'Planes',
        sect_id: 'fieldset#section-12'
    }, {
        value ...
  • Test jQuery data chaining #25 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    $(function() {
        var $d1 = $('#data-store-1'),
            $d2 = $('#data-store-2'),
            $d3 = $('#data-store-3'),
            $ds = $('.data-store'),
            $output = $('#output')
            tag = 'data-store-tag',
            output;
    
        // Store different values
        $d1.data ...
  • Set background color through CSS for text only with line breaks #64 is the latest revision

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

    <div>
        <p>
            This text is longer than 200 pixel and therefore a line break will occur
        </p>
    </div>
    
    <hr />
    
    Example for <a href="http://stackoverflow.com/questions/7123997/set-background-color-through-css-for-text-only-with-line-breaks">Set background color through ...</a>
  • $.pjax demo without backend #136 is the latest revision

    Requests will not work, so showing an error message.

    $('a[data-pjax]').pjax(undefined, {
        error: function(jqXHR, textStatus, errorThrown) {
            alert("Could not use pjax!\n\n" + jqXHR + "\n\n" + textStatus ...
  • Cannot use jQuery consistently cross-browser on focused element if the element is <input type="file" />. #50 is the latest revision

    Using $(':focus') gives no results in Firefox (tested using 10.0.1), but seems to work in other browsers. $(document.activeElement) throws in Firefox (tested using 10.0.1) with "Permission denied to access property 'nodeType'."

    function logFocusedElement() {
        var $focused;
       
        // Cannot find input type file elements with :focus,
        // $focused.length is always 0 in Firefox (tested ...