Powered by GoodBarry

“Ninja Training for Web Designers”

Bookreader.js

Thursday, July 31, 2008 - Lawrence Hsu | BC

Want to let people read your webpage like a book? Check out bookreader.js! The documentation is in Japanese though :|

PS the last two links in the footer lets you toggle between standard view and bookreader view.

bookreader.js from CogniTom Academic Design

120+ Free Ajax Activity Indicator Gif Icons

Friday, July 25, 2008 - Lawrence Hsu | BC

How does one obtain a collection like this? Amazing.

120+ Free Ajax Activity Indicator Gif Icons from Badeziner

Tutorial Dog

Thursday, July 17, 2008 - Lawrence Hsu | BC

Tutorial Dog is a tutorial web site that seeks to help people learn Adobe Photoshop, CSS, Javascript, HTML and OS X Tips (and have fun). Tutorial Dog tries to provide the most insightful tips and coolest techniques to advance your knowledge of the subject covered. Having said that, we try to always include a psd (Photoshop Document File) with every Photoshop Tutorial so that you can go hands on with results we show. We also like to give away cool resources such as OS X icons and handy templates for free.

Tutorial Dog

Javascript Framework Usage Among Top Websites

Sunday, July 13, 2008 - Lawrence Hsu | BC

Which Javascript frameworks are the most common? To answer that question, we here at Pingdom have examined a set of almost 200 popular websites to see if they use a Javascript framework, and in that case which framework they have chosen. The websites were collected from the Alexa US Top 100 and the Webware Top 100 Web Apps. The frameworks we looked for were Prototype, JQuery, MooTools, Yahoo! UI Library, Dojo, ExtJS and MochiKit.

Javascript Framework Usage Among Top Websites from Royal Pingdom

Web Form Context Highlighting Using jQuery

Saturday, July 12, 2008 - Lawrence Hsu | BC

In my previous article "Labels in form layouts" I wrote about how I have implemented "underlined labels" on web application forms. However, due to complexity of web appications I developed I often needed to find a way to focus a user on a current context. When I discovered jQuery I decided to use it because of its powerful features.

Building a Better Web Forms: Context Highlighting Using jQuery from Janko at Warp Speed

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Friday, July 11, 2008 - Lawrence Hsu | BC

We've all seen the "accordion" type effect used on many Web 2.0 sites; however, many accordion scripts are heavy, make poor use of the libraries they are based on, and don't handle things like ensuring that the accordion maintains a consistent height. In this tutorial, we will use the Prototype and Scriptaculous libraries to create a lightweight, intelligent accordion.

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous from Nettuts

Sliding Top Menu with jQuery

Thursday, July 10, 2008 - Lawrence Hsu | BC

Sliding menus are very effective in areas where we have limited space. This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name. You can also use it as an info box, login area & more.

Sliding Top Menu with jQuery from Web Resources Depot

Fading JavaScript Tooltips 2kb

Saturday, July 05, 2008 - Lawrence Hsu | BC

This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic.

Fading JavaScript Tooltips 2kb by Michael Leigeber

Coda Slider Effect

Tuesday, June 24, 2008 - Lawrence Hsu | BC

Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it.

Coda Slider Effect from jQuery for Designers

How To Create A Keypress Navigation Using jQuery

Sunday, June 22, 2008 - Lawrence Hsu | BC

The key to a succesful website is the ease with which a user finds what they are looking for. Thus, it's worth spending a lot of time and effort in creating both useful and visually appealing navigation systems. Lately, I have began experimenting with new ways to navigate a website. In this tutorial I'll show you how to let the user make use of their keyboard to get around your site.

How To Create A Keypress Navigation Using jQuery from Nettuts

How To Make an Accordion Menu Using jQuery

Saturday, June 21, 2008 - Lawrence Hsu | BC

In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

How To Make an Accordion Menu Using jQuery from Roshan's Blog

Vote! How to Detect the Social Sites Your Visitors Use

Friday, June 20, 2008 - Lawrence Hsu | BC

If you could detect which social bookmarking sites your reader uses, on a per-reader basis, you could display only the badges they care about. But you can’t know that because the browser secures the user’s history, right? Wrong.

Vote! How to Detect the Social Sites Your Visitors Use from Aza's Thoughts

How to Load In and Animate Content with jQuery

Wednesday, June 18, 2008 - Lawrence Hsu | BC

In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

How to Load In and Animate Content with jQuery from Nettuts

70+ High-End Components for Web Designers and Developers

Monday, June 16, 2008 - Lawrence Hsu | BC

So here is Milestone 01 - a handy collection of hand-picked, quality components sorted in framework/programming categories with the most popular component presented first in each category. Note that these components have been selected and tested during the last three months times to make sure each meets a certain quality criteria. Enjoy!

70+ High-End Components for Web Designers and Developers from DevKick

Sliding JavaScript Menu Highlight 1kb

Thursday, June 12, 2008 - Lawrence Hsu | BC

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”.

Sliding JavaScript Menu Highlight 1kb by Michael Leigeber

20 Useful Tools to Make Web Development More Efficient

Saturday, June 07, 2008 - Lawrence Hsu | BC

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

20 Useful Tools to Make Web Development More Efficient from Six Revisions

Learning JavaScript Programming Language through Video Lectures

Friday, June 06, 2008 - Lawrence Hsu | BC

These lectures are given by Douglas Crockford who is a senior JavaScript Architect at Yahoo!. He is well known for his work in introducing JavaScript Object Notation (JSON).

Learning JavaScript Programming Language through Video Lectures by Peteris Krumins

Using jQuery to Produce Rich User Interfaces

Thursday, June 05, 2008 - Lawrence Hsu | BC

All the animations used throughout the company site I’ve written with jQuery, the greatest JavaScript library on the planet (yeah, I went there). jQuery makes client-side scripting not only super-easy but a blast to write. I’ve written about jQuery before and how much I like it (I even recently gave a talk to that effect) but have long wanted to break down how it powers our little portfolio slider. (I won’t go into too much detail about jQuery itself — I leave finding introductory tutorials elsewhere on the intertubes as an exercise to the reader.)

Using jQuery to Produce Rich User Interfaces from OnWired

Easiest Tooltip and Image Preview Using jQuery

Tuesday, June 03, 2008 - Lawrence Hsu | BC

Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.

Easiest Tooltip and Image Preview Using jQuery from CSS Globe

Lightweight JavaScript Accordion with CSS

Thursday, May 29, 2008 - Lawrence Hsu | BC

The JavaScript accordion above is 1.65 kilobytes when packed. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

Lightweight JavaScript Accordion with CSS by Michael Leigeber

Recent Posts

Category

Archive

    Back to Top