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!
Better Check Boxes with jQuery and CSS Martin Angelov In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable. The first step is to lay down the structure of the underlying HTML document. We will need a form with checkboxes which we will later be replacing with their enhanced jQuery versions. index.html <! The main container element – the #page div, holds our form. Notice the HTML5 data attributes, specified on some of the labels. And here is the markup of our replacement checkboxes: <span class="tzCheckBox checked"><span class="tzCBContent">ON</span><span class="tzCBPart"></span></span> When our plugin is called, it will loop through the checkboxes, and insert the HTML code you can see above after each one, while at the same time hiding the original. Checkbox Replacements Explained Now lets move on to the styling. jQuery Conclusion
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
Moving Boxes Content with jQuery Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects […] View demoDownload source Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item. The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. The beautiful photos are by Jin. So, let’s start! The Markup First, we want to place the background image with the grid overlay: The next div element will be used to add the little boxes with their random position and rotation degree
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? 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 CoffeeScript 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. 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. The technique I’ve used and incorporated into the plug-in is actually quite simple – it just stacks up a bunch of divs, each holding the image as a background and whose opacity is lowered, one on top of the other. Problem 2 – Hiding the cursor Problem 3 – No support for masks
Create a Slick and Accessible Slideshow Using jQuery By Jacob Gube In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action. Final Result Clicking on the image below will take out to a live demonstration of the slideshow widget in action. Download source files You can download the source files for this tutorial to study. slick_accessible_slideshow.zip (ZIP, 2.8 MB) Setting the foundations The most important part of any good web component is a solid HTML structure. Our content’s structure involves a div called #slideshow that serves as the container for our slideshow. Block 1: HTML markup In example 1 below, you’ll see how text-based browsers, and browsers incapable of rendering CSS and JavaScript, will see our slideshow. There is also no markup for the left and right arrow controls, which we will insert into the DOM later on using JavaScript. The theory
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. 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. That’s all for now, folks!
Effet de transition de couleur sur les liens avec jQuery L'idée est similaire à celle que j'ai déjà utilisée pour d'autres scripts. J'ai écrit une fonction qui sélectionne les liens (balises <a>), place leur contenu dans un <span> avec le nom de classe ".one" et ajoute un élément <span> avec le nom de classe ".two". <span> ".two" contient le même texte que <a> et est placé juste au-dessus à droite du texte du lien. Au départ, le deuxième <span> est caché. Lorsque le lien est survolé, le <span> ".two" transite en utilisant l'effet fadeTo de jQuery, pendant que <span> ".one" disparaît. Cela crée un effet de fondu en douceur vers une autre couleur. Bien sûr, IE est à l'origine de problèmes et nous avons eu à appliquer une solution de contournement. II-1. Téléchargez le fichier zip contenant mon script et la bibliothèque jQuery et placez-les sur votre site. II-2. Ajoutez ces lignes à votre fichier CSS. II-3. Assurez-vous que les sélecteurs CSS sont correctement écrits de sorte que vous pouvez appliquer ce script sur des éléments précis.
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. We wanted the experience to be engaging as possible but also easily updatable in the future. 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. Data Required In Plugin Setup - Ideally all of the required data would be stored in the html pages that drive the bullets. Even with these limitations, this is ready for production and is being used on several sites as seen above in the demos. Instructions 1. There are very limited requirements on the background images: They must all be the same size. 2. 3. Questions/Comments?
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
“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?” 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 The panel div is dynamically filled by AJAX with the countries with the most visitors currently online. Step 2 – The Database Step 3 – CSS
IxEdit