background preloader

Superfish - Suckerfish on 'roids

Superfish - Suckerfish on 'roids
Related:  jQuery Slider Demo Tuts

jQuery Realtime Chat with Node.js By Nick Anastasov | In this tutorial, we are going to build a realtime chat system with Node.js, Express and the socket.io library. Visitors will be able to create private rooms in which they can chat with a friend. Read more My New Favorite Technique ForHiding Overflowing Text By Martin Angelov | In this short tutorial, I will show you my new favorite technique which fades overflowing text gracefully into the background – a perfect addition to your new design. JavaScript image combobox v2.36 | Marghoob Suleman Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object. Preview: Feature at glance: Fully Skin-able Your original dropdown is safe, so your form post will not be messed.Can be created via JSON object. Image DropDown v3.3 Features Each dropdown can have own properties. Dependency: Jquery 1.2.6 or later. This jQuery plugin works perfectly without any modification. 1. 1.1 Have a look at original dropdown. <select name="webmenu" id="webmenu" onchange="showValue(this.value)"><option value="calendar">Calendar</option><option value="shopping_cart">Shopping Cart</option><option value="cd">CD</option><option value="email" selected="selected">Email</option><option value="faq">FAQ</option><option value="games">Games</option></select> Yes, This is a normal dropdown but I've added image path in "data-image" attribute. 2. You are done. Supported Browsers You want it?

UI/API/1.8/Accordion Description: Convert a pair of headers and content panels into an accordion. The markup of your accordion container needs pairs of headers and content panels: Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. The panels can be activated programmatically by setting the active option. Keyboard interaction When focus is on a header, the following key commands are available: UP/LEFT - Move focus to the previous header. When focus is in a panel: CTRL+UP: Move focus to associated header. Theming The accordion widget uses the jQuery UI CSS framework to style its look and feel. ui-accordion: The outer container of the accordion. Dependencies activeType: Boolean or Integer Default: 0 Which panel is currently open. Multiple types supported:Boolean: Setting active to false will collapse all panels. Initialize the accordion with the active option specified: Get or set the active option, after initialization: Default: {} Default: false

Pagination Pajinate – A jQuery Pagination Plugin Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, the time between paginated-page loads is almost nil (up to a reasonable page-size of course). Pajinate - A pagination plugin the whole family can enjoy! Usage & Configuration All plugin documentation can now be found on github. Demo Multiple implementation demos can be found in this page. Source Code The Pajinate source and examples are available here. Github If you’re keen to contribute to this project, or perhaps take it in a different direction you can get ahold of the source here: The demo and source offer several examples demonstrating various ways in which to configure and use Pajinate (including embedding multiple Pajinate elements in a single page). Like this: Like Loading...

jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom

Classement ajax Reorder and filter items with a nice shuffling animation. Home About I love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects, like the one in this video. Quicksand aims at providing a similar experience for users on the web. Documentation At the very basic level, Quicksand replaces one collection of items with another. Use plain HTML, like an unordered list. $('#source').quicksand( $('#destination li') ); This will work for the following HTML: <ul id="source"><li data-id="iphone">iOS</li><li data-id="android">Android</li><li data-id="winmo">Windows Phone 7</li></ul><ul id="destination" class="hidden"><li data-id="macosx">Mac OS X</li><li data-id="macos9">Mac OS 9</li><li data-id="iphone">iOS</li></ul> Please note that data-* is a perfectly valid HTML5 attribute. First container (source) is visible to the user. If you want to include a callback function, add it as a last argument: Or List of available params: Examples

How To Create a Cool Animated Menu with jQuery In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design. The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users. View the animated menu demo Create a new document and fill the background with a light beige. Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Draw and fill a rectangle to create the base of the label graphic. Use the Polygonal Lasso tool to draw a small triangle. All the menu needs now is a series of text links. <! jQuery

