Connect With WRD
feed via e-mail
feed via e-mail

Bubbling Library is an easy to adopt Yahoo! User Interface (YUI) Library extension for event-driven applications.

It consists of a set of plugins, behaviors and widgets.

YUI Extensions

This YUI extension has the following features:

  • Plugins
    • Dispatcher
    • Lighter
    • Form Manager
    • Sound Manager
    • Translator
  • Widgets
    • Accordion Manager
    • Loading Mask
    • Tooltip Manager
  • Behaviors
    • Bookmark Links
    • RSS Feed Links

Bubbling Library is well-documented and has lots of examples of every feature.

FIVe3D is an open source code for creating vector-based 3D animations with Flash.

These Flash animation classes are built with AS3 and has the following features:

  • Back face culling
  • Flat shading
  • Z-sorting
  • Space drawing functions
  • Bitmap3D class
  • Video3D class
  • Sprite 2D class
  • Letter spacing
  • Text width

Flash Vector 3D Animation Classes

Tip:

FIVe3D considers a text as a collection of letters, each letter being a vector shape. To draw these vector shapes, drawing instructions are saved in a typography file.

There is free tool at the website which enables you to create typography files.

MailChimp presents 4 free HTML e-mail templates that are well-optimized for most of the e-mail applications.

Templates include a basic newsletter, postcard and 2-column designs.

Free E-mail Templates

You can also find newsletter coding tips at the same address and a free e-mail marketing e-book which covers email marketing benchmarks (average open/click rates, bounces, unsubs), how spam filters work & more.

Vista-like Ajax calendar is an unobtrusive, slick calendar script which looks and functions similar to the Vista taskbar calendar.

It is built with Mootools and PHP and has datepicker functionality.

Mootools Calendar

The calendar and datepicker have several options for styling and formating them to fit your needs. All properties are optional and reside in a JavaScript object.

Features of this Mootools calendar:

  • Vista look-and-feel
    • Quick navigation by switching between months, years and decades without drop-down boxes
    • Smooth transition animations
  • Customizable features
  • Datepicker functionality
  • Easily changeable date labels (e.g. different languages)
  • Lightweight (compressed 8,50kB)

Downtimes seem to be the nature of the hosting & internet business. But there is a limit for it which you must measure whether your website’s uptime is below or above that.

Mon.itor.us is a free site uptime monitoring service which warns you when your website is down and provides statistics of your uptime & downtime.

Site Uptime Monitoring

It monitors your website from different locations 24*7 and can send alerts via e-mail, RSS or SMS (paid).

Besides these, it has internal monitoring features like keeping an eye on computer/server memory, CPU, etc. with an installable agent. And, has visitor tracking capabilities too.

Mon.itor.us also provides an API for developers who want to embed their applications with the service.

Aaron Cannon, a blind web developer and accessibility consultant, has shared a great web accessibility checklist that every designer & developer will find handy.

It includes more user experience facts than the technical ones. Just like:

  • Avoid CAPTCHAs unless you have no other choice, and even then
    they should be avoided. However, if you must use them, provide
    an audio CAPTCHA alternative.
  • Provide “Skip to content” links at the top of the markup order in
    pages with large numbers of navigational links before the main
    content.

The list can be reached as PDF and text formats.

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.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

Sliding Top Menu

And when opened:

jQuery Sliding Menu

Demo
Download

 

Click here to see the final working demo of this jQuery sliding menu.

 

Step 1 – HTML:

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn't this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>

 

Step 2 – CSS:

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>

 

With the CSS file there are few major points:

  • #slider has to be positioned absolutely, so it can overlay the other content.
  • #slider has a negative top-margin which hides it.
  • #sliderContent is positioned absolutely to not to crack the open/close buttons
  • #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({
                marginTop: "-141px"
                }, 500 );
            $("#topMenuImage").html('<img src="open.png"/>');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "0px"
                }, 500 );
            $("#topMenuImage").html('<img src="close.png"/>');
            $("#openCloseIdentifier").hide();
        }
    }); 
});
</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

Professional cliparts are objects which make our designs & applications better.

Templates.com is a resource-rich website presenting professional cliparts and website templates (and flash templates).

There are hundreds of quality illustrations, 3D models and icons which will give your web applications or designs a fresh look.

Quality Illustrations

Categories are well organized for better browsing as you may find architecture illustrations or 3D robot models easily.

Besides these professional cliparts, Templates.com has a variety of HTML and Flash website templates.

Template.com Logo
From 9000+ templates, which includes almost any category you can imagine like e-shops or computers, you can definitely find the one you are looking for.

 

And, you can find free cliparts & templates too:

Also, Templates.com’s blog is an interesting resource that covers interviews with designers, design tutorials & more.

P.S. This post is an advertorial.

ThemeRoller is a web based application that helps theming jQuery UI components.

Using ThemeRoller, you can create your theme for your web applications within minutes. It’s completely intuitive, comes wich rich controls to change the color and design of each state.

jQuery ThemeRoller

You can preview your theme as:

  • Date picker
  • Slider
  • Accordion menu
  • Tabbed menu
  • And a dialog box

and download as a ZIP file.

In addition, ThemeRoller also includes a theme gallery to browse for downloads and inspiration. Creating a theme for your application doesn’t get any easier than this; it’s simply that amazing.

VCalendar is an open source web calendar application for posting and maintaining events and schedules online, in a calendar format.

VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET (C# and VB.NET).

Web Calendar Script

Some features of this free calendar application:

  • Localization features with language selectable by end-users (initially English & Russian)
  • Dynamic CCS (stylesheet) styles, selectable by end-users
  • Annual, monthly, weekly and daily calendar views
  • Multiple categories for classifying calendar events
  • Recurring and all-day events
  • Role-based user permissions and calendar configuration
Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com