Can you do this using Javascript ?!

Ok, I was googling for some information when I stumbled upon something called as “Chrome Experiments“. I don`t know whether most of you must have seen this site, but it is unbelievable that most of the experiments posted here have been created using javascript !

One of my favourites here is the Depth of Field example. Screenies below

This just shows how the javascript engines have evolved over the years. Earlier flash used to be every developer/designers dream to create super interactive websites, it is still great for creating RIAs but nowadays Javascript has evolved soo much, it can do most of the stuff which Flash could do.

This site is a real inspiration to those who want to learn more about javascript. Enjoy

A month long ordeal finally over ! Product = OptimaPrime, Result = First Prize

Ok, so the title doesn`t make much sense huh !? I wasn`t available for an entire month and the reason…. Optima Prime – Enterprise Project Management System. Well,  this is my last year in graduation college and we had to create a project which will stand out, and here it is

So wat is it all about ?

Before I start, we had developed a Chart or Poster to depict what our software is all about. This is the poster, it may be a lil cluttered, but it pretty much explains what our project is all about

We won the first prize for our project along with another Project (Rank Retrieval System). But more than prize, I guess for all the hard work put in, we have got what we wanted, Exposure….

What is PMS ?

There are lot of Project Management Systems out there, Project Management Systems (PMS) in general help your company manage projects effeciently and effectively. Optima Prime is one such PMS which does both alongside a host of features

Features ?

1. Works on our Custom MVC based framework “Innovite”
2. 3 Different types of User Logins viz Project Manager, Team Leader, Team Member
3. Every Project has an individual “Message Board”(Forum) to communicate with the project members with Attachment Facility
4. Email Alert System. Whenever any project has been updated or any new message has been added, then an E-Mail is sent across all the users in that project.
5. Completely AJAX ‘ed so not much page transitions
6. Dynamic Timeline Charts (Gantt) and Dynamic Pie/Bar Charts
7. Automatic PDF report generation.
8. Themes
9. Install Package
10. Aimed for an IT Enterprise
11. Plugin System
12. Open Source

The basic framework of OptimaPrime.

So there are a long list of features, I have just given a few. Anyways, I`ll release the code soon here, till then you can check out the screenshots put up below.

Screenshots

Project Dashboard after logging in

Project Summary Page with Gantt Chart, Pie Charts etc

Project Edit Page

Well, these are just a few screens, there are more. I`ll upload em as soon as I get up.

Cheers Guys, I am extremely sorry readers for not answering your queries, but I am here now. I`ll try to answer as much as possible.

Really Easy Form/Field Validation using Prototype+Scriptaculous

Hey Guys,

Its been a while since I have started my final year Project called “OptimaPrime- The Enterprise Project Management System”. Most of you must have heard of project management systems. It helps enterprises manage their projects, lets them keep it on schedule, helps them allocate resources etc.
I needed to perform form Validation since I had a lot of forms and it had lot of fields. I googled for good form validation plugins for Prototype + Scriptaculous (Since I have got really used to this cool library) and thats when I found Dexagogo’s Really Easy Field Validation plugin.

Tutorial : Overlay a AJAX Spinner in the center of Web Page using Prototype

This tutorial is specially for beginners who are wondering how to place an AJAX Spinner. Its very simple guys. Just read below to find out.

To those people who have wondered how to show the spinner image + loading message when any ajax request is made and to hide the spinner image + loading message when the request is successfully completed, this tutorial will help you out in achieving it and also teaches you how to show this loading box in the center of the browser screen and grey out the background contents with cool fade effects.

Index :

• Page 1 : Introduction
• Page 2 : Required HTML/Javascript Code/CSS
• Page 3 : Complete Code of Demo

Pre-Requisites :

A little bit of CSS,HTML knowledge and know-how of Prototype, Scriptaculous.

A cool jQuery plugin : PHP / jQuery Image Replacement

How many times have you wanted to use a very cool looking font for your website, but have withdrawn the idea because you thought that font won`t display properly in everyones’s system.

Well fear not, I had previously posted a tutorial on how you can use PHP to display those lines of texts which use some odd font, by automatically converting it to an image (Tutorial : Convert Text into transparent PNG Image using PHP), this way, you can easily display text with odd fonts.

Recently I found a very neat plugin which automatically converts any text (with font of your choice) into an image i.e from now on you don`t have to worry about text with different or odd fonts. They`ll be automatically converted into a compatible image via this plugin, And don`t worry about the image tag and all, this plugin manages everything

