jQuery.ScrollTo. Notice I've pretty much stopped updating this blog, but the plugin development is still on-going.
You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); If you need to scroll the window (screen), then use: $.scrollTo(); How to specify where ?
Settings Getting the real scrollable element out of a node In order to find the real element whose attributes will be animated, you need to call $.fn. $(window). Manually finding the scrolling limit ScrollTo always had an internal function that calculates the scrolling limit for both axes. Overloading This plugin accepts the arguments in two ways, like $.animate(). $().scrollTo( , , ); $().scrollTo( , ); In this second case, you can specify the duration in the hash. jQuery ScrollTo - Smooth Scrolling to any jQuery/DOM Element. 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. 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. The icons used in this demo are from the beautiful Social Network Icon Pack by Rogie King of komodomedia.com. Feel Free To Jump Around From Here Here is a demo of what we will be making. jSocial Demo Look cool? The first thing I am going to do is create the canvas where I want the icon list to appear. That is it for the HTML part, for now. Social Links Plugin By thatryan.
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.
Plugin development has evolved over the past few years. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. 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. 11 Javascript Plugins Optimized for Mobile Devices (With QRCode for Quick View!) The popularity of mobile devices has increased dramatically within these few years.
We have responsive website that transform itself to different screen size and now we have a bunch of javascript plugins built and optimized for mobile as well. When I was searching for resources, I was having this issue that, whenever I want to view it in my mobile, I need to type the URL manually! I got this inspiration from Cubiq (one of the cool mobile optimized plugin developers), they use QRCode for the demo link, and I just have to scan it with my mobile phone! QR Code generator JQuery plugin. Hi everyone!
Google has cool charts API that allows you to easy have chart on your page, so I decided to create a simple JQuery plugin to work with one of them :) I have HTC phone and sometimes I'm toooooooooooooo lazy to type in an address (with a lot of slashes, dashes, dots and other parameters) which I see on my PC monitor, so QR Code is really good thing that allows to simply generate an image and open this page on my mobile.
Now the code: 1. You may need is an HTML element on page which will contain generated image, something like:<span class="qrContainer"></span> 10 jQuery HTML Plugins. Here’s another list of 10 jQuery HTML Plugins to spice up your HTML based websites ;-).
Check it out and see what else you’ve never been bumped into. Have fun! 1. jQCandy floating-head-foot plugin This plugin is useful for HTML pages containing large tables that do not fit in the browser viewport. Tipped 2 - jQuery Tooltips. Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library.
Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be changed without having to create any images. Canvas based tooltips also have the advantage that they look great in every browser, even in IE6! Smart Social Counter. Moleskine Notebook with jQuery Booklet. Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel.
We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful Moleskine Photoshop file by Dennern at deviantart here: My Moleskine (PSD) For the navigation arrows […] View demoDownload source. jQTouch — jQuery plugin for mobile web development. jQuery plugin: Validation. This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods.
All bundled methods come with default error messages in english and translations into 37 locales. If you want to support the development of this plugin, please donate to the ongoing pledgie.org campagin. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. Current version: 1.11.1License: MIT Files: DownloadChangelogDemosDocumentationGitHub RepositoryGitHub 1.11.1 Tag 1.11.1 files on Microsoft’s Ajax CDN (hotlinking welcome): Dependencies Required. Playground - MobilyMap. Playground - MobilySlider. Isotope. GMAP3 - jQuery Plugin For Google Maps.