DailyJS

DailyJS

The JavaScript blog.


Taglayout
Featured

layout responsive angularjs react

React-Grid-Layout, Angular Debug Bar and Reading Position

Posted on .

React-Grid-Layout

Samuel Reed sent in React-Grid-Layout (GitHub: strml/react-grid-layout, License: MIT), a grid system that is responsive. It requires React but doesn't require any other library (including jQuery).

You can use the ReactGridLayout custom element in templates which allows you to cleanly specify how many rows and columns you'd like. It also supports props for columns, rows, responsive breakpoints, and layout change events.

Although the author states it has fewer features than Packery or Gridster, it supports some cool stuff like vertical auto-packing and dragging and resizing.

Angular Debug Bar and Reading Position Indicator

Maciej RzepiƄski sent in two useful Angular projects:

angular-debug-bar allows you to including a new element, angular-debug-bar, to show some statistics about the current page. This includes a count of $watch and $listener items, DOM objects, and page load time. Each metric is defined with a registerPlugin method, so you might be able to add new metrics although I haven't tried that myself.

angular-rpi is based on the Reading Position Indicator post from CSS-Tricks. It shows a bar at the top of the page as you scroll the document:

RPI

You can use it with the rpi directive. Both projects have a demo that you can run locally. If you want to edit the progress bar styles, then you can use the .scss file and run npm install ; bower install ; gulp.

Featured

jquery ui design plugins layout grid

jQuery Roundup: equalize.js, jQuery Builder, Gridster.js

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

equalize.js

This plugin comes from the "should I just use a table?" department of design technicalities that we still have to deal with in 2012: equalize.js (GitHub: tsvensen / equalize.js, License: MIT/GPL). Created by Tim Svensen, this plugin resizes elements to match their height or any other dimension supported by jQuery Dimensions.

It works by calling a single method on the parent selector:

// Height is the default
$('#height-example').equalize();

$('.parent').equalize('outerHeight');
$('.parent').equalize('innerHeight');
$('.parent').equalize('width');
$('.parent').equalize('outerWidth');
$('.parent').equalize('innerWidth');

The documentation has full examples.

jQuery Builder

jQuery Builder (GitHub: jgallen23 / jquery-builder, License: MIT, npm: jquery-builder) by Greg Allen is a web-based tool for building a custom version of jQuery 1.8.1. As jQuery has evolved it's got a lot easier to include only the components necessary for a given project. This particular solution has been made using Node, and is installable with npm.

Gridster.js

Gridster.js (GitHub: ducksboard / gridster.js, License: MIT) from Ducksboard is a grid plugin that allows layouts to be designed by drag and drop. Elements can span multiple columns, and by dynamically added and removed. Any element can be used because Gridster is based around data attributes.

Gridster is distributed with suitable CSS, and supports IE 9+, Firefox, Chrome, Safari, and Opera.

Featured

jquery plugins cli layout

jQuery Roundup: Isotope, Query, 1.5 Changes, File Upload

Posted on .

Isotope

Isotope (GitHub: desandro / isotope) by David DeSandro and
Metafizzy is a layout plugin with lots of options and elegant
animations. The basic Isotope
demo
repositions elements
(literally) when the browser is resized. Elements can also be filtered, and it can cope with resized elements using the reLayout
method
.

Query

Query by TJ Holowaychuk is jQuery for the command-line. It uses Node and jsdom
to provide nifty shell access to jQuery selectors and DOM traversal
features:

curl http://twitter.com | query 'a#logo' | query img attr alt
# Returns 'Twitter'

Node is required, and Query can be installed using
npm with npm install query.

jQuery 1.5 Changes

jQuery 1.5 Changes Part I
by Garrett from Red Ventures discusses the new Ajax module in jQuery 1.5
with some details on \$.Deferred(), which while incredibly
useful, may seem confusing at first.

jQuery File Upload

jQuery File Upload (GitHub: blueimp / jQuery-File-Upload) by
Sebastian Tschan is a jQuery file upload plugin that handles multiple
files, drag and drop, progress bars, cancelled uploads, and a lot more
features.

This plugin also optionally uses jQuery UI for additional interface
features.