Jan 29

Peppy Fast CSS 3 Compliant Selector Engine

HTML5, css3 4 Comments »

Peppy is a lightning fast CSS 3 compliant selector engine with no external library dependencies. Peppy can be used along side other libraries seamlessly.

As it stands now Peppy is faster1 than all other major JavaScript libraries with DOM querying capabilities (Prototype 1.6.0.3, JQuery 1.2.6, MooTools 1.2.1, EXT 2.2, DoJo 1.2.0, YUI 2.6.0). It is faster2 than Sizzle by John Resig and it also is cross browser (IE included). You can take a look for yourselves by using SlickSpeed Selectors Test and download Peppy here.

If you are designing your own JavaScript library or want to replace your existing libraries selector engine then Peppy is an ideal candidate.

Jan 27

How To Create a Realistic Hover Effect like jQuery Animate Effect

Uncategorized 1 Comment »

Would you like to Create a Realistic Hover Effect With jQuery? It adds a rising hover effect to a set of icon links using jQuery’s animate effect. In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. And .stop() eliminates any queue buildup from quickly mousing back and forth over the navigation.

Hover Menu

View Demo or Download

Jan 27

Free jQuery image zoom plugin Cloud Zoom

Image Gallery, JQuery 2 Comments »

Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

cloud zoom sample

cloud zoom sample

Features

  • Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
  • Easy integration with basic valid HTML.
  • Small 6Kb (minified) script.
  • Smooth zoom movement.
  • Gallery mode.
  • Tint, soft focus and inner zoom features.
  • Degrades gracefully with Javascript turned off.
  • Fully accessible with no CSS or text only browsers.
  • It’s completely free.
Jan 25

HTML5 real time data visualization chart HumbleFinance

HTML5, JQuery 9 Comments »

HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

This demo displays historical stock data for Google from their IPO to March 5th, 2010. This data was acquired through the Google Finance website.

You can mouse over the chart for additional data, as well as zoom and pan the charts using the grey bottons. For best results view with FireFox, Chrome, or Safari.

Jan 23

Best Simple Page Peel Effect jQuery Plugin

Image Gallery, JQuery, JQuery Plugin No Comments »

SohTanaka has made a tutorial: Simple Page Peel Effect with jQuery & CSS. All they are doing is expanding the image on hover, then retracting to its default size on hover out. You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath.

You may also interested in The Sexy Curls jQuery Plugin if you like this tutorial. The page corner can be set to curl automatically. The plugin is released under the MIT license. That means you can do whatever you like with it.

Page Corner Peel jQuery Plugin

Jan 23

Google Language API for Translation Transliterate Virtual Keyboard with Ajax

Ajax, google 1 Comment »

The Google Language API Family consists of four powerful tools making it easier for you to communicate with users across the globe:

  • Need to translate your website or application into one or more different languages? With Google Translate, you can dynamically translate text between thousands of language pairs.
  • Wondering what “have a nice day” looks like written in Hindi? You can use Google Transliterate to transform a given written language into dozens of other scripts.
  • Want to type in Hindi, but don’t have a Hindi keyboard? With Google Virtual Keyboard, you can provide users with an on-screen keyboard layout native to one of dozens of available language scripts.
  • Learning to read Arabic? You can use Google Diacritize to add diacritical marks to text, helping non-native speakers learn how to pronounce these words.
Jan 21

Supersized Full Screen Photos Slideshow jQuery Plugin

JQuery, JQuery Plugin, javascript, slideshow No Comments »

Supersized is a full screen photos slideshow  jQuery plugin.

Features

So, what exactly does Supersized do?

  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles Images/backgrounds via slideshow with transitions and preloading
  • Navigation controls allow for pause/play and forward/back

Demos

I’ve put together a few example customizations:

jQuery Slideshow

Tagged with: • • • •
Jan 21

Flickrshow Make Photo Slideshow From Flickr on Your Website

javascript, slideshow 2 Comments »

flickrshow is a simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, (even Internet Explorer 6).

  • Unobtrusive and compatible: they built flickrshow on top of Prototype so it will work with all modern browsers and won’t interfere with any other Javascript on your page.
  • Themeable to match your site: You can alter the colour of flickrshow to match your site.
  • Can be used multiple times: it caused a number of headaches, but you can run as many slideshows on your site as you want, as long as your viewers can handle the loading times.

flickrshow.png

Tagged with: • •
Jan 19

Beautiful Tooltip for Web Page in JQuery

Uncategorized No Comments »

(mb)Tooltip is a beautiful tooltip for your webpage in jQuery. Simply by placing a title attribute with your content as value, and then you can replace the ugly default tooltip with this smart and nice one. You can also disable and enable (mb)Tooltip at anytime.

Tooltip

Jan 17

Best Faster Easier Way to Build Web Application

Ajax, framework No Comments »

Getting Real is the business, design, programming, and marketing philosophies of 37signals a developer of web-based software used by over 1 million people and businesses in 70 countries. 37signals used the unconventional Getting Real process to launch five successful web-based applications (Basecamp, Campfire, Backpack, Writeboard, Ta-da List), and Ruby on Rails, an open-source web application framework, in just two years with no funding, no debt, and only 7 people.

Anyone working on a web app  including entrepreneurs, designers, programmers, executives, or marketers  will find value, fresh perspectives, and inspiration in this practical book. At under 200 pages it’s quick reading too. Makes a great airplane book. The complete book with 16 chapters and 91 essays is now Completely free to read online.

gettingreal.png

Previous Entries
preload preload preload