Ajax Autocomplete for jQuery About jQuery Autocomplete allows you to easily create autocomplete and autosuggest boxes for text input fields. Built with focus on performance - results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root. What's new $('#query').autocomplete(options) now returns an Autocomplete instance only for the first matched element. Autocomplete functionality can be disabled or enabled programmatically. var ac = $('#query').autocomplete(options); ac.disable(); ac.enable(); Options can be changed programmatically at any time, only options that are passed get set: If you need to pass additional parameters, you can set them via setOptions too: New parameters when initializing autocomplete. var reEscape = new RegExp('(\\' + ['/', '.', '*', '+', '?' Installation Include jQuery in your header. How to use Create an instance of the Autocomplete object. Notes:
jQuery for Designers - Tutorials and screencasts All About jQuery: Plugins, Tutorials and Resources Oct 15 2010 In this post, we are presenting a bunch of exciting and awesome jQuery plugins for your use. As we all know very well that jQuery is the most famous Javascript framework available out there which comes with many amazing features and is quite easy to be used. You can use these plugins to add beautiful effects and functionality in your next project. These plugins will also help you in completing your task easily. jQuery Menu and Navigation Collapsing Site Navigation with jQuery ( Demo | Download ) Creating a collapsing menu that contains vertical navigation bars and a slide out content area. Beautiful Background Image Navigation with jQuery ( Demo | Download ) A beautiful navigation that has a background image slide effect. Slot Machine Tabs ( Demo | Download ) Three columns in each content box rotate like a slot machine to reveal the content in the next content box when a new tab is clicked. Stylish Navigation Men ( Demo | Download ) A stylish CSS + XHTML navigation menu.
jQuery Spritely | Spritely CSS3 @font-face Design Guide Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mistake One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts. Web Safe Fallback Fonts When using custom fonts, it is important to include the web safe fonts as fallback. Layout Issues Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. This might causes layout issues as shown in the image below where the fallback font extends off the boundary. Modernizr Fallback Font Styles With Modernizr (demo) Including Modernizr
28 Fresh jQuery Tutorials - Web Design Blog – DesignM.ag Get the FlatPix UI Kit for only $7 - Learn More or Buy Now In this post we have collected 28 fresh and useful jQuery tutorials. If you like jQuery tutorials you might also want to check out some of our previous posts below. Enjoy! 20 Useful jQuery Slider Tutorials 25 jQuery Tutorials for Improved Navigation Menus Easy Display Switch with CSS and jQuery Create an Image Rotator with Description (CSS/jQuery) Update: We also have a few more recent jQuery tutorials you might want to check out.How to Build an Image Slideshow UI Switcher with jQueryHow to Build an iOS Style Content Slider Using jQuery How to Create a jQuery Confirm Dialog Replacement How to Make Auto-Advancing Slideshow Fullscreen Gallery with Thumbnail Flip Making Google’s Christmas Doodle with jQuery Thumbnails Preview Slider with jQuery Sweet Thumbnails Preview Gallery Animated Form Switching with jQuery Parallax Slider with jQuery Portfolio Zoom Slider with jQuery Bubbleriffic Image Gallery with jQuery Overlay Effect Menu with jQuery
jQuery page scrolling Over a year ago I wrote an article on scrolling a page using Prototype, just to update things here I’m going to run through scrolling a page using jQuery and the animate() function. Automated page scrolling is useful in many cases. A good example of this technique can be found in the personal project i worked on a few months back ‘We Deliver’ which you can find here. The Code It’s extremely easy to get started using jQuery scroll. The next line is saying scroll to the element defined (in this case the element .bottom) we’re not defining an offset so it takes the top of the element. The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area.
jQuery API Description: Creates DOM elements on the fly from the provided string of raw HTML. Creating New Elements If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it starts with <tag ... >). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML. Then a jQuery object is created and returned that refers to these elements. For explicit parsing of a string to HTML, use the $.parseHTML() method. By default, elements are created with an ownerDocument matching the document into which the jQuery library was loaded. If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's innerHTML mechanism. Filtering isn't, however, limited to these tags. Tags that cannot contain elements may be quick-closed or not:
Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. The main idea is to […] View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS @import url('reset.css'); The JavaScript
Live Table Edit with Jquery and Ajax I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it! Download Script Live Demo Database Sample database fullnames table columns id, firstname and lastname. CREATE TABLE fullnames (id INT PRIMARY KEY AUTO_INCREMENT,firstname VARCHAR(70), lastname VARCHAR(70) ); TableEdit.php Displaying records from fullnames table. //Table Records<table><? <td class="edit_td"><span id="last_<? Javascript Code Contains javascipt code. $(".edit_tr").click(function(){}- edit_tr is the CLASS name of TR tag. if(first.length>0&& last.length>0) { // Edit input box click action $(".editbox").mouseup(function() {return false }); // Outside click action $(document).mouseup(function() { $(".editbox").hide(); $(".text").show(); }); });</script>