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.
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.
.append
Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()). The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. Consider the following HTML: You can create content and insert it into several elements at once: Each inner <div> element gets this new content: You can also select an element on the page and insert it into another: If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned): Additional Arguments
jVectorMap
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.
How to return the response from an Ajax call?
jQuery.fracs · larsjung.de
To use the core lib just include jquery.fracs-0.12.0.js. The outline feature can be found in jquery.outline-0.12.0.js and depends on the core lib (you'll need to include both files). Fractions To retrieve the fractions of an element use: var fracs = $(selector).fracs(); this will return an object of type Fractions. Or bind a callback function: function callback(fracs: Fractions, previousFracs: Fractions) { ... // context variable *this* will be the corresponding HTMLElement ...}; $(selector).fracs(callback); The callback function will be called whenever fracs and previousFracs are unequal. $(selector).fracs('check'); Outline Add a canvas to your document (use a fixed position to keep it in viewport)
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. 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 Flexslider Flexislider is the new breed of slider which adapt itself with the width/size of the webpage. Diapo slideshow is an open source project.
Underscore.js
Image Desaturate jQuery plugin
Latest version: 0.7 (changelog) Stable version: 0.6 (changelog) Prev. version: 0.5.2 Example jQuery plugin page Contact: miksir@maker.ru This plugin used for replace image by gray version.
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? 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 The Five Simple Steps website has a responsive design with a neat feature. Menu to a DropdownDemo Responsive Menu Responsive MenuDemo
