background preloader

25 jQuery Plugins to help with Responsive Layouts

25 jQuery Plugins to help with Responsive Layouts
The most popular topic of discussion at the moment is undoubtedly responsive layouts in web design. Without going into it too much, a responsive layout allows you to offer a specific and optimised screen size based on whatever device (mobile, tablet…) the visitor uses. You would typically use Media Queries to resize the overall layout, but what about all of those individual elements and features that make your page unique? Navigation, forms, images, sliders, carousels… they all need to be optimised as well. That is were this post comes in, by highlighting 25 jQuery plugins that will help you optimise and resize those trickier web elements. Response.js Response JS is a lightweight plugin that gives you the tools for producing performance-optimized, mobile-first responsive websites. Response.js Responsly The Responsly plugin is a set of simple responsive widgets written using CSS3 transformations. Responsly Menu to a Dropdown for Small Screens Menu to a DropdownDemo Responsive Menu Doubletake

Web development blog, news and reviews - Developer Drive jQuery is an actively-developed JavaScript library with a fairly rapid release cycle. As well as general enhancements, performance tweaks and bug fixes, new methods are frequently added to the library. In this article we’ll take a look at the new methods that have been added to the 1.6+ release and some of the enhancements. Create a jQuery Plugin For Social Networking So I was thinking about making a jQuery plugin for a while now, and then the opportunity to guest write here showed up, and I thought I would combine the two and write a tutorial on making a jQuery plugin! This is a plugin I actually just made, it will take a few input options that are, for the most part, your usernames to various social networking sites. The plugin handles the rest; creating all the links and building a nice list, complete with matching icons to everywhere you are on the web. I thought this would be helpful to people just starting out with plugins, and make it easy for those who do not want to make sprites and pretty social lists.

jQuery Library for SharePoint Web Services - Documentation Q: What do I need to install?A: Not much. You need to put the two script files (jQuery and SPServices) into a location where all users have read permission. I recommend a Document Library in the root site of your Site Collection for easy access. Download Google Fonts We are proud to have teamed up with Google to offer desktop versions of their popular Google Fonts free of charge. Offered for use in print, these fonts are delivered using SkyFont’s patent-pending font delivery technology and can be used anywhere. Each time a font is updated — such as when new characters are added — SkyFonts will automatically update the font on your device. Syncing Google Fonts with SkyFonts will also improve your web browsing experience, by cutting the time spent downloading fonts. Install Fonts Desktop versions of Google Fonts are installed to your machine via SkyFonts.

How to use Media Queries in JavaScript Responsive design is one of the most exciting web layout concepts since CSS replaced tables. The underlying technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets. In the following example, cssbasic.css is served to all devices. Essential jQuery Plugin Patterns - Smashing Coding Advertisement I occasionally write about implementing design patterns1 in JavaScript. They’re an excellent way of building upon proven approaches to solving common development problems, and I think there’s a lot of benefit to using them. But while well-known JavaScript patterns are useful, another side of development could benefit from its own set of design patterns: jQuery plugins. The official jQuery plugin authoring guide2 offers a great starting point for getting into writing plugins and widgets, but let’s take it further.

SharePoint Social Data using Java Script This post shows the code to call the default like button functionality in SharePoint 2010 and also shows you how to show the number of likes for given URL using Jquery and SPServices. Call the below javascript function in sharepoint socialdata.js file for liking an item. Below code can be used on an image click to replicate the SharePoint 2010 like To display the number of likes for an URL you can use the JQUERY and jquery library spservices which can downloaded from here The documentation on calling methods can be found here

Free textures for your next web project. Nothing like a field of beautiful flowers. Download Download These lovely water-colorful dots will make your designs pop. Portamento - easy sliding/floating panels in jQuery Portamento is a jQuery plugin that makes it simple to add sliding (aka "floating") panel functionality to your web page. All that's needed is some simple CSS and one line of JavaScript, and you're away! It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too. Portamento also has sensible behaviour if the user's viewport is too small to display the whole panel, so you don't need to worry about users not being able to see your important content. Demos

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler jQuery QuickFlip 2 jQuery QuickFlip takes any piece of HTML markup and flips it over like a card. The effect is similar to the UI animation on the iPhone Graphic Design Basics - Elements and Principles Principles of Design: Balance, Proximity, Alignment, Repetition, Contrast, and White Space. Jacci Howard Bear Elements of Design: line, shape, mass, texture, color Get a better understanding of the basics of graphic design by studying the elements and principles of graphic design that govern effective design and page layout. jQuery Pagination revised - Code is Poetry There are many nasty pagination implementations and certainly sooner or later I've also written such a cruelty. That's why I've been working on a generalized solution for long in order to combine the variety of needs that are imposed on such a navigation to finally put an end to blocks of code that are copied from one project to another with the consequence that it gets no longer understood over the time. The result of these efforts is my third jQuery plugin that has another big advantage over server side pagination; by generating the links virtually on the client, the risk of duplicate content drops and the need of ugly follow, noindex link attributes left unnecessary. The pagination plugin also combines a varity of features.

Related:  jQuery