background preloader

10 jQuery Transition Effects: Moving Elements with Style

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website. 1. Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display. 2. Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. 3. A simple image slider using HTML/CSS/Javascript. 4. jQuery Quicksand Plugin With Quicksand you can reorder and filter items with a nice shuffling animation. 1. 5. jQuery Magic Line Sliding Style Navigation 6. 7. jDiv: A jQuery navigation menu alternative 8. 9. 10. Author: Noura Yehia

AutoSuggest: An AJAX auto-complete text field : CSS . XHTML . Javascript . DOM, Development : Brand Spanking New kk said Jeffrey Ropp said Nicely done. For some reason, my results dont appear within a scroll area? I copied most of your CSS and still can't get it to work. I've also found that my results aren't always qualified by the first character provided. Try an "S" first. Any thoughts would be appreciated! Thanks, Jeff Robert said Very interesting. peter said Hi, is it possible to submit the form after clicking on some of the results? Josh said I tried that, I can't seem to get it to respond right. in order for the dropdown to be clickable you must change the code above from: this.fld.addEventListener('blur',function () { pointer.clearSuggestions() },false); to this.fld.addEventListener('blur',function () { setTimeout(function () { pointer.clearSuggestions() }, 300) },false); I figured out how to make the autosuggest show on when focused and clear when the field loses focus. replace line 24: this.toID = setTimeout(function () { pointer.clearSuggestions() }, this.oP.timeout); with return element; } Enjoy

24 CSS (in some cases with jQuery) Navigation and Menu Tutorials For the most of us, the most difficult aspect of building a responsive layout is the planning and coding of the navigation. As there is no truly tried and tested universal solution, the style of the menu you use will depend on the type of site you are building. If it is a small site, a <select> drop-down menu or a basic “three line” toggle menu will probably be suffice. But if it is a larger site (an e-commerce store for example) that relies upon a mega-menu for navigation on its desktop version, then a drawer-style navigation or an animated side panel menu will most likely help you. So, no matter what type of site you are building, in this post we will hopefully have the solution for you in the form of these free responsive navigation jQuery plugins. Sidr Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu. Sidr →GitHub → Navgoco Navgoco → FlexNav FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu. FlexNav →

40 Useful jQuery Techniques and Plugins - Smashing Magazine Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. TipTip jQuery PluginTipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. Contextual Slideout Tips With jQuery and CSS31A set of contextual slideout tips with jQuery and CSS3, which are ideal for product pages and online tours. jQuery Slider plugin (Safari style) 3jQuery Slider is easy to use and multifunctional jQuery plugin. jQuery MegaMenu Plugin8 Forms Link Slideshows and Galleries Link

jQuery Before/After Plugin About a month ago I was reading the New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Pretty slick no? Download Go to the Before/After download page What’s So Great About this Plugin? Slick effect, no Flash neededIt’s just 7K (4K compressed)Reusable on multiple containersDegradable. How to Use First, your before and after images must be the same size. All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. That’s it! Options Enjoy! Demos Related

Image Menu with Jquery - Design Tips &amp; Techniques - Maui Blo I have always thought that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I've come up with using the power of jquery javascript. Functionality Checklist for our Sliding Image Menu for Jquery. Here is what we need our Jquery horizontal sliding image menu to do: Jquery compatible script. Let's take a look at the XHTML, CSS, and JavaScript that makes it all work. Jquery Image Menu Version 1, View Demo, Download Source. Here is the HTML for just the jquery Image Menu itself: <div class="jimgMenu"><ul><li class="landscapes"><a href="#">Landscapes</a></li><li class="people"><a href="#">People</a></li><li class="nature"><a href="#">Nature</a></li><li class="abstract"><a href="#">Abstract</a></li><li class="urban"><a href="#">Urban</a></li></ul></div> View CSS...

Tipped - The Javascript Tooltip Framework Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. Canvas graphics The entire skin of the tooltip, from shadow to loading icon, is drawn using Canvas. This means that tooltip styles can easily be changed without having to create any images. Canvas based tooltips also have the advantage that they look great in every browser, even in IE6! Javascript API With the powerful API provided by Tipped it's possible to quickly create and control tooltips customized to your site, all it takes is a few lines of Javascript. And more... Check out the demonstrations below or head over to the documentation to discover more awesome features.

20 Excellent JavaScript Navigation Techniques and Examples | Six JavaScript allows you to add interactivity and feedback, making the user’s experience better and more intuitive. Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics). In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples. Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it’s on a separate page. 1. This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented. View Demo Page 2. A technique for animating menu items when a user hovers over them. View Demo Page 3. View Demo Page 4. 5. 6. 7.

30 Exceptional CSS Navigation Techniques We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo 8. View Demo Update: this no longer exists. 9. 10.

Opciones del QuickLaunch de Wss3 mediante SPNavitaionProvider - Un problema muy común en WSS3 es el de conseguir un menú de navegación que muestre las opciones en función del usuario y las unidades de negocio que estén activas en el portal. El menú de navegación de wss3 nos permite navegar a las distintas listas o bibliotecas que creemos. También nos permite dar de alta nuestras propias opciones desde la página de configuración de inicio rápido. El problema que tendremos en un proyecto real, será que las opciones que tengan que aparecer dependerán del usuario logado y los elementos de negocio implementados, y no podrán ser opciones estáticas. Ejemplo del problema en el mundo real En Renacimiento estamos trabajando en un cliente que tiene que desplegar más de 150 portales con una infraestructura Wss3 (no MOSS), cada portal puede tener activo una serie de features que en conjunto implementan las funcionalidades requeridas por el negocio. SPNavigationProvider SPNavigationProvider es una clase que hereda de SiteMapProvider estándar en Asp.Net2. How To

SharePoint navigation - Make current item highlighting work - it One thing that bugs me (and a lot of clients of us) is that SharePoint's top menu (AKA Global navigation) highlighting is not working as we expect it to:If you create a subsite directly underneath the root web, and make it appear on global navigation, It will get highlighted when selected. BUT if you create a subsite somewhere else (say in the Site Directory), and then make it appear on global navigation, it will not get highlighted when you navigate to it. If you create a publishing page it gets highlighted when visited. This is an example of the current and the desired situation. Recently one of our clients asked me to fix this. * If you are not interested in the how to, you can simply download the final product from here. Starting point:While developing SharePoint, the product team has decided to use asp.net's menu control for navigation. Highlighting logic:We need to know when to highlight items. e.Item.Selected = true; private string MakeServerRelative(string url) //remove protocol

How to Make a Smooth Animated Menu with jQuery | Build Internet! Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal – One Smooth Menu Here’s a demo of what we’ll end up with by the end. Introduction – An explanation of easing The menu has such a smooth animation because of a thing called “easing”. “The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Thanks to the magic of the jQuery Easing plugin, we can now use easing outside of Flash and Actionscript environments. Step 1 – Set up the Structure Before starting with any jQuery, we’ve got to build a quick menu structure with XHTML and load in the required project files. Nothing out of the ordinary here. Then copy in this menu structure into the body: Menu items have a class assigned to it that will designate the color of the block. Step 3 – Style with CSS Step 4 – Animate with jQuery

Related: