background preloader

JQuery UI & Widgets

Facebook Twitter

45 jQuery Navigation Plugins and Tutorials. Jan 25 2010 By Paul Andrew As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands. The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design.

Having said all that, an easy-to-use menu should not put the shackles on creativity. In this article we’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable. Horizontal Menu Navigation Plugins and Tutorials Vertical or Sidebar Plugins and Tutorials Sproing!

10 jQuery Plugins for Easier Google Map Installation - Speckyboy. At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way. Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins. The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely. I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post.

If you are taking your first steps within Google Maps, I suggest you start there. gMap – Google Maps Plugin gMap Demos »Download gMap »gMap Documentation » Google Maps jQuery Plugin jQmaps. FancyPlayer – jQuery Fancybox and Flowplayer Integration | jQuer. 30 Best jQuery plugins inspired from Twitter and Facebook | Psde. Published on Sat, Feb-06-2010 by Dainis jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery plugins are an integral part of modern web design. jQuery plugins gives web designers a wide range of activities and opportunities to develop a wide range of variation effects to your websites. The plugins below will allow you to insert in to your website very interesting effects of Social media giants: Twitter and Facebook.

If you want to create Facebook like Twitter fan page or Facebook post on Wall effect, these plugins are for you. You May Be Interested In The Following Posts jQuery Plugins For Twitter jQuery plugin for Twitter A simple, unobtrusive and customisable client-side method for easily embedding a Twitter feed into a web page. jQuery Twitter API plugin Plugin provides you with an easy Twitter API to access Twitter user information by twitter username. Tweetquote Juitter. jQuery Quicksand plugin. Quicksand Reorder and filter items with a nice shuffling animation.

Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle. Making a Photoshoot Effect With jQuery & CSS – Tutorialzine. Martin Angelov Often, in your design or development tasks, you are presented with challenges that require a different approach than just plunging head over heels in coding.

Research and experiments are a vital part of this process. This is why this week’s tutorial is structured in a slightly different manner than usual. First we are presented with the main problems faced and their solutions, and after this we get round to building upon it. We are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.

Before starting with the tutorial, I would suggest you download the zip archive from the buttons above. Problem 1 – Blurring the image JavaScript does not support blurring an image directly. There is however a newer alternative to this technique, which I hope to implement in a future version of the plugin. Problem 2 – Hiding the cursor Step 1 – XHTML demo.html. Programming Tips & Tricks: "Vertical Tabs" for jQuery lovers! Hello folks, Well, I was just wondering how to start this post and how to write words worth a thousand pictures. However, I believe giving a jQuery plugin a live try, worthes a thousands words. So, hover below and give Vertical Tabs a try. If it suits your needs, read on. Welcome Home! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt metus, vitae porta elit mollis eget. Sed bibendum velit et magna placerat bibendum.

Online Support Maecenas in varius nulla. Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam scelerisque purus nulla ac enim. There are 3 steps to (almost) every jQuery plugin: the HTML, the CSS and the JavaScript code. Step 1. There’s nothing special about this HTML. Step 2. Well, the style sheet is simple. There’s still one more thing to mention. Step 3. And here comes the fun part: Please note that the tab icons are copyrighted material and they are provided for demonstration purposes only. Skyrocket Labs | Web site design, development, blogging, social. A jQuery Plugin for Zoomable, Interactive Maps. What is it and why was it built? A couple of months ago we launched a site about Marine Science in North Carolina with one of our design partners, Liaison Design Group. A key part of the project was an interactive map that allowed visitors to find important Marine Science resources in North Carolina.

Each location on the map would be represented by a bullet. Clicking the bullet would bring up more information on the location. Since the locations of the bullets tended to be highly clustered, zooming into select subregions was possible. We wanted the experience to be engaging as possible but also easily updatable in the future. We settled on jQuery as the interface technology to use as it made it simple to build, display and animate the map. Demos This project is being used in production on a number of sites. Documentation Limitations This was originally developed for one project with very specific requirements. Instructions 1. There are very limited requirements on the background images: 2. 3.

