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…