tooltip - tipsy Overview Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute. Examples & Usage Basic By default, tooltips will appear centred underneath their anchor: Hover over me Basic example: Gravities Using the gravity parameter, it's possible to control the positioning of the tooltip relative to the pointee: Gravity example: As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Here's an example (scroll the page to see the effect): Dynamic Gravity Dynamic gravity example: Fading For full Wob2.0 compliance, you must fade these badboys in: Fade example: Bonus Feature You can EVEN COMBINE FADE AND GRAVITY! Slightly Advanced Usage Tooltip text can be set based on any attribute, not just title: Custom attribute example: If any attribute isn't good enough, you may pass a callback function instead. Callback example: Fallback example: HTML example: Show/Hide Delay Delay example: Hover and wait Support for Live Events

Awesome Bubble Navigation with jQuery In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. View demoDownload source In this tutorial we are going to create a bubbly navigation with jQuery. Ok, so let’s get started. The Markup The HTML will consist of a main div that we will give the class navigation and the id nav. As an example, we just show the first two items here. Further elements inside of the item element are the image for the bubble, the icon as link element, the heading and the list of links. The CSS Let’s take a look at the styling. Now, we will use absolute positioning for the item: Since we gave the div two classes, we will now define the respective positions for each navigation item. The link elements of the icons will have the following general style: And we can again define each icon of the respective element:

MasterPress Review Today I’m reviewing the MasterPress plugin from Traversal. MasterPress boosts your productivity by bringing point-and-click simplicity to the more advanced features of WordPress, while introducing amazing new ways to manage your content and develop custom themes for your web sites and apps. This is a very young plugin which has only been around for a few months now. Features & Usage Masterplan is the term MasterPress uses to describe your complete content management setup. There is a striking similarity between what MasterPress does and Toolset. The Custom Post Type creator is the easiest I’ve ever encountered, you’ve got all the power of custom post types at your fingertips, sans any code. Creating a new post type There are all the field types you’d expect from a plugin that focuses on custom post type and field creation. Of course there are also the relation fields which are another unique feature. Positioning my new custom post type within the admin menu. The Column Builder Pricing

Start/Stop Slider A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove "panels" and a stop/start button. I'm happy to say I was able to accommodate a bit with this new slider. It's not a plugin, so it's not as easy as it possibly could be, but it's much easier. There is a section at the end for customizing. The HTML Markup The markup is extremely light. Notice there is no markup for a stop button. <div id="slider"><div id="mover"><div id="slide-1" class="slide"><h1>Garden Rack</h1><p>Donec gravida posuere arcu. The CSS Not much to talk about here, much of this is merely presentational choices. The jQuery JavaScript 90% of what we are doing here is specific to jQuery. At the top of our startstop-slider.js file, is a single self-explanitory variable var delayLength = 4000; Then we'll begin our manipulation, after the DOM is ready of course. The "Auto Play" How To Customize

Behind The Scenes In The WordPress Plugin Directory With Mika Epstein The WordPress Plugin Directory currently lists more than 29,000 plugins. It’s the first stop for any WordPress user looking to extend the capabilities of the software. With over 585 million downloads and a massive worldwide user base, it takes a dedicated team to monitor the quality and security of so many extensions. I had the opportunity to interview Mika Epstein, better known around the web as “Ipstenu“, about her work behind the scenes with the plugin directory. How does someone get involved with reviewing plugins for WordPress? Otto reached out to me to join the plugin review team after I started, on my own, scanning the repo using Mark Jaquith’s slurper – for people who were doing some silly, but easy to mistake, things like jquery. The Plugin Review Process Once a plugin developer submits his work to the directory, he or she generally has to wait a little while for it to be approved. This translates into a daily routine for her. The Most Common Issues With Plugins Ouch. Related

40+ jQuery Plugins Improving Your Website Look and Feel Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. I believe jQuery is the answer today just as Flash was 5 years ago. With simple steps and limited programmer skills jQuery will allow you to add goodies to your website you wouldn’t even allow yourself to dream about! Advertisement PrettyPhoto Media This plugin can display videos, photos and other media utilizing stunning photos in a fancy overlay. qTip qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Tab SlideOut

Related: