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 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. Overlay Effect Menu with jQuery In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery. View demoDownload source In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. So, let’s start! The Markup The HTML structure will consist of a main wrapper div for the menu which will contain the overlay and the unordered list for the menu. <div class="oe_wrapper"><div id="oe_overlay" class="oe_overlay"></div><ul id="oe_menu" class="oe_menu"><li><a href="">Collections</a><div><ul><li class="oe_heading"> Summer 2011 </li><li><a href="#">Milano</a></li> ... The submenu divs will each have an inline style for the left position. Let’s look at the style. The CSS The style for the links inside of the submenu lists: And that’s all the style!

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

Magnet letters tentative with JQuery and CSS3 | Jérôme Sénaillat Who doesn’t love mag­netic let­ters on a fridge? I saw some­thing like that a while ago, and tried to repli­cate the same effects in my own, messy way. It was a good occa­sion to test the . The demo It’s here: It has been tested with Fire­fox, Safari and Chrome on Mac OSX . The CSS I used some extra rules for the lay­out, but the actu­ally involved CSS part is quite short. @font-face { font-family : League­Gothic ; src : url ( ’.. #white­board { back­ground : url ( .. margin-top : 40px ; padding-top : 120px ; height : 365px ; } .mag­net { font-family : ‘League­Gothic’ , arial , serif ; mar­gin : 0 ; margin-left : 10px ; margin-right : 10px ; text-transform : upper­case ; font-size : 80px ; dis­play : block ; text-align : cen­ter ; min-height : 100px ; posi­tion : rel­a­tive ; mar­gin : 0 auto ; /* let­ters col­ors */ .col0 { –moz– text-shadow : 0 1px 0 #165981 ; –webkit– text-shadow : 0 1px 0 #165981 ; –o– text-shadow : 0 1px 0 #165981 ; .col1 { The Javascript

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 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

IxEdit 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

Expanding Image Menu with jQuery In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream. So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. We will give enough width to the ul so that the li elements which will be floating, don’t wrap to the next “line” when they expand: The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. The JavaScript

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: