background preloader

Isotope

Isotope

GBKS/Wookmark-jQuery jGrowl BlocksIt.js - Dynamic Grid Layout jQuery Plugin Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. Also, you can even combine the ‘blocks‘ and make a huge block! How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.) #Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status.

Stop paying your jQuery tax Reminder, script tags block rendering It is common advice to move all your external JavaScript includes to the footer. Recently, the movement for fancy JavaScript loaders like ControlJS, script.js and so on has also picked up steam. The reason for this advice is sound and pretty simple. Often people avoid the async attribute on script tags cause they usually execute in the order they return this means you need to be more fancy about figuring out when the script is ready. Why is that jQuery synchronous script include stuck in the html 'HEAD' section? jQuery solves the age old problem of figuring out when your document is ready. $(wowThisIsSoEasy); // aka. It allows you to arbitrarily add bits of rich functionality to your page with incredible ease. The jQuery tax There are 3 types of tax you pay when you have a script in your header. The initial tax The most expensive tax is the initial hit. An important note is that it is common to serve jQuery from a CDN be it Google or Microsoft.

6 Amazing jQuery Plugins to design Pinterest like Dynamic Grid Layout Web designers around the Globe were so mesmerized by Pinterest's Dynamic Grid layout that they have been working to develop the same since then. And today we have a couple of great jQuery plugins to easily design the same interface for our Web projects that Pinterest and many other websites have (Recently adopted by Digg too). So here are 6 Great and Simple jQuery Plugins to design the Dynamic Grid Layout for Pinterest like Website. 1. Masonry This is the most widely used dynamic grid layout plugin for jQuery. 2. Its an exquisite jQuery plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. 3. BlocksIt.js is a jQuery plugin to create dynamic grid layout. 4. Wookmark is a website to bookmark Images and videos, and has a Pinterest like interface. 5. If you are a Ruby Developer and wish to create the Pinterest style layout in a short period of time, then this layout is for you. 6. Flex is a fluid asymmetrical animated grid plugin for jQuery.

Related: