vTip

Download Plugin »
View Demo »
vTip is designed to quickly provide lightweight (706b js, 272b CSS, 270b image) tooltips, using jQuery any element with a class of “vtip” will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

QuickFlip 2

Download Plugin »
View Demo »
QuickFlip 2 is a major reworking of the original Quick Flip plugin, it is a plugin that flips any piece of HTML markup over like a card. The new version is faster and easier to use – simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

Juitter

Download Plugin »
View Demo »
Juitter is a lightweight, fast & customizable jQuery Plugin that allows you to place a live feed of Twitter on your website. You can use Juitter to display tweets from a specific user or specific words, you can restrict results by language, and it even supports multiple users and keywords.

jPlayer

Download Plugin »
View Demo »
jPlayer is a jQuery plugin that plays and control audio files in your webpage, you can also create and style an audio player using just HTML and CSS and it streams faster using HTML5 and alternative ogg format support.

MopBox

Download Plugin »
View Demo »
MopBox is draggable lightbox that supports divs (HTML and CSS), images , flash, video, etc. A slider is shown automatically if it has more than one child, a slider navigation is shown and it will automatically resize.

MopSlider

Download Plugin »
View Demo »
The very cool looking MopSlider plugin is feature content slider that supports images, flash, html…almost anything.

jLayout

Download Plugin »
View Demo »
The jLayout jQuery plugin provides three layout algorithms for laying out HTML elements in web pages. The first is border, which lays out components in five different regions. The second algorithm is grid, which lays out components in a user defined grid. The third algorithm is flexGrid, which lays out components in a grid with flexible column and row sizes. The plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.

PassRoids

Download Plugin »
View Demo »
The PassRoids (love the name) jQuery plugin was designed to allow simple integration of password strength measurement and verification and display it in a simple method to the end user. Installation requires minimal js and css code and can be setup in a matter of minutes.

AD Gallery

Download Plugin »
View Demo »
AD gallery is similiar in functionality to Thickbox and Lightbox, but much better. It is a smooth and feature rich image gallery plugin, its two main features are the various transition effects and the auto scaling of images.

ColorBox

Download Plugin »
View Demo »
ColorBox is a light-weight (9kb), easily customizable lightbox plugin for jQuery 1.3. It supports photos, photo groups, slideshow, ajax, inline, and iframed content.

jSlickmenu

Download Plugin »
View Demo »
Its these amazing effects like these that will end up making Flash obsolete, all developed with jQuery and HTML5. The only downside to this plugin is that it can only only work on Safari, Google Chrome and Firefox 3.5 (only), as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. I suppose this plugin is glimpse into the near future of web development.

Interactive, Filterable Portfolio

Download Plugin »
View Demo »

Visualize

Download Plugin »
View Demo »
Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. With the development of the Visualize plugin you can now have a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Fresh jQuery Tutorials

Creating a Keyboard with CSS and jQuery

View Tutorial »
View Demo »
In this tutorial you will create an amazing online keyboard with CSS, and then make it work with jQuery. The keyboard includes “action” keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked.

Create Featured Content Slider

View Tutorial »
View Demo »
Here you will learn how to create an intuitive auto-playing content slider.

Auto Load and Refresh Div every 10 Seconds

View Tutorial »
With five simple lines of code, in this small tutorial, you will learn how to auto load and refresh a div every 10 seconds. This is similiar to the way that Facebook shows the most recent posts. This would be useful if you show your Twitter timeline on your blog.

Making a Content Slider

View Tutorial »
View Demo »
In this tutorial you’re going to be using the jQuery UI slider widget to create an attractive and functional content slider.

Better Password Inputs, iPhone Style

View Tutorial »
View Demo »

Create a stream of messages Monitter-like with PHP and jQuery

View Tutorial »
View Deno »
This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter.

Create fancy share box with CSS and jQuery

View Tutorial »
View Demo »
This tutorial will show you how to turn an unordered list (UL) into an fancy social bookmarking widget. You will learn how to style the box, how to add interactivity, and how to create a jQuery plugin that will turn any UL into a social bookmarking sharing box.

jQuery Infinite Carousel

View Tutorial »
View Demo »
This tutorial will walk through the fundamentals of the effect and how to recreate the scrolling carousel that works in the same way as the carousel that is on the Apple Mac ads page.

Create a Content Rich Tooltip with JSON and jQuery

View Tutorial »
View Demo »
This tutorial will show you how to build a cool and smooth tooltip that is powered by jQuery, with information pulled from a JSON array.

Making an Expanding Code Box

View Tutorial »
View Demo »
On blogs that like to share snippets of code, it is common to use the <pre> tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. While this is desirable behavior, it can be undesirable to have those un-wrapped lines break out of their containers awkwardly and overlap other content. This tutorial will show you how to create the solution.

Create a Slick and Accessible Slideshow

View Tutorial »
View Demo »
In this in-depth tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

Create a simple file or image management system with jQuery

View Tutorial »
View Demo »

Related posts

• No related posts.

No matter how attractive a site’s design, if it isn’t practical, it’s not doing its job. Design for the screen involves a new set of requirements to deal with and pitfalls to avoid.

Keep graphics files small. Cyberspace has the unique distinction of being the first medium where you can actually bore your readers by being too exciting.

Design for the World Wide Web is a balancing act between the graphic “wow” and the real-time “now.” The more graphically intense a site, the longer it can take to download. The longer it takes, the higher the probability that the visitor will leave before it’s done.

On intranets, smaller file sizes can help make the system run faster with less overhead. Performance means productivity.

While modems are getting faster, most people on the Web are still connected at 28.8–and even then the Web doesn’t always run at top speed.

With a 28.8k connection, your computer can receive, on average, 2K per second.

No one wants to wait even 30 seconds just to see your site logo–if your graphics are too large people will turn them off or jump to another site. If possible, keep all graphics under 20K. Essential graphics for navigation should be less than 10K. You can do this using reduced color palettes, such as a carefully selected 4-bit palette instead of the full 8-bit palette. In some cases this can reduce graphics in half.

For the most efficient files, you must use the right file type. Here’s the simple rule for deciding which format to choose:

• If your graphics have many colors, save them as JPG files.
• If your graphics have few colors, choose GIF.
• When using GIF, try optimized palettes that contain only the colors used—they can cut file sizes in half.

Use only the resolution you need. Computer screen displays have an average resolution of 96 dpi (dots per inch) for Windows, 72 dpi for the Mac. This means your graphics should be saved at a resolution not greater than 96 dpi—otherwise you’re just wasting your readers’ time.

Here are some Web-centric graphic programs that can help reduce your graphics:

Programs to use by themselves:

CorelXara – This exceptional Windows-based illustration program comes complete with everything you need to create the smoothest, yet most efficient, Web graphics and animations. The program is lightning fast, extremely powerful, yet features a clean, simple interface that makes it great for new users, and design power and flexibility that’s great for professionals. Graphic previews of all exports help you create the best-looking, fastest-loading Web graphics. Under $100, Windows only.Macromedia FireWorks -  A professional-strength illustration program designed specifically for web graphics. Special effects let you enhance text and graphics. Previews help you create the most efficient graphics.

Programs to use in conjunction
with other graphics programs:

Adobe ImageStyler and ImageReady – These programs are for professionals who already use graphics programs such as Illustrator or Photoshop. Their Web-specific features include animation and export previews. The interface will be familiar to Adobe users but may be overwhelming to newer users. Windows and Mac.Debabblizer – This comprehensive graphics tool helps you optimize Web graphics, reduce palettes and therefore file sizes, and perform batch conversions to and from countless graphics file formats. Windows and Mac.Ulead SmartSaver – Find the best balance between image quality and size using this utility. Windows only.Autofx Webvise totality – This Photoshop-compatible plug-in lets you preview Web exports so you can create the most efficient files for the Web. Windows and Mac.

Keep text files small. Text files rarely need to be longer than 10K. Instead, they should be broken into logical chunks and linked. If a home page doesn’t load quickly, visitors can lose interest and jump else

where.

