Posts Tagged ‘Javascript’

Pluralink is a tiny JavaScript library for displaying multiple links inside one link.

Rather than mentioning all your links one-by-one, a major link will be displaying all the options when clicked.

Pluralink

Usage is pretty simple:

<a href="http://firstlink.com/||http://secondlink.org/" title="First link description||Second link description">Some pluralink</a>

is all to do after inserting the JS file into our webpages.

The cons are:

  • not unobtrusive (if the JS is off, the links won't be working)
  • no RSS support (Pluralink team says "they are working on it")

The library also comes as a Wordpress plugin for easier integration.

Closure Tools is set of opensource (release info) developer tools by Google which are used while building Gmail, Google Maps, Google Docs  & many others.

The tools include a JavaScript compiler, library & templating system.

Closure Compiler

JavaScript Compiler

It compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly.

It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

The compiler also offers a Firebug extension, named Inspector, for better debugging.

Closure Library

It is a broad, well-tested, modular, & cross-browser JavaScript library.

Only what you need can be pulled from a large set of reusable UI widgets, controls, lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, & more.

Closure Templates

They simplifty the task of dynamically generating HTML.

In contrast to traditional templating systems, in which you use one big template per page, you can think of Closure Templates as small components that you compose to form your user interface.

Validatious is an unobtrusive & easy to use JavaScript form validation library that does not depend on any JS frameworks.

It has built-in validators like numeric, e-mail, URL, max/min char, etc. & custom ones can be created.

JavaScript Form Validation

Using the library, it is possible to create chained validation rules like: validate( "email".is("required").andIsAn("email") );.

How and when Validatious does validation, how it displays errors & more can be controlled.

The library supports multilingual error messages with the help of a language file or overriding pre-built ones.

  • Tags:
  • Filed under: Forms, Goodies
  • 2 Comments
  • Gaya Design is featuring a very nice tutorial (with source) on creating an image slider with a progress bar.

    The slider uses the powerful jQuery Cycle plugin (see WRD post) which can rotate images with various effects.

    Image Slider With Progress Bar

    The progress bar is created automatically to reflect the number of images that wi,ll be displayed.

    Besides the look & feel of the slider, variables like speed of the slideshow & transitions can be set too.

    Here are several examples provided to better findout how it functions.

    Thematic maps are very useful when describing statistical data about places. The data, simply, becomes much easier to understand.

    Cartographer is a JavaScript library for creating thematic maps on Google Maps which supports custom styling.

    It is only a one JavaScript file that relies on the powerful Raphael.js vector-graphics library.

    Cartographer

    It supports 3 visualizing types:

    • Chloropleth (color coded regions)
    • Pie charts
    • Point clusters

    The areas on maps are mentioned as latitudes or regions (depending on the type) which means no hacking or manual calculations.

    Every visualization type comes with different options like colors, opacity, stroke & more.

    P.S. The library is currently on alpha state but pretty solid.

    Mu is a JavaScript library for enabling Facebook Connect on any website with ease.

    It makes accessing the following possible:

    • Identity: the user's name, photo and more
    • Social Graph: the user's friends and connections
    • Distribution: the Stream, and the ability to communicate
    • Integration: publishers, canvas pages, profile boxes & tabs

    Mu JavaScript Library

    Mu is lightweight can be used with other libraries with no conflicts.

    There is also a console provided for experimenting the Mu APIs.

    Script.aculo.us is the most widely used add-on for the Prototype JavaScript Framework with the features like animations, drag'n drop, Ajax control & more.

    Its second version, renamed as Scripty2, is out with a complete rewrite. It is lightweight (5kb compressed), flexible & works faster.

    Scripty2

    The library is currently in alpha status & there are still parts that need to be developed or improved. On the other hand, it is very promising & already being used by several big projects.

    And, besides the Scripty2 homepage itself, the demos show how it will be empowering Prototype JS.

    Floom is a MooTools slideshow plugin that can present images & their captions beautifully.

    It displays them with a blind-effect & a chic loader that shows when the next image will be shown.

    MooTools Slideshow Plugin

    The plugin has various options like:

    • defining the number of blinds between transitions
    • slideshow interval
    • loader on/off
    • captions on/off

    To mention, Floom is not a complicated script, rather, it is a lightweight (4kb compressed) one with very few features (just auto-slides images) which is sometimes "what is needed".

    P.S. The download link in the website, currently, has a typo. You can use this address until it is fixed.

    eCSStender is an open source JavaScript library, created by Aaron Gustafson, that helps browsers (including IE6) pay attention to the CSS code you write.

    It aims to prevent the usage of browser-specific properties & hacks but make leaner & meaner CSS possible.

    eCSStender

    eCSStender is an extendible library with its API support & has ready-to-use extensions like CSS3 selectors, @font-face, rotation & more.

    How does it work?

    • it loops through the document's stylesheets and begins collecting information
    • parses the rules it understands
    • checks if the parsed rules are supported by the extensions
    • applies the supported rules to the document via JavaScript

    Read the rest of this entry »

    Calender Eightysix is an unobtrusive calendar & datepicker that is built with MooTools.

    It offers a very easy-to-use navigation for jumping back / forth between months, years & decades without drop-down boxes.

    MooTools Calendar EightySix

    The script is lightweight (9.5kb) & can be themed via CSS (3 themes are already included).

    It has a bunch of options for maximum customization like setting:

    • default date on load
    • min-max dates of the calendar
    • date format
    • unpickable days/weeks
    • durations between slides, fades, toggles
    • the calendar start date (Monday – Sunday)
    • & more..

    P.S. It is also the successor of the popular Vista-like Ajax Calendar (WRD post).

    feed-holder
    FeedBurner
    • MailChimp
    • PSD to HTML
    • Virtual Private Servers - eTecc Web Hosting
    RapidxHTML - Converts Your PSD into XHTML Rapidly
    EasyImg - Internet Graphics Engine
    • activeCollab | Project Management
    • PSD to HTML
    • Manage your clients email marketing with sendcube

    Vivvo CMS - Web Publishing at your Fingertips