theCancerus

Category: jquery

  • 5 key skills of a successful web application developer

    Most probably you will be knowing about all these skills already, it is common sense, still I have found so many developers who just know just one server side language(usually java or .net) and then they think themselves as superman/superwoman.

    In web application development, that is just one thing. You need to know about lot more things before you can consider yourself successful.

    So, if you know them already that’s good, you don’t need to read any further otherwise continue reading to know why each of these skills are important for you(the web developer).

    Here are the skills

    1. the structure : HTML
    2. the presentation: CSS
    3. the behavior: JavaScript

    With these three skill you have ability to become the super cool static website developer or a front end developer

    1. the database: SQL
    2. the server-side language : PHP( other options are JSP/ASP/PERL/RUBY choice is yours, as all the fight for best happens here)

    These two skill will make you a web developer.

    All five of these skills will make you a most prized web developer, in your organization.

    (more…)

  • 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.

    Example of akWpLightbox

    (more…)

  • 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.

    akModal: simplest alternative to thickbox

    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

    Anatomy of akModal

    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…)

  • Simplified AJAX For WordPress Plugin Developers using Jquery

    I am assuming you know how to write a WordPress plugin, and now you are wondering how to use ajax to add that sexy feature that will make your plugin look a bit kool.

    I faced the same problem, with my akWpUploder plugin. I googled but could not find anything interesting, or should I say, simple way of adding ajax to my plugin. So I dig into the WordPress code base for solution, as auto-saving feature of WordPress was one such thing that I wanted to use.

    There I found what I was really looking for, a very simple way of using Ajax to get things done.

    Problem: How to use WordPress functions in your plugin when using ajax

    Are you satisfied with your knowledge? No, then spent 15 minutes every day on PHPCamp a knowledge-sharing website for our own PHP community

    Let me explain the problem first, while I was working on my plugin I needed to insert the photo data into the database. To do this I needed to use WordPress database functions, but the way I knew to use ajax(i.e. creating a separate PHP file that handles the ajax request), it was bit difficult and messy. It would have involved either making a direct connection with the database or including the WordPress config file.

    I was not happy with either of these options, I needed a simpler solution.

    (more…)

  • 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 .

    akeditable: Jquery inplace editor

    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

    3. TubeSpy by Ajaxonomy

      Tubespy is a jQuery application that can be used to see what people are watching on youtube now. This application is created by cool guys at Ajaxonomy Labs they are also the creator of del.icio.us Spy, which is open source and you can download the source code here.

      It is built using jquery framework, UI library and youtube API. It shows how easy it is to build cool application with jquery.

      Check out the Tubespy here . Read more about Tubespy here.

    4. akslideshow

      This is a simple jquery implementation of JonDesign’s Smooth SlideShow Library . It aims only to replicate the timed mode feature of jon’s plugin.

      This is an early alpha release and it works only on firefox now in Beta and it works with both firefox and IE. check out the demo here. You can download the plugin from http://code.google.com/p/akslideshow/downloads/list .

      It has been tested with jquery 1.2.3.

      How To Use It

      1. first include the stylesheet 
        <link href="akslide.css" rel="stylesheet" type="text/css" />
      2. now include the jQuery and akslideshow.js file 
        <script src="jquery-1.2.3.min.js" type="text/javascript">
</script>
<script src="jquery.akslideshow.js" type="text/javascript">
</script>
      3. We will initialize the gallery now, for that we need to pass three parameters
        1. an array with list of image paths to be used for slideshow 
          var imglist=new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
        2. two more arrays with description and title in same order in which they need to be displayed. 
          var caption=new Array('A Dove Amongst the Host?','Natura','the same blooming tree again','Refreshed','P1000018');
var titles=new Array('seeks2dream','fabrizio.pincelli','aatual666','seeks2dream','munness');
        3. and a code to initialize the slideshow 
          $(function(){
$('#gallery').initSlideShow({img:imglist,cap:caption,title:titles});

});
      4. finally we need to have a div with id specified above for holding the slideshow. 
        <div id="gallery" >HERE GALLERY WILL COME</div>

      Still To Do

      1. make it work in IE 6 and above
      2. sliding needs to be smooth
      3. center the image properly, instead of left or right alignment

    5. 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)