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; }
submitted by neemzy on 03/04/2013
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