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
50 Fundamental jQuery Controls, Components and Plugins Every seasoned developer has one and every young and upcoming developer should be thinking of building one – a good and concise collection of UI controls, components and plugins that you can always rely on in times of need. Of course, there are plenty of great UI frameworks, kits and libraries that you could use, but none will offer you every component and none of them will be tailored to your own personal preferences and needs. Up until a few months ago my controls had been collected and sourced from various frameworks (Prototype, MooTools, jQuery…), upon review it seemed a little out-dated, some components unnecessary and some controls desperately needed updated. So, here are my 50 Fundamental jQuery Controls and Rich UI Components… What would you add? Mega Menu » jQuery Listmenu This jQuery plugin allows you to easily convert a long, hard to navigate list into a compact, easily skimmable 'first-letter' based menu system, allowing quick and 'out-of the-way' access to hundreds of items.
38 jQuery And CSS Drop Down Multi Level Menu Solutions Hello again, it’s time for the comprehensive programming article. Here you’ll find 38 mainly CSS and jQuery dropdown menu or just multi level menus with downloadable files and explanations as well. Mostly they are free. My favorite here is the first pick – Outside the box with a very unique navigation menu (free) and Mega Menu, which is premium. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Oh..and little tip – shorten your developing process with already premade menus, which can be easily modified with a little touch of CSS. Table of Contents: Are The Best jQuery Dropdown Menu Solutions Free? But well, also be aware when each code has been created, has it got some updates through time? At least I am doing my designing process like this – What has been your experience? And while you are figuring answers – enjoy this quality article! Wait but before..here is.. 1.
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. 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. LavaLamp for jQuery lovers! Stay-On-Top Menu ( Demo | Download )
jQuery Sequential List Have you ever had to manually code something that is sequential? Didn't you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery's prepend feature. View Demo Sequential List 1a. First, download a copy of jQuery. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#step li").each(function (i) { i = i+1; $(this).addClass("item" i); }); }); </script> The jQuery will output the source code as: 1b. Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..). 2a. You can also use this technique to add sequential content using jQuery's prepend feature. The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag. 2b.
Sliding JavaScript Dropdown Menu This script has been replaced by a new with multi-level support here. This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. You can have as many dropdowns on one page as you like. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Click here for the demo. Click here to download the source. Click here for a vertical flyout version of this menu. By Request: Slideup version demo. Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. The following two tabs change content below.
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"
8 Fresh and Useful jQuery Plugins jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Here are 8 Fresh and Useful jQuery Plugins. Isotope Isotype is a jQuery plugin for creating dynamic and intelligent layouts. jQuewy jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend. Sausage Sausage is a jQuery UI widget for contextual pagination. ImageLens ImageLens is a jQuery plug-in to add lens style zooming effect to an image. jquery.timepickr.js This jQuery plugin is an experimental approach to enhancing web time picking. CodeExplorer This jQuery plugin produces an online code explorer. 960 Grid on jQuery-Mobile 960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. jMenu jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Create a Fancy Search Box using CSS Nowadays, most websites come with a search box to improve surfing experience. To make your website looks good, beside having a nice looking theme, you would need a fancy search box to replace the classic ones. Let’s start 1. In this example, I will use this as my search box. 2. Make sure the background color outside the search box is the same as your design. result: 3. The picture above explained all. 4. Replace the “THE_BLANK_SUBMIT_BUTTON_IMAGE” with the image at step 3. 5. Basically what’s going on :#searchwrapper wrap the whole search box, carrying the whole search box image as its background image..searchbox is the text area to enter search keyword, given a transparent background and no border..searchbox_submit is the submit button, also given a transparent background and no border. NOTE: Both .searchbox and .searchbox_submit have been given an absolute position, you should modify their position, width and height according to your own search box. That’s it. Hope this helps!
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