Design for easy reading. Don’t trade readability for style. Make your backgrounds as light as possible (white or pastels—just make sure they use “Web-safe” nondithered colors). If you use a background image, keep the action on the side, out of the way of the text, or make it very light, low contrast, and nondithered. Use black backgrounds only on pages with large text, such as headings, then switch to dark text on a light background for pages with “normal” size text.

Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths (between 30 and 70 characters per line), it makes sense to put navigation on the left (or right) side of the screen. This layout is becoming increasingly popular because it’s practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity. Use fixed-width tables to assure that lines don’t get too long—no matter the viewer’s resolution or window-size.

Design for 256 colors (8-bit) and 640×480 resolution. That’s the lowest common-denominator for people with older computers. Many people viewing the Web can only see 256 colors at a time on their computer screen, so creating 24-bit photo-realistic files is usually overkill. Create and view your Web site at 640×480 because that’s the screen resolution many of your readers will use.

That said, this is changing. As more people get newer computers, they can see more colors (thousands to millions) and higher resolution. Current statistics say that only about 11% of site visitors have only 640×480 resolution, and only 8% have only 256 colors. That number is also decreasing by about 1% every three months.

That said, it’s still a good idea to design your entire page for 800×600, but keep the text portion of your site within 640×480. That way you get the best of both worlds. People with older computers will still be able to read your content, even if some parts of the page require scrolling.

Also, as LCD display prices drop, more people will buy them. Many LCD displays can “pivot” to show the screen in portrait mode (more like a normal piece of paper). In that mode, the displays show 768 wide by 1024 tall, so designing for 800 wide is too wide. So still don’t design for 800 wide, design for around 740 wide.

Use “ALT” tags on graphics. ALT text appears before the graphic does, or in place of the graphic for users who have turned graphics off for speed. If you don’t use ALT text, then users may just see a bunch of boxes with no explanation of what they are. This is extremely important, and easy to add. NetObjects Fusion automatically adds the filename of the graphic, but you should still take a moment to make sure the ALT text is truly descriptive. If you’re using a graphic in place of a paragraph or more of text, type the same text into the ALT box—even long blocks of text will appear in the browser so people can read it before the graphic downloads.

Include contact information on every page! Web readers often want or need to contact the people who created and run the Web sites—often to ask you more information about your products or services. It’s important to include your company name, address, e-mail address, and your phone and fax numbers on every page. If you don’t want people calling, include your e-mail and mailing address at the very least.

Why? Because people often save pages to disk, or print them. If you don’t include this information, chances are good they won’t be able to contact you, or find your site again to get that contact information.

Every page should have the site’s main URL included, usually at the end of the page. This helps users return to the page (if they’ve saved it to disk and want to go back to your site later) and it ensures that when the page is printed, readers still know where the page is from.

With a program such as NetObjects Fusion, it’s easy to include this information on every page; simply put it in a single MasterBorder.

Keep your site fresh. Unlike printed matter, a Web site is not a one-time project–it’s an on-going one. Be prepared to update your site, at least once a month, adding new information, discarding anything out-of-date.

Repeat visitors are always desired, so give them something to come back for. Try to include a “hook”: a service or current information tied to your expertise that will bring users back to your site regularly. On my site, we offer EsperFonto, the Web’s only interactive typeface selection system, something people come back to use often.

Your Server may send you statistics showing you which pages were accessed most often–and this will help you focus your site on what your visitors like the best (or tell you if visitors can’t follow your navigation).

Be generous. The Web is no place for skimpy “capsule” information. The more detail you provide, the more of a service you offer, and the more reason you give people to visit your site.

Be backward compatible. Using cutting edge technology can exclude readers. Many if not most users will be at least one generation behind, so don’t shut them out.

Test your site as visitors will see it. Connect to it at 14.4 and 28.8 to see how fast it really is—too many sites are shown-off in-house, directly from the hard disk. This hides performance errors and gives viewers an unrealistic experience.

At 14.4 site visitors will receive as much as 1K per second (that’s a best-case scenario). At 28.8 it can be as much as 2K per second.

See it as your visitors will—and this means viewing your site at several resolutions (640×480, 800×600, 1024×768) and color depths (256, 16-bit, 24-bit), on several browsers (Netscape 2 and later, Microsoft Internet Explorer 2 and later) and OS’s (Windows, Mac). While no site looks identical on all monitors, browsers, and computers, you can design sites that look good on all—but only if you test the site on all. For more testing tips, see Testing, 1, 2,3

Related posts

