Tag: jquery

akWpLightBox : simple lightbox for wordpress

I always strive for simple solutions to all my problems, akWpLightBox plugin is result of one such endeavor.

For quite some time now I was looking for a plugin which is lightweight, and can show images in lightbox like effect, in my blog.

The effort of creating a javascript functionality for that was putting me off, then few days back I saw the prettyPhoto, it is a jQuery based plugin for creating the lightbox effects for the images.

This made my job pretty easier, now I can have my lightbox effect, all i needed to was convert it into a wordpress plugin. So I did some modifications to the prettyPhoto to suite my needs, and here is the result of my work. Check out an working example below.

(more…)

May 21, 2008
akModal: simplest alternative to thickbox
For those in hurry, download the plugin from jquery plugin page [download#11#nohits]

It is a modal pop up box. It can be used to display any url as popup box.

It’s simplicity lies in the fact that, we can use it to display forms etc, and then submit the forms, something like I used it for thesoko login box.

Here is an screenshot of akModal in action.

I had created this when I didn’t know enough javascript to use AJAX etc, for submitting a form. I also didn’t want to write very complex javascript for something that can be easily handled using a simple iframe.

Anatomy of akModal Box

Features
• Easy to create popup box
• No AJAX required for submitting forms

Dependencies
• DimScreen plugin(for blacking the background)
• Dimensions plugin(for center alignment)
• Interface plugin (for puff effect)

How to create it
This is the simplest process of all; you need to include all the dependencies along with akmodal.js file. Then just call
$.showAkModal(navurl,title,box_width,box_height) function onclick event.

navurl: it is the url to show in the popup box.
title: is the title to show for pop up box.
box_width & box_height: it is width and height of the pop up box that you want to show.

For example,
```
<a href='test.htm' id='ak_sign_in' onclick="$.showAkModal(this.href,'Sign In',230,170);return false;"> sign in</a>
```
(more…)
April 15, 2008
akeditable: Jquery inplace editor
Those of you in hurry to download the plugin or source can download it from plugins page of akeditable at jquery .

This is the plugin based on jEditable plugin created by Tuupola and Dylan Verheul. The purpose of create this plugin was to specifically solve the problem that i was facing, ie to give my users option button to save and or cancel, instead of using enter to save the content.

I will not say that akeditable is any improvement over jEditable, which is far better then what i have done. akeditable was meant to be used with situations similar to the way i have used it in celsias project or people section.

It works in exactly same fashion as jEditable, ie you click on the text to edit or a link and it converts the area into a from. Check out the live demo.

How To Use It
1. It is very simple, just call the akedit on click function of the element you want to convert in to editable area with the ID of the element.
```
<div id="editme" onclick="akedit('ajax.php?mode=eg1','editme',{
type : 'textarea',
name : 'usercomment',
width: '232px',
height: '80px',
submit:'save'
});"> THIS IS EDITABLE ON CLICK
</div>
```
2. Parameter to akedit function is the url: where you want to post the form data, the id of the element you want to convert into editable area and settings as hash like the value for submit button and other stuff.
```
akedit('ajax.php?mode=eg1','editme',{
     type : 'textarea',
     name : 'usercomment',
     width: '232px',
     height: '80px',
     submit:'save'
});
```
3. That’s it you are done.
Processing On Server
1. you get the post data as
  1. id, the id of the div you were editing and,
    id editme
2. <name that you specified in the setting> , which contains the value that user typed in the textarea or textbox.
```
usercomment	THIS IS EDITABLE ON CLICK i added this
```
Update(25 August 2009):Released the new version 1.1 of the plugin, and also made it compatible with jQuery 1.3.x
March 29, 2008
Jquery : An Introduction
Jquery according to me is javascript++ , a library that enhances the javascript without adding lot of burden to learn some new syntax and or way of coding, other then what you already know of javascript.

In other words, if you are beginning with javascript and looking for a javascript library that can help you jumpstart your value as javascript developer then look no further then jquery.

it makes advance javascript programming an easy task for beginners also.

This is the presentation that i gave at Gnunify’08.

here are some of the references to kick start your jquery journey.
1. jQuery Documentation
2. jquery tutorials for designers
3. jquery crash course
4. 50+ amazing jquery example (could not help but add it)
March 13, 2008