New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →

Book a Demo Sign in

skewjs

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

skewjs

Simple, lightweight, dependency free library for skewing DOM elements in pixels.

latest

Source

npm

Version: 0.7.1

Version published: 8 years ago

Maintainers: 1

Created: 8 years ago

Source

Skew is a dependency free JavaScript library for performing skew transformations of DOM elements measured in pixels. It allows to keep element's skew by the same amount of pixels and unskew its content.

Features:

calculation of skew transformation measured in pixels,
unskew element's content,
skew update on window resize,
dependency free,
can be used standalone with plain JavaScript or as jQuery plugin,
responsiveness - breakpoints definition,
configurable debouncing,
cross-browser - supports IE9+ and modern browsers,
lightweight - ~5kB minified.

NPM

npm install skewjs

CDN

https://www.jsdelivr.com/package/npm/skewjs

Getting started

Before closing <body> tag add:

<script type="text/javascript" src="skew.min.js"></script>
<!--CDN-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/skewjs@0.7.1/skew.min.js"></script>

Then add script:

window.onload = function() {
  var Skew = new Skew('selector', {x: 50});
}

or use jQuery:

$(function() {
  $('selector').skew({x: 50});
});

Syntax

JavaScript:

var skewObj = new Skew('selector', {option: value});
//example
var skewObj = new Skew('.skew', {x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});

skewObject.method(argument);
//example
skewObj.update({x: 30, breakpoints: [{break: 768, x: 15}]});

jQuery:

$('selector').skew({option: value});
//example
$('.skew').skew({x: 50, y: 100, breakpoints: [{break: 768, x: 30}]});

$('selector').skew('method', argument);
//example
$('.skew').skew('update', {x: 30, breakpoints: [{break: 768, x: 15}]});

Options

Option	Type	Default	Description
x	int	0	Element's skew on x axis in pixels.
y	int	0	Element's skew on y axis in pixels.
unskewContent	bool/string	false	Element's content unskew option / css selector of element's content to unskew (see example)
breakpoints	array	[]	Array of objects containing breakpoints and setting objects (see example).
debounce	boolean	true	Debounce on resize event.
debounceTime	int	50	Debounce time tollerance in ms.
beforeSkew	array/function	[]	function/array of functions fired before skew (see events).
afterSkew	array/function	[]	function/array of functions fired after skew (see events).
beforeElementSkew	array/function	[]	function/array of functions fired before single element's skew (see events).
afterElementSkew	array/function	[]	function/array of functions fired after single element's skew (see events).

Unskew option example

//Unskew element's content
var skewObj = new Skew(
  '.skew',
  {
    x: 30,
    unskewContent: true
  }
);

//Unskew element's content matching css selector
var skewObj = new Skew(
  '.skew',
  {
    x: 30,
    unskewContent: '.skew-content'
  }
);

//Don't unskew element's content (default)
var skewObj = new Skew(
  '.skew',
  {
    x: 30,
    unskewContent: false
  }
);

Breakpoints option example

var skewObj = new Skew(
  '.skew',
  {
    x: 30,
    y: 60,
    breakpoints: [
      {
        break: 1024
        x: 60,
        y: 30,
        unskewContent: true,
        debounce: false,
        debounceTime: 30
      },
      {
        break: 768,
        x: 30,
        unskewContent: '.skew-content'
      },
      {
        break: 480,
        y: 60
      }
    ]
  }
);

Methods

Method	Arguments	Description
skew		Recalculates skew
update	options : object	Update Skew options
destroy		Destroys Skew
beforeSkew	listener : function	Add listener to beforeSkew event (see events)
afterSkew	listener : function	Add listener to afterSkew event (see events)
beforeElementSkew	listener : function	Add listener to beforeElementSkew event (see events)
afterElementSkew	listener : function	Add listener to afterElementSkew event (see events)

Events

Events has been added with version 0.7.

Event	Params	Description
beforeSkew	skewObj, targets	Before start of skewing elements.
afterSkew	skewObj, targets	After skewing all elements.
beforeElementSkew	skewObj, target	Before skew of every element.
afterElementSkew	skewObj, target	After skew of every element.

Keywords

FAQs

What is skewjs?

Is skewjs well maintained?

Package last updated on 07 Sep 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

skewjs

Getting started

Syntax

Options

Unskew option example

Breakpoints option example

Methods

Events

Keywords

Related posts

Feross on TBPN: How North Korea Hijacked Axios

Attackers Are Impersonating a Linux Foundation Leader in Slack to Target Open Source Developers