• The Big CSS3 Validation Debate (2)
• 960 Gridder: Easy to use layout design tool (0)
• 6 New Web Technologies of 2009 You Need to Use Now (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• My Own Developer Launching! (3)

Ajax programming techniques have recently generated lots of buzz for good reason: they can be used to create interesting browser-based applications that do things many thought impossible with typical web browsers (in particular, a certain Ajax technique can send and receive data to and from a server without requiring the browser to refresh or reload).

Following are my picks for the 10 best Ajax applications. Selection criteria: (1) an appropriate combination of simplicity and rich functionality, (2) somehow compelling (hard to define, but I know it when I see it), (3) the more interactive, the better, and (4) free. Also, in this exercise, I’m focused on startups, so I’m not including anything from Google (maps, Suggest), Microsoft (Kahuna), or Yahoo (Flickr).

1. Kiko. A general purpose online calendar. Elegant interface and design. API coming soon.

2. Backbase’s RSS Reader. Only a demo, so you can’t add your own feeds. Still, very nice.

3. Backpack. To do list organizer and simple project management application. Includes email and mobile reminders.

4. Writely. Online word processor. A bit rough around the edges (you can’t save in MSF T Word format, for example) but still feels like a real application. Update: per Sam Schillace @ Writely, you can export in Word format (ed: sorry for missing this). Also, API and blog publishing features coming soon.

5. Amazon Zuggest. Francis Shanahan’s version of Google Suggest–but for Amazon.

6. TimeTracker. Personal time management tool.

7. Del.icio.us Director. Rich UI for managing your del.icio.us links.

8. Backbase’s Information Portal. A highly interactive aggregation page.

9. Protopage. Another twist on an information portal.

10. Periodic Table of the Elements. The next must-have for high school chemistry students?

Honorable mention goes to:

1. Clearnova’s Ajax Examples page. Examples of various techniques, including full JavaScript.

2. Rico’s JavaScript Example page. More examples.

3. BackBase’s Ajax Example Page. Still more examples.

4. Realtime HTML editor.

5. Ajax IM. A browser-based IM client.

6. Endoxon’s map of Switzerland.

7. TaDaLists. Another to do list manager from Basecamp.

8. Primal Grasp’s Spell Check demo.

If you’re interested in more, check out TechCruch (they do a great job covering Web 2.0, in general), Ajaxian.com, and Read/Write Web (including a related discussion of “Web 2.0 Office).

Any others that should be on the list?

Update (9/10/05): Thanks to all who posted or emailed comments. I’ll be have a follow up next week highlighting another crop of Ajax apps. Some are in stealth mode, though, so I’m waiting for permission before writing about them. Check back later for more (and feel free to email with ideas).

Update (9/16/05): see my followup with more interesting Ajax applications here.

Related posts

• 45+ New jQuery Techniques For Good User Experience (3)
• Do’s and Dont’s in web site building (0)
• 6 New Web Technologies of 2009 You Need to Use Now (1)

Local HON players can now play on sub-100ms latencies

Last week iGame announced that it would be hosting a local Heroes of Newerth (HON) server.

Developed by S2 Games, HON follows a very similar gameplay mechanic to the popular Warcraft III mod ‘Defence of the Ancients’ (DOTA). Being big fans of DOTA, the team at S2 Game decided to develop a complete stand alone game, similar to DOTA but with improved visuals and a slicker interface.

The problem that faces local gamers however is that HON uses a fairly large amount of bandwidth, with many users reporting around 30mb of data use per hour. High latencies are also a negative side effect of being located so far away from the international hosting servers. Although S2 have taken measures to reduce the extent to which high latency affects gameplay, it would still be ideal to play on latencies of around 50ms, which is only achievable on local servers.

iGame realized these issues early on and set out to create a local HON server, where Filipino gamers can play using low latency and will eventually be able to use local-only bandwidth.

HON is already promising to become one of the leading multiplayer games for the next few years, and the current beta which is being run all over the world has enjoyed massive success.

For the time being local players still require international bandwidth to play the game on the local server. This is because players need to go through an authentication server which is located internationally. Once the game is authenticated the local servers will host the actual matches. The unfortunate effect is that players will not be able to get into games on local-only bandwidth packages.

This is a problem which iGame hopes to solve in the future. By demonstrating a strong SA HON following, iGame hope to eventually be able introduce a fully fledged authentication server in SA which players will be able to play on using local bandwidth exclusively.

The local server is now up and running and players hosting matches will be able to select the ‘iGame ZAF 1- 16’ server.

While the server is already up, iGame is working closely with S2 Games to optimize it. There have been a number of minor issues with regards to local configurations being slightly incompatible with the international servers, but steps are being taken to resolve these problems. Typical latencies on the server are between 25-60 ms.

iGame’s Johnathan Smit told MyGaming that iGame is confident that they will have the server running smoothly within the next 48 hours.

iGame is also considering possible short term solutions which will allow players to access the server and play HON using only local bandwidth. This however is a step which will only come once the current local server is up and running and is able to demonstrate sufficient demand for such a service.

The iGame HON server has been made possible only through considerable investment from iBurst, with product managers Dawood Patel and Nick Herbert both realizing the potential of a local server early on and having the vision to set out to create such a service.

A number of iGame technicians such as Greg Wildman, James Devine and Johnathan Smit have worked tirelessly to make a local HON server a reality.

Discuss local HON server in the forums

I sure do hope Filipinos can enjoy their own gaming server right at the comforts of their doorsteps!

Happy gaming!

Related posts

• No related posts.

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.

You may want to take a look at the following related posts:

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content

1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.

3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

Form Manipulation

6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

7. Submit a Form without a Page Refresh

8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.

9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.

Navigation Menus

10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

Manipulating Content

16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.

18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.

• Demo can be found here.
• Download files here.

21. haccordion
A simple horizontal accordion plug-in for jQuery.

Tabular Data and Grids

22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.

23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

Lightbox Techniques

26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.

28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.

Image Galleries and Viewers

30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.

31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Browser Tweaks

32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.

33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.

35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.

37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

Animation Effects

38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.

39. jQuery Fading Menu – Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”

40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

• Download files here.

42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.

Image Manipulation

43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

Miscellaneous

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.

47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.

48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Related posts

• 6 New Web Technologies of 2009 You Need to Use Now (1)
• Top 10 AJAX Applications (0)
• The Beauty of CSS (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• Do’s and Dont’s in web site building (0)

Over the past few weeks I’ve received a number of emails from visitors to CSS3.info regarding CSS3 validation errors when using vendor specific extentions, for example -moz, -webkit, to implement CSS3 in their websites.

This certainly isn’t a new topic, and in fact Joost de Valke first raised the issue on this website back in January 2007, however a glance over the W3C mailing-list archive highlights that this debate is still going strong, with a number of interesting ideas raised, and I thought it would make an interesting discussion point for the CSS3.info community.

The problem is that, at present, none of the CSS3 modules have yet receached the status of becoming an official W3C Recommendation, as such any of these specifications could in theory be changed at time, particularly those that are still in the early stage of development.

Obviously browser vendors (with the exception of course of our beloved friend Microsoft) are keen to support these up and coming CSS3 specifications, however as they are still at an “experimental” stage of development it is necessary for the various css3 properties to be implemented using vendor specific extensions in order to avoid any possible conflicts with current or future css specifications.

Web designers are equally keen to implement these latest CSS3 techniques in their projects as browser support, along with interest from the wider community, continues to grow – a quick search around the blogosphere shows countless new CSS3 tutorials being added to the web on a weekly basis, and sites such as CSS3Gallery.net showcasing web designers putting CSS3 to great use in their projects. However many are facing a catch 22 situation, weighing up the pros and cons between utilising the latest that CSS3 has to offer against the fact that their creations won’t pass the W3C Validator, with some web designers even going so far as to question the importance of validation.

When Joost De Valk brought this concern before the W3C back in January 2007, he was met with a somewhat muted response, however the debate has continued to intesify and a number of interesting suggestions have been put to the W3C:

- That the CSS3 Validator could offer the option to ignore vendor specific extensions,

- That the CSS3 Validator could highlight vendor specific extentions with a warning, rather than an error,

- Or my own personal favourite, that the validator could mark such code as ‘experimental’ rather than error, or warning

Either or these methods would allow web designers to continue to validate their pages, an important process for spotting any errors in your code, as despite some designers questioning the importance of validation, personally I think it’s a necessary and important tool.

In the meantime, several web designers have suggested their own personal ways of overcoming the problem, with many commenting out CSS3 code until they have validated their pages, so that at least they can check the accuracy of their CSS2.1 code.

In conclusion I’d like to say that, in my opinion, both sides of the argument present some valid points – obviously the W3c can’t be expected to validate what isn’t technically valid CSS, however perhaps the word ‘error’ is too strong, and marking vendor specific code with a ‘warning’ or ‘experimental’ status would be a happy medium between the needs of the W3C and designers eager to implement CSS3.

At the same time, I have to question whether or not the time has yet come for designers to be implementing CSS3 in their client projects. I think CSS3 is perfectly acceptable to be used in a designer’s own projects, and quite essential to promote the growth of CSS3, but is it really acceptable to sell a client experimental code that could cease to function at any time if the W3C ammends a specification, or browser vendors change the syntax with which a property is implemented?

Once again I turn the debate over to you, CSS3.info’s readers, how to you feel about this issue, and what’s the best solution from your point of view?

Source: http://www.css3.info/the-big-css3-validation-debate/#

Related posts

• Do’s and Dont’s in web site building (0)
• The Beauty of CSS (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• 6 New Web Technologies of 2009 You Need to Use Now (1)
• 960 Gridder: Easy to use layout design tool (0)

(UPDATE) 26 domestic flights canceled as Manila braces for ‘Pepeng’

(Updated 6:30 pm) Twenty-six flights were canceled Friday as airlines braced for typhoon Pepeng, which continued to gain strength as it roared towards Northern Luzon.

The Manila International Airport Authority said Cebu Pacific canceled twelve flights, Philippine Airlines canceled eight flights, while Zest Air canceled four of its scheduled flights Friday, including return flights.

Four of the canceled trips are flights originating from the Centennial Terminal 2 of the Ninoy Aquino International Airport (NAIA), 16 flights from the NAIA Terminal 3, and six flights from the Manila Domestic Airport.

Below is a list of canceled flights as of Friday afternoon:

Related posts

• No related posts.

Every year, we see scores of innovations trickle onto the web — everything from new browser features to cool web apps to entire programming languages. Some of these concepts just make us smile, then we move on. Some completely blow our minds with their utility and ingenuity — and become must-haves.

For this list, we’ve compiled the most truly life-altering nuggets of brilliance to hit center stage in 2008: the ideas, products and enhancements to the web experience so huge that they make us wonder how we got along without them.

Nitpickers will notice that a couple of these technologies arrived two or three years ago. Others aren’t even fully baked yet. But each innovation on our list reached a level of maturity, hit the point of critical mass, or stepped in to fill a burning need during 2008 that resulted in it significantly changing the landscape of the web.

Here’s to the technologies currently making the web a better place than it was 12 months ago.

Identity Management

Few things carry more value than your digital identity, and yet most web users have only a tenuous grasp of it. That’s because on the social web, identity is no longer just who you are. It’s who you know, how you know them and how much you want them to know about you. On the web, your identity is explicitly tied to your relationships, both with your friends and with the websites you visit.

Three great technologies came to fruition this year to help you manage these complex interdependencies: OpenID, Google Friend Connect and Facebook Connect.

These ID systems all offer a way to take control of your social capital, that cache of “friend data” you carry with you as you sign up for and use different web services. They also all offer a more tangible advantage — an easy way to log in to any website using one set of credentials. You get one virtual ID card that gives you access to hundreds of websites. As a bonus, you don’t have to go through the painful process of filling out a profile and adding or approving friends on every new blog, community or social network you want to join.

The end of 2008 saw a flurry of activity around identity. Facebook Connect, which currently lets you log in to a few dozen high-profile websites using your Facebook ID, went live the first week of December. Google’s Friend Connect and MySpace’s MySpaceID, similar systems that aren’t yet as widely adopted, launched soon after it.

There’s a hitch, though. Facebook Connect, while elegant and easy to use, is built on proprietary code and isn’t compatible with the offerings from Google and MySpace, which are built using OpenID and other open source standards.

We should expect this battle for your personal data play out over the next year, maybe longer. But 2008 will be remembered as the year that identity stepped into the spotlight.

HTML 5

One of the most important technologies on this list doesn’t fully exist yet — HTML 5 — but in 2008, key features started to trickle out.

HTML 5 will eventually replace HTML 4.01, the dominant programming language currently used to build web pages. But the governing bodies in charge of the web are still drafting the details, and nobody expects HTML 5 to fully emerge as the new standard for at least a few more years.

But HTML 5 is no vaporware. Many of the changes to the way the web operates as outlined in early versions of the new specification are already being implemented in the latest browsers, and some of the web’s more adventurous site builders are already incorporating HTML 5’s magic into their pages.

HTML 5 will be great step forward, standardizing things like dragging and dropping elements on web pages, in-line editing of text and images on sites and new ways of drawing animations. There’s also support for audio and video playback without plug-ins, a boon for usability and a worrisome sign for Adobe’s Flash, Microsoft’s Silverlight and Apple’s QuickTime. The language will also give a boost to web apps, as there are new controls for storing web data offline on your local machine.

Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn’t invited to the party.

Lifestreaming

A new breed of social app has arisen to help us manage the mess of information overload — the lifestream.

Not long ago, keeping track of your friends on the internet was pretty easy. Everyone belonged to Friendster or MySpace and that was it. Now, the web is littered with thousands of social sites, each with its own special purpose — Flickr for photos, Last.fm for music, Twitter for tweeting. Even the most rudimentary services are tied to the social web. Renting a movie, buying a book or writing a blog post? Let all your friends on Netflix, Amazon and Blogger know about it.

Keeping tabs on your friends now is all too easy and all too much, all at once.

Sites like FriendFeed, Plaxo Pulse and Digsby serve as social-network-activity aggregators. They’re like virtual funnels. Dump in all the notifications, feeds and updates from your various networks, and the services will bring it all into one master stream, relieving you of the responsibility of visiting a dozen or more sites to learn what your friends are up to, what they’re listening to, who they’re snogging and so on. Controls let you dial back the flow by sorting and filtering the flow, pruning it down to only what matters most.

Many such services have emerged, but FriendFeed, an elegant and simple site designed by a crew of ex-Googlers, is our favorite.

Oh, and don’t expect to be able to add Facebook to your lifestream. The network lets all sorts of data in, but precious little out.

Firefox 3

Firefox has been around since 2004, but when version 3 of Mozilla’s browser arrived in June 2008, it got everything right. Mozilla’s browser is faster and more secure than ever before, and it’s open source, so you get the feel-good factor, too.

One of the most highly anticipated software releases of the year, more than 8 million people downloaded Firefox 3 on the first day. Third time’s a charm, indeed.

The genius bit of engineering was bringing search front and center — just type what you’re looking for in the location bar, and FF3 searches your history, bookmarks and the web to bring you the page you want, lightning fast.

Performance enhancements made it one of the web’s fastest browsers — especially for surfing the recent swell of web apps — and improved security features made it one of the safest.

Mozilla continues to build upon the concept with its Ubiquity add-on for Firefox, which lets you search and interact with any number of web services by typing text commands into the browser.

It’s still the second-most-popular browser after Microsoft Internet Explorer by a wide margin, but Firefox 3 is the feisty favorite of the web’s elite.

Google Chrome

Its debut release in September was not expected, nor was it greeted with as much fanfare as the arrival of Firefox 3 a few months prior. But Google’s browser was instantly recognized as a potential game-changer, both among browser-makers and within the world of web apps.

Chrome is a browser built to empower web applications.

Its killer feature is a new approach to page rendering that isolates web applications inside each of the browser’s tabs — a crashing web app might cause a single tab to go south, but that won’t affect anything outside that tab. The rest of the browser remains stable.

When you’re doing mission-critical work in a web app and the browser crashes, it isn’t an annoyance, it’s a deal breaker. E-mails are lost, documents have to be rewritten, web forms need to be filled out again. Chrome’s ability to sidestep a full crash strengthens Google’s bid to replace desktop apps with its own web-based alternatives.

Chrome reached official 1.0 status in December. It’s Windows-only for now, but we should expect official versions for Mac and Linux soon. It’s also still very young. Future releases will have support for add-ons, offline syncing of web data through Google Desktop and — knowing Google — probably a few other bells and whistles nobody’s thought of yet.

Location Awareness

In 2008, location-based information ceased being a fancy add-on and instead became a requirement of any serious, successful web service.

Hit a button on your laptop or phone to tell a web service where you are, and it tells you what restaurants are close by, where the new Bond movie is playing (and when, and if there are tickets left), and which of your friends are within shouting distance if you need a date.

The tipping point arguably came when a wave of GPS-equipped mobile web devices hit the market. The iPhone 3G, the T-Mobile G1 and the latest Nokia N-series devices all have GPS built in. They also all have real web browsers and the tools necessary for access to web APIs, opening the door to more-relevant search and localized mobile services.

On the iPhone, you can use Yelp’s app to get a list of nearby venues, restaurants and hangouts with the touch of a button. Or, in the case of Google’s local-search app, you can simply speak your request and get local results. An app like Say Where queries multiple search sites.

The benefits aren’t limited to mobiles, either. Social networking sites and desktop search apps can take advantage of new technologies like Yahoo’s FireEagle, where users can update and store their location data, or browser plug-ins like Google Gears or Firefox’s Geode, which users can set up to report their location automatically.

Whether they’re using a desktop browser or an iPhone, users now demand the high levels of relevance and convenience on the web that location awareness affords.

The World Wide Web Consortium, the web’s governing body, has stepped up and formed a think tank to develop a set of standards for handling users’ geodata that ensures privacy and interoperability. The W3C Geolocation Working Group hopes to have its first recommendation filed by the end of 2009.

Source: http://www.wired.com/software/webservices/news/2008/12/YE8_web?currentPage=all

Related posts

• 960 Gridder: Easy to use layout design tool (0)
• The Beauty of CSS (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• Do’s and Dont’s in web site building (0)
• 45+ New jQuery Techniques For Good User Experience (3)

You can choose 1 from each of the payment options provided. We only support paypal as of the moment, but rest assured we are doing everything we can to provide you with the highest security.

Related posts

• No related posts.

CSS is not a difficult language to learn, though there are bugs and browser discrepancies to deal with. He wrote off CSS when he compared IE5/Mac layouts in Netscape 4, but regained religion in 2002.

What about CSS is so beautiful to him?

“Standards” are “widely recognized” and “regularly used.” “Standards give us some kind of consistent target to build toward.” Standards benefit those who build the tools and build with the tools.

In nature, beauty goes beyond the surface down to structure and up to ecosystems. You often get accessibility bundled with CSS as a package deal.

Feedback from Wired News reader, which he shares “by no means in a raconteur style”: If you ask for feedback after you redesign a site, 90% of the feedback will be negative. “Your colours are awful; they’re too bright. I can’t read your type. Your designer sucks and should be fired.” Positive feedback to his own site followed a little formula, including one message that ended with “By the way, I’m blind.” “And that hit me like a ton of bricks…. His message basically completely fundamentally changed the work I do…. I don’t just design for people who can appreciate the beautiful designs and type I use on a site. I also design for blind people. I also design for people who can’t get out of the house because of a mobility impairment.”

Advantages: “Fstr” (sic) in real or apparent speeds. Simpler code; greater flexibility; one version.

Mistakes? Boxiness: Overreliance on the box model and making the box visible. “This can be a symptom of starting with CSS too early” in the design process, doing “only what we can immediately remember in CSS.” Image replacement: “A year ago at South by Southwest I deprecated image replacement.” We already have a tag for that in HTML: img with alt. In fact, a lot of the success of CSS Zen Garden is image replacement. You can’t zoom into it, for example [though you can with sIFR – zoom then reload]. Presentational class and id names: large, redtext, top-line, borderred, rightcol. Use page-title, subhead, main, module, secondary instead. Accessibility assumptions: Just for the blind or PDA users. Imitation.

Related posts

• PHP $_SERVER variables are not safe for use in forms, links (1)
• 6 New Web Technologies of 2009 You Need to Use Now (1)
• 960 Gridder: Easy to use layout design tool (0)
• The Big CSS3 Validation Debate (2)
• 45+ New jQuery Techniques For Good User Experience (3)