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 Here is an Ajax Autocomplete sample for the text field with id "query"
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 socket.io 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. 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 for Designers - Tutorials and screencasts 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
jQuery Spritely | Spritely 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- Auto Refresh Div Every X Seconds I’ve recently been working on a e-commerce site (online store) for a client. One of the features required was to show the most recently viewed items on the homepage. For that to work, I need to write a script to query a DB every 10secs or so. Youtube actually has something similar, where on the homepage they display “videos that are being viewed now”. Obviously it’s an AJAX affect; as always, I’ll be using the JQuery library (my personal favourite). Here’s the OUTDATED code (find updated code below this example)… As you can see, the JS code in the header is calling a file called response.php. It’s as easy as that. If anyone uses the code, let me know how you get on UPDATE- Load content immediately on page load & I.E Fix I’ve had a LOADS of people emailing us asking how to get the content in the data.php file to load immediately on pageload, and then start the refreshing process. Click here for an example (page should start reloading after 5 secs or so- you’ll notice the number changing).
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: