Browse ALL the snippets ! - Page 3 of 6

Just make sure the target's closest positionned parent is the body or a fixed, full-width-and-height overlay div.

.lightbox(@width, @height, @margin) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @width;
    height: @height;
    margin: -(@height / 2) 0 0 -(@width / 2);

    @media screen and (max-width: (@width + @margin * 2)) {
        right: @margin;
        left: @margin;
        width: auto;
        margin-left: 0;
    }

    @media screen and (max-height: (@height + @margin * 2)) {
        top: @margin;
        bottom: @margin;
        height: auto;
        margin-top: 0;
    }
}

Got a transparent color on top of a solid one, and need to get the final result's true tone ? Use this !

.fusion-background(@background, @top) {
    @top-alpha: alpha(@top) * 100%;
    @top-color: rgb(red(@top), green(@top), blue(@top));

    background-color: mix(@top-color, @background, @top-alpha);
}

Place a .bat file with this inside at the root of your Composer-based PHP project to be able to run your unit tests from there in a breeze !

@echo off
php vendor\phpunit\phpunit\composer\bin\phpunit $*

# Then just run "phpunit" from the command line

Here is a little function taking a week number and a year as parameters, and returning the date of this week's monday. If no parameters are given, it will use the current week and year.

function getMonday($week = null, $year = null)
{
    $week || $week = date('W');
    $year || $year = date('Y');

    return date('Y-m-d', strtotime($year.'W'.str_pad($week, 2, '0', STR_PAD_LEFT)));
}

Yet another PHP function port to JS, directly added to the String prototype.

String.prototype.rtrim = function(toTrim) {
    var s = this,
        e = s.length - 1;

    if (toTrim == null) {
        return s.trimRight();
    } else if (toTrim instanceof Array) {
        toTrim = toTrim.join();
    }

    while ((e >= 0) && (toTrim.indexOf(s.charAt(e)) != -1)) {
        s = s.substr(0, e);
        e--;
    }

    return s;
};

// Use it
myString = myString.rtrim(); // removes spaces (calls myString.trimRight())
myString = myString.rtrim(['.', ',']); // removes periods and commas
myString = myString.rtrim(['.,']); // same here

Here's a little addition to JS's String type to be able to pad it just like in PHP

String.prototype.pad = function(character, length, after) {
    var ret = this;

    while (ret.length < length) {
        ret = (after ? ret + character : character + ret);
    }

    return ret;
}

Small and simple method to figure out weekends in a date interval and get the remaining

function getWorkingDays($nb_days, $from, $to)
{
    $wed = 0; // Week-end days

    // There's 2 week-end days for every 7 days
    while ($nb_days >= 7) {
        $wed += 2;
        $nb_days -= 7;
    }

    // Anything left ?
    if ($nb_days > 0) {
        $dow = date('N', strtotime($from)); // Day of week (Monday = 1, Sunday = 7)

        for ($i=0;$i<$nb_days;$i++) {
            if (in_array($dow, array(6, 7))) { // Current day is a week-end day
                $wed++;
            }

            // Day of week for next day
            ($dow == 7) && $dow = 0;
            $dow++;
        }
    }

    return $nb_days - $wed;
}

Here is a collection of CSS rules that extend Bootstrap and improve some of its features

/** Footer block class, mirroring Bootstrap's .page-header **/
.page-footer {
    border-top: 1px solid #EEEEEE;
    margin: 20px 0px;
    padding-top: 20px;
}

/** Unstyled .well **/
.well.well-invisible {
    background: transparent none;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/** .well-like breadcrumb, with rounded sides **/
.breadcrumb.well {
    padding: 8px 19px;
    border-radius: 18px;
}

/** Adding back numbers for ordered breadcrumbs **/
ol.breadcrumb {
    list-style-type: decimal;
    list-style-position: inside;
}

/** The case above will also need this **/
.breadcrumb.clearfix li {
    display: list-item;
    float: left;
}

/** Inline alert, with lower vertical padding so it's the same height as a .btn
    Bottom margin is removed as well in case this is floated **/
.alert-inline {
    display: inline-block;
    margin-bottom: 0px;
    padding: 4px 14px;
}

If you're using Twitter Bootstrap with the excellent FontAwesome, here's a quick tip to automatically switch icons on a collapse button depending on its current state :

/*
Make sure your button(s) :
- has data-toggle="collapse" and data-target attributes
- is .collapsed in the beginning (I'm assuming the target element is collapsed by default)
- contains an i.icon-caret-up

The following will replace the icon with the one from .icon-caret-down when the collapsible block is in its hidden state :
*/

.collapsed[data-toggle="collapse"] i.icon-caret-up:before {
    content: '\f0d7';
}

On IE (at least up to version 9), you can't properly style a [disabled] element. This short snippet aims to offer you a way around. I'm assuming you use Paul Irish's conditional classes :

// Detection of problematic elements
$('.ie8 [disabled], .ie9 [disabled]').each(function() { $(this).removeAttr('disabled').addClass('disabled'); });
$(document).on('focus', '.disabled', function() { return false; });

// Now just adapt your stylesheet by adding the extra selector .disabled to your [disabled] rules