“Who Is Online” Widget With PHP, MySQL & jQuery – Tutorialzine. Martin Angelov For this week’s tutorial, we are taking a look at our ever-so-interesting inbox. It all started with a letter from one of our readers a couple of weeks ago: My boss is always coming into my office asking me to install things on our client’s sites. One of the items that’s been coming up more and more is “How can we tell who’s currently online?” So, the next time you need a tutorial idea, there you go – a php/mysql/jquery ‘online users’ widget. Taylor, we are always happy when we receive good tutorial ideas, so today we are doing just that – a “Who is online” widget with PHP, MySQL & jQuery. Step 1 – XHTML As usual, we start off with the XHTML part. Demo.html As you may see from the markup above, the main container div – “onlineWidget” contains the slide-out panel (the div with class name “panel“), the total number of people online (the “count” div), the “online” label and the green arrow to the right.

Geolocation-enabled Who Is Online Widget Step 2 – The Database Step 3 – CSS. ColorRating: Ajax and PHP 5-Star Rating Script. A Zoomable jQuery Image Gallery Called jPhotoGrid. View the Demo | Download the Zip The screenshot above is jPhotoGrid in action. This plugin takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. You can check out a demo here. Overview Nearly all of the styling for this plugin is done in css. The Markup The html for this plugin is simply an unordered list of images and captions. <ul><li><img src="/hifi/site/edit/blog/source.jpg" alt="" /><p>Caption Here</p></li> ... The CSS The CSS is also fairly straight-forward. The Javascript The javascript is easy enough to set up. Conclusion While not nearly as extensible or flexible as most of the plugins I like to put together, I enjoyed this one.

View the Demo | Dowload the Zip. Grid Accordion with jQuery. Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. Basic accordion from jQuery UI One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table.

But it was too much information to view all at once. Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn't very wide, maybe 150px. The Grid Accordion works with the same theory as most other accordions. You can view and download the example at the end of this article. HTML: Classic use of the definition list CSS: trying to stay accessible Share On. Nivo Slider - The Most Awesome jQuery Image Slider.

Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive.

Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes. Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Create carousels Join 471,039 happy customers and get access to 30+ premium products. jQuery Plugin: Give Your Characters a NobleCount « The Product G.

NobleCount… for a more ‘proper’ count of the characters remaining. A very common requirement with many of the more social products of the various companies I work with is the dynamic display of the number of characters remaining in a textarea, Twitter-style. When implemented, every one of these companies either developed a simple solution in-house or found a re-usable front-end plugin online. Most common, implemented within these products, and of all I could find open-sourced online, were sources lacking customization and/or, almost universally, lacking the desired user experience – updating the character count AFTER all or most of the user’s typing had ceased.

As a result, and also in my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to … While there are other similar tools out there, none adequately met my goals. Usage Example: precedence rules…. Settings $.fn.NobleCount.settings = {

Ntactable | jQuery Plugin. Demo | jQuery.popeye 2.0 | an inline lightbox alternative. X Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Except for IE6, though, which I didn't bother to include. Feel free to come up with your own solution ;-) Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover.

By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The navigation stays fixed to the right of the image. There is no enlarge button, but a click on the image enlaregs and shrinks it nevertheless. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

View HTML code used in this example. Create Micro Image Galleries Easily With jQuery. The usage of images in web pages is sometimes difficult as, in order to keep the story going, we may need to keep the content/image ratio at a specific level. However, more images are always good to define and support the content better. Micro Image Gallery is a jQuery plugin which can help solving this issue by displaying multiple images in limited spaces easily. It simply transforms a list of images into a micro gallery that supports switching between a grid view (preview of images) and a single view. The navigation bar is also customizable; it can be hidden and sliding out when hovering over the gallery, or visible. In the grid-view, it can display up to 9 images at once (supports paging for more) and will re-size the images automatically according to the selected gallery size.

jQuery Plugin: jQuery-Notes 1.0.5.