Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
10 Jun

Autoresizing Smart Columns with jQuery

  • Information, License Free
  • Leave a Comment

Currently, there are two commonly used techniques on displaying columns, the fixed columns and the liquid columns. With fixed columns, there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in. The downside of liquid columns is that we are restricted to having a fixed number of columns per row.

SohTanaka has thought of a solution: Smart Columns with CSS & jQuery would be able to benefit the situations is to take the good of both scenarios and mash it into one. Allow as many fixed columns to line up across the viewport. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.

And also, It keeps a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

Smart Columns

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/smart-columns/
License: License Free

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
Easy List Splitter Helps You Split a List into Different Columns

Easy List Splitter Helps You Split a List into Different Columns

A Responsive Grid System for Fixed & Fluid Layouts

A Responsive Grid System for Fixed & Fluid Layouts

jParallax Turns a Selected Element Into a Viewport

jParallax Turns a Selected Element Into a Viewport

The 1140 CSS Grid 12 Columns Fluid Down to Mobile

The 1140 CSS Grid 12 Columns Fluid Down to Mobile

How to Adapt Your Site to Different Window Sizes

How to Adapt Your Site to Different Window Sizes

Design Your XHTML and CSS Layout with YAML Builder

Design Your XHTML and CSS Layout with YAML Builder

Comments
  • http://www.toupil.fr Aurélien

    great idea !

  • http://www.webtrafficroi.com ZK@Web Marketing Blog

    To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

  • Pingback: A Web Developer’s Bookmarks « Hired Guns Creative

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • Free Responsive HTML5 + CSS3 Site Templates
  • 35 Creative Twitter Covers for Web Designers
  • FROONT: Responsive Web Design in the Visual Way
  • Designing Experiences for Responsive Web Sites
  • jQuery Unveil: The Lightweight Version of Lazy Load
  • What are HTML5 Datalists and When to Use Them
  • Easy Responsive Tabs jQuery Plugin for Web & Mobile
  • jQuery.Swatches Turns Div into a Sweet Color Swatch
  • Pure: A Set of Small & Responsive CSS Modules
  • Create Sexy Android-like UI with Fries
Sponsors
Plugins
  • Advertisement15
  • Calendar48
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour17
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup50
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons27
  • Color Schemes25
  • Fonts47
  • Forms114
  • Icons109
  • Patterns24
  • PS Tutorials17
  • Stock Photos21
  • Tables25
Others
  • Announcement104
  • Best Collections6
  • Code57
  • eCommerce25
  • Framework217
  • Hosting13
  • Information244
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools301
  • Webmail14
Licesnes
  • BSD License69
  • CC License123
  • GPL License224
  • LGPL License40
  • License Free748
  • MIT License421
Sponsors
Advertise Here
Partners
MaxCDN