Archive for the ‘AJAX’ Category
Looking for Open Source Charting system? Here it is
Filed under: AJAX, PHP | Tags: charting, flash, free, open source, reporting
Comments (5) After a bit of research and trying with different charting and reporting libraries in Java, C++ etc, I finally found a library which is not only powerful but extremely simple as well.
I must tell you, I have started using it and it is damn good.
The best part being that it has so much of native support to PHP that anyone who loves coding in PHP should fall in love with this graphing library.
VIsit the above URL link and see some demos of how good it is 
Did I tell u that it is totally free, even for commercial use? Simply Awesome. Go check it out.
Cheerz
Shri
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Simple Ajax with YUI!!!
Filed under: AJAX, UI, Yahoo | Tags: AJAX, begineers, Code, simple, yui
Comments (3) For those of you, who want to get started with YUI and Ajax, this would surely prove helpful.
<html><head>
<title>Lets learn YUI</title>
</head>
<body>
<div id="mydiv">
Add some Text or Images if you want to replace dynamically</div>
<a href="Loading.html" onclick="return YUI();">My first AJAX</a>
<script src="build/yahoo/yahoo-min.js" type="text/javascript"></script>
<script src="build/event/event-min.js" type="text/javascript"></script>
<script src="build/connection/connection-min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function YUI(){
var loadUrl = "Loading.html";
var callback = {
success: function(o) {
document.getElementById('mydiv').innerHTML = o.responseText;
},
failure: function(o) {
alert("AJAX doesn't work"); //FAILURE
}
}
var transaction = YAHOO.util.Connect.asyncRequest('GET', loadUrl, callback, null);
return false;
}
//]]>
</script>
</body>
</html>
This is how one can simply make AJAX calls using YUI. The code is simple and self explanatory. If you need any help with this, please drop in comments.
Cheerz
Shri
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Yahoo SDK & YUI are simply awesome!!!!
Filed under: AJAX, FOSS Stuff, Javascript, MySQL, PHP, Techie, Tutorial, Web 2.0, Yahoo |
Comments (1) I must appreciate the fact on how much Yahoo gives freedom and power to developers through libraries and toolkits.
I am currently using YUI and Yahoo SDK for building a small application and I am highly impressed with the libraries.
For sure Y! are doing great job, making our life lil more simpler
I have been using some libraries like Rico, scriptaculous, Dojo and trust me when I say, YUI stands tall here.
If you havent tried it yet, get yourself hooked on http://developer.yahoo.com. Loads of tutorials, code, demos. For FREE
Try it now…
Cheerz
Shri
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Why should bloggers have all the fun????
Filed under: AJAX, Code, FOSS Stuff, Fun, How-To's, Javascript, Techie |
Comments (4) And, when I use the word bloggers here, it refers to people who are using http://blogger.com
After the launch of Google indic translator, now bloggers can easily type in Hindi but what about WordPress users? <wink>I perosnally love wordpress platform</wink>
So, now Im trying to create a plugin by integrating my project OpenKey with TinyMCE{ the editor which WP is using}
Yes, we already have one such thing, thats from Indic Joomla group. But that doesnt fill the gap. So Im trying to that
For now, you take a look at how it would look when we are using it.
The picture you are looking at is TinyMCE editor being hacked for indic purpose.
What do u think about it? Would it be useful for u? Drop in ur comments
Cheerz
Shri
30 Day Project : Starts Today!!!
Filed under: AJAX, Code, Inspirational, Localization, Techie, Web 2.0 |
Comments (1) “Leave complex problems to BIG people, try to solve simple-small issues”
Yes, thats exactly what I am starting today. NO big deal. Just simple applications.
To start with today I got hooked with a small problem. So I got this idea.
I wont reveal much of what the app will be, what it shud be, or how I wud be wasting my time
The idea is to get something UP & Running,Quickly, very Quickly and then can keep on improving it!!!!
So write to u in detail on 15th September!!!
Keep guessing!!!!
Cheerz
Sridhar
<Hint>No Rocket Science, it has something to do with IndicComputing!!!!! </Hint>
Web Design Tip #4: Using ToolTips Helps a LOT!!!!
Filed under: AJAX, CSS, Designing, Script.aculo.us, Techie, Tutorial, UI, Web 2.0 |
Comments (1) ToolTips are really useful. If you are considering of making a web start-up. This tip would surely come in handy.
According to wikiperdia:
” The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over “
Where can we use ToolTips?
Most of the time, designers are not sure when we should use ToolTips. Lets us imagine a scenario where in user has to fill details. It would be really nice to put down a form tooltip to guide user on do’s-n-dont’s.
UserName <input type=”text”>
Now, if we apply a form tooltip, at the right-hand side a tip would appear when the user clicks on the text box.
“Choose username as smart as ur”
This not only helps in guiding the user about the details but also helps in creating humor
Which are the free ToolTips we can use?
Im using YUI{Yahoo UI library} and it has some really powerful features for tooltips. Alternatively one can also use the below mentioned libraries which can surely help in grooving the UI.
1. ProtoTIP : Simple, sleak, beautiful, can add effects and AJAX support. Good for Prototype+ Scriptaculous libraries {Im using it as well}
2. Ask The CSS Guy : ONLY useful for forms
3. Nifty Corners Cube: Awesome library perfect for all rounded-corner needs
4. Last but not least, Google it
If you know of any other library, drop in comments, I shall update the post.
Related Posts:
Web Design Tip#1: Yellow Fade Technique
Web Design Tip#2: Alternative Row colors for Rowset
Web Design Tip#3: Epicentric Designing
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Web 2.0 + Ajax = CRAP!!!
With nice weather around, lot of start-ups are growing like mushrooms, I generally keep track of web start-ups.
Myth#1
Build something using php, mysql and ajax, call it web 2.0 and it is a potential future google. Crap!!!
Ajax is nice, very nice. It is a screwdriver to speed up applications. Lot of people who hardly know about serious programming think ajax is about “effects”.
While a mail exchange of thoughts, Sidu raised this point.
Yes, I totally agree. Ajax has a better taste. Out of total 70 million blogs, if I guess around 30 million blogs will be on technology. Not everyone of those 30 million is a serious ajax programmer. But still write about ajax. This leads to free publicity and creating lot of hype about the looks than actual features
Myth#2
Use any ajax library, add fade effect and it gives you edge over competitor!!!! Again, crap.
Yes, adding fade effect is awesome, but even more important thing is knowing where to apply fade effect. That one can only know when you are seriously involved in coding.
Myth#3
I know ajax, I read gigaom, ajaxian etc etc. Biggest crap!!!!
Lot of people are “ajax experts”, “Gurus” but when it comes to talking about Ajax with showing live working code. Naa, I am busy!!!!
I personally feel un-conferences like Barcamps etc should encourage lot of working code, demos, workshops than mere PPT sessions. Yes, PPT’s are neeeded but as a support let people do hands-on, see how things works. Than theory!!!!
If you have ever felt the same, or came across situations I have mentioned, Drop in your views in the comments.
Cheerz
Sridhar
Book Review : AJAX In Action
Filed under: AJAX, Blogging, Books, Education, Fun, India 2.0, Personal, Prototype, RICO, Techie, Tutorial |
Leave a Comment 
I have recently finished reading this book “Ajax In Action” By Dave Crane, Eric Pascarello and Darren James.
I thought I would share some key points from the book with everyone.
I recommend this book to everyone, who wants to learn Ajax or for those who have already fallen in love with it
The book talks about the basics as introduction and example code are given to explain various ajax libraries covered, which includes Prototype, Rico, Dojo, Sajax etc.
It is also written keeping in mind only about the client-side programs and not heavily on server-side, which helps individuals to use it with any of these PHP/Asp/JSP etc.
This 680 pages book is what you need to master the concepts and start using ajax in your web apps.
Cumon, u still waiting for more reviews??? Go and buy here
Its a weekend, I have some plans too.
Happy Weekend!!!!
Cheerz
Sridhar
Tutorial: How-To make a Tag Cloud using PHP & MySQL
Filed under: AJAX, Designing, FOSS Stuff, How-To's, Javascript, MySQL, PHP, Techie, Tutorial, UI, Web 2.0 |
Comments (49) How to make Tag Cloud using PHP & MySQL
Tag Clouds are pretty common now-a-days in almost all the web 2.0 company sites. Be it Technorati, Zoom CLouds, WordPress, Blogger etc.
Why Tag Clouds are important?
Pretty much for the same reasoon: Appealing Users.
On seeing all these even I have decided to introduce the Tag Cloud feature in our project.
Now, the very important question: How do we code to create a Tag Cloud using PHP & MySql?
Here I will show you how to code it.
First the logic:
1. Collect all the tags & Count{how-many times it has been tagged} from DB{MySQL}
2. Put them into a array {PHP}
3. Calculate the maximum and minimum count of the tags used
4. Now, loop through each tag and just change the size of the font.
5. Define a simple class say “wrapper” which will contain the tag clouds
6. Call the function to generate the tag cloud. {Javascript}
Now, since Im falling short of time, so I will cut the crap and you guys take the code directly.
Yes, a word from me, I will surely update it as time permits in full detail.
Cheerz
Srinix
PS: Download the Code here: Tag Cloud Code
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
PHP and Script.aculo.us Book
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Web tutorials *Yawn Yawn*: Webonic
Filed under: AJAX, Blogging, CSS, Designing, Education, FOSS Stuff, How-To's, Javascript, MySQL, PHP, Personal, Techie, Tutorial, Web 2.0, Webonic |
Comments (3) Do u also Yawn thinking of tutorials available on web? Be it Php, Mysql, CSS etc, Its all same stuff, again and again in new fonts!!!!
Its time for some real new useful stuff and not same yawning.
I have started a new blog, which I call it as my technology playground.
Its important to write code, and Its even more important to build some useful code and share it with community.
Since, this blog is more personal. I will write and collect all the tutorials which I will be working/learning for buliding my own web product.
Webonic will contain tutorials, code, demos related to PHP, MySQL, AJAX & CSS. Its not user-generated/collected, all will be stuff I am working on. You are free to add if you want to.
Happy Hacking
Sridhar
How-To create Rounded Corners using RICO Library!!!
Filed under: AJAX, Designing, Education, FOSS Stuff, How-To's, Javascript, RICO, Techie, Tutorial, UI, Web 2.0 |
Comments (3) How-To create Rounded Corners using RICO Library!!!
In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!
1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty
In this tutorial, we will explore yet another AJAX library. RICO Library
RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.
In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.
1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.
OKay, so lets see the code:
Include all the files{Rico & Prototype} inside the html code.
<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”> {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”> {SRC should be ur prototype.js path}
</head>
so once, we are done with including the libraries to your html file.
Now, time to add some content to the Body of the html file.
<body>
<div id=”roundMe” style=”position:absolute;top:240px;left:35px;width:250px;background:’lightblue’;color:’red’;”>
<div id=”Content” style=”height:200px;width:250px;padding:8px;”>
Hello This is me, a Rounded Corner hell.
</div>
</div>
</body>
Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.
U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}
Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.
Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.
Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.
<script type=”text/javascript”>
Rico.Corner.round(’roundMe’); // The parameter is the id of the outer DIV tag
</script>
What else? Not much. Just save it and see the magic.
If you still want to keep on hacking other options, you are always welcome!!!
Just add these parameters to the same line.
Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});
What all other options one can add to Corners?
1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.
For more information. Visit Demos @officially site of RICO.
Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?
Sorry dude!!!
Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.
Cheerz
Sridhar
Download COde: ROunded Corner Using RICO Library
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
How to make a Modal Window using Prototype?
Filed under: AJAX, Education, FOSS Stuff, How-To's, Javascript, Prototype, Techie, Web 2.0 |
Comments (1) Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.
Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.
After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.
I must admit, these guys have done a great job!!! Thanks for sharing this.
Now, coming back to our tutorial.
You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.
Just add them to your html page.
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>
Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}
Some HTML files, lets us say About.html
<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>
Now the important task: Activating the Lightbox
<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>
Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.
We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.
De-Activating the Lightbox
<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.
Linking it to another Lighbox inside:
<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>
Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.
Now, AJAX stuff.
Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}
I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.
Cheerz
Sridhar
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
PHP and Script.aculo.us Book
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Tutorial: How to make Script.aculo.us Based Slideshow
Filed under: AJAX, Education, FOSS Stuff, Javascript, MySQL, PHP, Script.aculo.us, Techie, Tutorial, Web 2.0 |
Comments (26) Before you go on to read this article. If your a newbie to using Script.Aculo.us AJAX library, I would recommend my previous post on getting started with Script.Aculo.us.
Read the article here
Okay, so I presume that you have gone through the previous tutorial. In this tutorial we will see how to make a simple slideshow for our website. You can also download the script along with HTML file at the bottom of the tutorial.
Slideshow’s are pretty common among webstites today. But, most of them being in Flash. Since we can add the same beauty using AJAX I thought of giving it a shot.
So lets get started!!! Start Javascript functionality here!!!
<script type=”text/javascript”>
var slides = array(’slide1′,’slide2′,’slide3′); // we define a array with all the div-Id’s of the slides.
we have to define a variable “wait” so lets declare and assign some value to it.
var wait = 500; // interval and time in milliseconds
1. We need the slideshow to start as soon as the site is launched.
For that we have to define a javascript function.
function start_slideshow() {
setInterval(SlideShow(), wait); // This is a javascript function which acts as a timer.
}
Now, we need to define the actual functionality for the slideshow.
function SlideShow() {
Effect.Fade(Slides[i], { duration:1, from:1.0, to:0.0 });
i++;
if (i == 3) i = 0;
Effect.Appear(Slides[i], { duration:1, from:0.0, to:1.0 });
}
2. We have to add this to our html code.
<body onload=”start_slideshow()”>
3. Lets add some slides to the page.
<div id=”slideshow-content”>
<div class=”slide1″ id=”slide1″>
<h2>My First Slide</h2>
<p> Add some content for your first slide.
</p>
</div> // First slide div ends here
<div class=”slide2″ id=”slide2″ style=”display: none;”>
<h2>My Second Slide</h2>
<p> Add some content for your second slide.
</p>
</div> // Second slide div ends here
</div>
Imp Note: Note how we must use an outer DIV tag to use this. Its a must to have an outer DIV tag.
Now, just put all the code in one place and you can see your slideshow working!!!!
If you have tried/ have any suggestions to improve it pls drop in comments.
Cheerz
Shri
PS:
1] Planning to write a tutorial on slideshows based on images with various control effects.
2] You can also download the code in attachments.
Download the tutorial and see it working
Download: slideshow.txt
If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.
The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
PHP and Script.aculo.us Book
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Now, after CamStudio. its Script.aculo.us + OpenIndx
Filed under: AJAX, Education, Entrepreneurs, FOSS Stuff, OpenIndx, PHP, Script.aculo.us, Techie, Web 2.0 |
Comments (2) I was like busy for now 2 weeks, deciding which AJAX library to use with OpenIndx.
I have tried enough of them now, which includes Dojo, OpenRico, YUI, Script.aculo.us.
What features am I looking for in a Javascript AJAX library?
These features are a must for OpenIndx:
Drag-n-Drop
Fade-In/Fade-out
Flexible with PHP
Inline Editors/Multi-Line editor/ Full-Fledge editor integration(TinyMCE/FCkeditor)
Sliders
After all these screening I have decided to go with script.aculo.us.
After All its about UI, Honey!!!
So if you are one who likes the AJAX-powered functionality in WordPress. I must tell you even wordpress is using Script.aculo.us
Who else using Script.aculo.us?
To name some of the key projects WordPress, Apple etc.
So what does it mean anyway?
Expect beautiful UI and powerful functionality.
When will we see it?
Did I tell you the release date is June 07. Yes, it would just be a alpha version with all basic features first. Based on your feedback we will be modifying and adding new features on requests.
okay, so keep hanging around. Be good, Take care
Cheerz
Shri
OpenIndx + CamStudio = Better Learning!!!
Filed under: AJAX, Entrepreneurs, FOSS Stuff, India 2.0, News, OpenIndx, Techie, Web 2.0 |
Comments (4) We thought of getting OpenIndx married with some effecient recording application.
So OpenIndx finally gets married with CamStudio.
Few days back, I contacted Nick, the project admin of CamStudio and he showed his interest in the concept and outcome of integrating both the projects.
Why Do we need CamStudio with OpenIndx?
CamStudio is no doubt one of the best open-source video recording applications and OpenIndx’s project, Kourse, an e-learning management suite so thought having demo’s is far better than just having a jargon.
Now, when we decided to integrate CamStudio, we are defining some headers so that for an end-user its very easy to port the videos and the flash files inside web page.
Our only aim to bring CamStudio into picture is to help and make learning a more better experience.
Keep looking more at this space for more updates.
Cheers
Shri
PS: Special thanks to Nick, project admin of CamStudio, who will guide us as well on how to make OpenIndx better using camstudio.
