Jquery: 10 Web Page Layout Plugins
With thousands (yes thousands...) of new jQuery plugins that have been released we have worked hard filtering down all of the those plugins to bring you the 50 that we feel are the most innovative and useful.
We have split all of the plugins into the following categories: Web Page Layout Plugins, Navigation Plugins, Form Plugins, Slider & Carousel Plugins, Chart & Graph Plugins, Image Effect Plugins, Video Plugins, and finally, everything else in-between.
Enjoy the first category: Web Page Layout Plugins
1. equalize.js
The jQuery plugin for equalizing the height or width of elements. Equalize will now accept a settings object to get the "minimum max dimension". By setting reset to true the height/width will be removed before determining the max.
2. Freetile.js
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.
3. gridster.js
Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.
4. Zoomooz.js
Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Zoomooz uses a smart easing that works the same way as css animation easings. If you'd like to use it with other jQuery animations, check out jquery.easie.js.
5. Wookmark
Wookmark is a plugin for creating a dynamic, multi-column layouts. It lays out a series of elements in a dynamic column grid.
6. jQuery HiddenPosition
This plugin works exactly (at least in our intentions) as position plugin from jQuery UI. The need for this plugin raised from the fact that it doesn't work with hidden elements, and in some cases we prefered to position them before showing. Since we still use jQuery UI where we don't need to position anything hidden or any of the additional options, this plugin is built so that it can use the exact same option input, this way you just need to change your code from $().position({options...}); to $().hiddenPosition({options...});. The inverse is true unless you are using one of the few additional options, like viewport setting. Another big difference is that HiddenPosition works well even with position:relative elements, so take that into account if you need to go back to jQuery UI.
7. Stellar.js
Parallax has never been easier. Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. Add some simple data attributes to your markup, run $.stellar(). That's all you need to get started.
8. turn.js
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.
9. Responsive Measure
Responsive Measure is a simple script that allows you to pass in a selector which generates the ideal font size needed to produce the ideal measure for your text.
10. jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.
Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.
The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.
As of version 1.1, the plugin also allows you to animate the scroll position to a given waypoint in the path.
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
Related Posts
Interesting and Helpful Google Search Features You’ll Want to Start Using
Google – THE search engine for many internet users. It has been with us since its launch back in 1998 and thanks to its simplicity of use and genius algorithms,…
How to use your browser as a file browser, in Chrome or Microsoft Edge
We're going to explain how to use the Chrome browser as a file browser, both on Android and on your computer. This is a hidden feature of Chromium that will…
How to watch deleted or private Youtube videos
Today we are going to talk about the technique which you permit to be able to recover videos from Youtube that was deleted, made private or simply blocked by Youtube…
How to ‘leave’ a WhatsApp group without actually leaving
If you want to leave a WhatsApp group but don't want the 'You left the group' message to be displayed, read this article. Some people love WhatsApp groups, and some people…
The 6 Essentials for Creating a Visually Appealing Web Design
Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…
How to get notified when one of your WhatsApp contact is online
Privacy is one of the most important aspects among most users of the popular Facebook messaging application. So much so, that many settings have been included in WhatsApp itself to…
How to change font size and format in WhatsApp
Your WhatsApp messages can be much more original and fun by changing the font, size, or format. Here's how. WhatsApp is the leading messaging app for virtually everyone, with permission from…
WhatsApp: How to View Deleted Messages
Words are carried away by the wind, as long as they are not written on WhatsApp. Sending it was like getting a tattoo, something you'll always like, or yet it'll…
How to enable Chrome's new feature that blocks ads that consume your CPU, battery, and Internet connection
Google has announced that it will begin experimenting with a technology that they have been developing for months, in order to improve the battery consumption of our computers and the…
Protect yourself: know which apps have access to your location, microphone and camera
When you install an application on your smartphone, you decide what permissions you give it, but it's not always clear. We tell you how to know if those permissions are…
How to disable the camera, microphone and all sensors on your phone with a single touch in Android 10
With Android 10, Google has improved the privacy of its operating system with new options, but has also hidden an interesting option that deactivates all the sensors of the device…
Java 12, finally less verbose?
We all know Java for its characteristics thanks to which, despite more than 20 years have passed since the first version, it is still one of the most studied and…