Plugin name : PHP / jQuery Image Replacement
Plugin Home Page/Demo : http://www.xanthir.com/pir/

Usage

The usage was pretty simple.

1. After unzipping the archive, Open pir.php and First set the fonts folder in the php page.
2. In your website, include jQuery and then include the jquery.pir.min.js (for production).

3. $(function() {
   $.pir.options.php="pir.php"; //compulsary to include the php which converts text to image.
   $("h1").pir({font: "yourfont.ttf", wrap: true}); //will enable automatic text warping.
   

   });

Pretty Simple huh ! Enjoy

Tutorial : Collapsible Menus using jQuery

jQuery has surely made my life easier. I have been trying out both Prototype & jQuery for a couple of days now and for some reason, I find jQuery a lil easier compared to Prototype Javascript Library. Although Prototype is a much powerful library (according to me), jQuery is just too simple . Anyways I will show you a simple effect which you already must have seen in many places.

Demo : The Category section in the sidebar in this site.

EDIT : Added Collapse All, Expand All Code as well

Tutorial : Auto Completer using Prototype, Script.aculo.us

How many of you have always dreamt of creating an Auto Suggest Box. I bet everyone must have seen one of these somewhere or the other. if you use Gmail to send mails, you might recall that while typing the To address, Gmail shows a probable list of users from your address book. Nowadays most of the modern browsers also have this Auto Suggest control built in them, i.e when the user begins to type in a text box, a menu appears below the text offering completion suggestions.

Today I am going to teach you how to create an Auto Suggest Box using Prototype, Script.aculo.us. The script.aculo.us auto suggest box (autocompleter) replicates this control, but gives the developer control of the probable suggestions.

Index

• Page 1 : Introduction and
• Page 2 : Auto Suggest Box (local)
• Page 3 : AJAX Auto Suggest Box (remote via PHP/MySQL)

Demo & Source Download

Type out the name of the states of U.S.A.
Local Auto Suggest Box Demo : Click Here
Remote Auto Suggest Box Demo : Click Here

Download Source Here

Tutorial : Introduction to AJAX in Ruby on Rails with Prototype, Script.aculo.us

Heya,
After a long time I had the time to update my blog. I have been working on my project presentation for the past 2 weeks. The entire presentation was developed in Flash CS3 coded in ActionScript 3. It was ages since I had used Flash and I was quite astonished how it had changed over the years. I`ll be soon posting some tutorials on Flash, so do keep an eye out

Anyways apart from being a bit off-topic, This tutorial deals with AJAX implementation in Ruby on Rails 2. While I was learning RoR, I had lot of issues of properly having AJAX implementation in my projects. This tuorial is for those people out there.

In this tutorial, I`ll just show some very simple Script.aculo.us Animation Implementations in RoR.
View Demo

Tutorial : AJAX interface/menu using jQuery/PHP

Hello Guys,

I have been busy with college lately, since this is my last year in college, I need to do a very cool project to get some good marks . Anyways that doesn`t mean I won`t be postin tutorials here . Want to present your data using AJAX/PHP/MySQL by just coding few lines ? Well here it is. This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/MySQL to store the data and call it. In this tutorial I`ll teach you how to do so with PHP. So lets begin !

You can check the demo HERE.
You can download these files HERE

Index

1. Create the HTML page – index.html
2. • The CSS
   • The HTML
   • The Javascript
   • Final interface.html page
3. Create the PHP File – boo.php

Exploring Javascript Frameworks : jQuery 1.2.6

Hey guys,

You might be wondering where the hell are the Rails Tuts ! But before that, some of you might have read the Tutorial : Introduction to AJAX with PHP, if you think coding AJAX is tough, think again ! Recently I have been doing a lot of research about different javascript frameworks which will help me ease AJAX and I came across JQuery and Prototype. It seems they were very commonly used by lot of people. Not only that, these frameworks, besides just providing AJAX they have a lot of cool features. So I decided to explore them.

This post explores some neat tricks I could do using jQuery ! So read on guys if you wanna learn

Index

• Introduction
• What is jQuery ?
• Download jQuery ?!
• Playing with jQuery ?!
• jQuery Effects ! ?