patrixd

/**
 * Testing clip path in images
 */

img {
	max-width: 25%;
}
.figure1 {
	clip-path: polygon(20% 15%, 50% 0, 80% 15%,100% 50%,80% 85%, 50% 100%, 20% 85%,0 50%);
}

patrixd

/**
 * Playing with skew transformation */
 .paralelogram {
	color: hsl(359, 50%, 33%);
	font-family: calibri, verdana;
	position: relative;
	padding: 0.5em 1.3em; 
    font-variant: small-caps;
    margin: 0 1em;
    width: 20%;

patrixd

/**
 * Playing with border-radius, csssecrets and http://simurai.com/archive/buttons/#flexibility. See the result at http://dabblet.com/gist/04e252b3d03a24c4f13d0278362a6bc8
 */
body {
  background-color: #efefef;
}
button{
  color: #204645;
  text-shadow: rgba(255,255,255,.5) 0 1px 0;
  border: none;

patrixd

$.fn.pointerEvent = (function () {
        var $el = $(this),
            _eventData = "",
            _touchEventName,
            _bindEvent = function (nameListener, mouseEvent, data, callback) {
                if ($el.length === 0)
                    return;
                _touchEventName = _getTouchEventName(mouseEvent);
                if (_.isFunction(data)) {
                    callback = data;

patrixd

@import 'nib'


background-before-layer(opacity, startPoint, startColor, startInterval, endColor, endInterval)
  content " "
  background-linear-gradient(startPoint, startColor, startInterval, endColor, endInterval)
  position absolute
  width 100%
  height 100%
  if opacity

patrixd

# The better is to use the next: https://github.com/jquery/jquery-mousewheel 
$('body').on('mousewheel', onMouseWheel);

onMouseWheel = (e) ->
  scrollDistance = e.deltaY * e.deltaFactor
  wHeight = $(window).innerHeight()
  newScrollTop = scrollDistance * -1 + $('body').scrollTop()

  #Example of use, automatic scrolldown when the next slide is in the middle it scrolls down automatically
  clearTimeout(window._scrollTimer)

patrixd

loadedScript = {};
loadingScript = {};
pendingScriptSuccess = {};

function loadScript (url, success, async) {
	if(loadedScript[url]) {
		success();
		return;
	}

patrixd

<div class="selectContainerWithBtn">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
</div>

patrixd

var listData = ["LABEL C", "LABEL D", "LABEL E"];
listData = listData.concat(
    _.map(this.model.toJSON(), function (item) {
        return [item.PropertyName, parseFloat(item.PropertyC), parseFloat(item.PropertyD), parseFloat(item.PropertyE)];
    }, this)
);
data = google.visualization.arrayToDataTable(listData);

// Create and draw the visualization.

patrixd

var BackboneView = Backbone.View;
Backbone.View = BackboneView.extend({
    constructor: function (options) {
        this._configure(options || {});
        BackboneView.prototype.constructor.apply(this, arguments);
    },
    _configure: function (options) {
        if (this.options) options = _.extend({}, _.result(this, 'options'), options);
        //_.extend(this, _.pick(options, viewOptions));
        this.options = options;