Solving a Dilemma: Raw JavaScript vs. JS Frameworks

There has been a huge dilemma among web developers as to what to get acquainted with first, the basic JavaScript or the more advanced features that use it such as jQuery, MooTools etc. The popular answer to such a question has always been the latter option. Learning the latter might be the easiest way around. But taking shortcuts always have their repercussions. Learning jQuery without getting acquainted with the basic Java script may lead to the developer running into problems later on.

The Pros and the Cons

Using script libraries is the easier way but not the best way. When one has ready made libraries of scripts in their possession and the library is user friendly and provides good tutorials for the beginners, it may not take a long time to master it. There are some great tutorials that may make even an absolute beginner master it and start working within a short period of time. There is a huge library of codes which can perform a huge range of functions. One does not have to write extensive lines of code as in raw JavaScript or others. The programming can be done with some speed as there is a lot of support for the library such as available plug-ins that speed up the process and can be downloaded readily. Yet all these come for a price.

[Read more…]

Facebook-style Lightbox/Modalbox powered by jQuery and MooTools

Famspam is sharing Facebox, a Facebook-style Lightbox useful to display images, DIVs, or entire remote pages using AJAX. The download package comes with the JavaScript and CSS files, a loading image, a close label, four corners, and solid border images.

Implementation Example

1) Load Dependencies – First, you need to load jQuery before Facebox.

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>

Read more from this entry…

Simple Bar and Stacked Bar (AJAX) Graphs: mooBarGraph

mooBarGraph is an AJAX Graph Plugin for MooTools which supports simple bar and stacked bar graphs. This plugin makes graph from your JSON data and is compatible with all major browsers including IE6.

This MooTools script has almost all jqBarGraph possibility, plus some new features such as AJAX data loading, URL bars, info boxes and negative values.

Features include:

  • You can set label, color, URL and tooltip text for every bar
  • Simple/Stacked Bars
  • Legend can be created automatically
  • AJAX data loading (can have negative values for simple type)
  • Cross-browser compatibility (including IE)

Simple Web-Based MooTools WYSIWYG Editor: MooEditable

MooEditable is a simple and user friendly web-based WYSIWYG editor written in MooTools. It replaces the <textarea> element with the actual editor. The default options that you can use are: bold, italic, underline, ordered & unordered lists, indent and outdent text, undo & redo, add & remove hyperlink, add image. Like many similar editors out there, MooEditable supports “toggle view” for switching between the WYSIWYG area and the HTML source code. Moreover, it can be extended by adding more action elements to it including: a character map, the possibility to insert image with manipulation options, smiles, a basic color picker, the option to add and modify tables.

Features include:

  • Clean interface
  • Customizable buttons
  • Tango icons
  • Lightweight
  • Fully degradable when Javascript disabled

Test your MooTools Code using the mooShell Utility

mooShell is an useful tool to test your MooTools code. You just need to load the page, edit some relevant fields and load the results into an iframe. Although it lacks some features, being in early stage of development this tool is a definitive help when writing HTML, CSS and JavaScript. A nice feature is the ability to save results for further usage, like the result from this example: There are plans to implement logging, choice of JavaScript libraries, snippets, tagging and many more.


Unobtrusive JS Calendar and DatePicker: Calender EightySix


Calender Eightysix is the successor of the popular Vista-like Ajax Calendar. Being an unobtrusive developer friendly calendar and datepicker, this lightweight customizable script is offering a better user experience for date related functionalities. Calender Eightysix is built from scratch using pure JavaScript, making use of the MooTools framework.

Read more from this entry…

Uploading Files with Progress Bar using jQuery & MooTools

Uploadify is a JQuery Plugin that allows you to easily upload multiple files on your site without needing to reload the page. The script requires Flash and any backend development language. A progress bar is shown while uploading the file(s). The plugin can be used in a number of applications and commercial products.

FancyUploader is a MooTools file-input replacement script which features an unobtrusive, multiple-file selection menu and queued menu with an animated progress bar. It’s easy to integrate, being server independent & completely customizable via CSS and XHTML.

JqUploader works as a substituter for the classical HTML file input fields. It uses Flash and shows a progress bar while the file is uploaded.

Carousel Examples: YUI Library, jQuery, MooTools & Prototype

Are you looking to setup a carousel on your website? Checkout this list!


The YUI Carousel Control is an excellent tool if you need to offer your website’s a way to browse images/content arrayed vertically or horizontally in an overloaded page region. Some of the featured provided by this awesome library include:

  • Circular Carousel
  • Partial revealing previous and next items
  • Usage of both images and text within an item
  • AJAX usage for deferred loading of items
  • Paginator
  • Usage with the ARIA plugin

Read more from this entry…

Highlight Elements in, jQuery and MooTools

This is a tutorial that will teach you how to implement the Highlight Effect in JavaScript using the famous libraries, JQuery & MooTools.

In, Effect.Highlight flashes the color as the background of the element. It is mostly used to draw attention to the part of the page where the effect is applied (could be a completed AJAX Call).

To initialize the effect we have to set the ID of the element that will be highlighted (for instance a DIV) and the right options (startcolor, endcolor, restorecolor, keepBackgroundImage).

Read more from this entry…