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. It provides easy-to-use action hooks for dynamically swapping code blocks based on screen sizes and semantic methods for progressively serving media via HTML5 data attributes.
Response.js Responsly Responsly FitText. 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. jSocial | 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.
We no longer have just one way to write plugins, but many. Some developers may wish to use the jQuery UI widget factory3; it’s great for complex, flexible UI components. I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. Note: This post is targeted at intermediate to advanced developers. Patterns $.fn.myPluginName = function() { }; 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 Click to flip panel I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. Download QuickFlip 2 for jQuery Read the QuickFlip documentation QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name).
It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. What’s new in QuickFlip 2? QuickFlip 2 is now even easier to implement. Additionally, QuickFlip’s new version makes triggering the flip effect much simpler due to a new flip function that can be attached to any jQuery selector. Download QuickFlip 2 QuickFlip Examples Basic QuickFlip example A ton of QuickFlips with a hover effect How to use QuickFlip 2 First let’s set up our markup. 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! Saved me heaps of time. So, don't worry, I have put QRCode in every single demo, feel free to play it with your mobile phone: RECOMMENDED: To see the demo on your mobile device, you can installe QR Reader, so you don't have to type in URL manually (if you're viewing this page with desktop/laptop). In case you're wondering how I generate QRCode, I use - Kaywa QRCode Generator Diapo slideshow is an open source project. 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> Google Chart API has some limitations for screen size, but I think most of developers won't create 800x600 QR Code. 3. </script> Here you can find an example of this plugin usage. Like this article? 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.
The goal is to get it fixed on top/bottom of the browser when scrolling through the table, as Excel does for example. Source 2. jq-log jQuery logger can log any object with recursion to html element, or console. Source 3. jQuery plugin to easily create sticky side panel menu. Source 4. Is simple plugin which helps you to create beautiful slideshows in few moments. Source 5. Convert WIKI style text to HTML. Source 6. Script for flexible styling of lists (ol, ul). Source 7. jQuery Render Plugin Is Render html by template and JavaScript Object. Source 8. Source 9. Is a jQuery plugin which loads HTML as a user scrolls the webpage.
Source 10. Source AUTHOR: Sam Deering. 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! Javascript API With the powerful API provided by Tipped it's possible to quickly create and control tooltips customized to your site, all it takes is a few lines of Javascript. And more... Check out the demonstrations below or head over to the documentation to discover more awesome features.
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 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 we used the pixel perfect PSD provided by premiumpixels.com underSimple Little Arrows (PSD) Ok, so let’s get started! The Markup The HTML structure will be made up of the booklet plugin markup which includes the div with the id “mybook”. Each page of the booklet will be placed in a div element inside of the element with the class “b-load”. 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. It was started back in the early days of jQuery in 2006, and updated and improved since then. Current version: 1.11.1License: MIT Files: DownloadChangelogDemosDocumentationGitHub RepositoryGitHub 1.11.1 Tag. Playground - MobilyMap. Playground - MobilySlider. Isotope.
GMAP3 - jQuery Plugin For Google Maps | blogfreakz.com.