Ali Aman Jalbani

Jquery textarea maximum character limit

Ali Aman — Wed, 13 Jul 2011 18:56:27 +0000

Simple

$layout.brandtext.keyup(function(){
var maxchar=50;
$(this).prev(‘div.limit’).html(($(this).val().length>=maxchar)?’cannot be greater than ‘+maxchar+’ characters’:”);
$(this).val($(this).val().substr(0, maxchar));
});

Corss domain ajax style file upload with easyXDM

Ali Aman — Thu, 23 Jun 2011 22:34:39 +0000

the use case is to upload a file across different domains without refreshing the window(ajax style)
this is accomplished by the http://easyxdm.net/wp/ plugin.

Client Code
==============================================

  
  
  



Server Side Code
===============================================

    
        
        
        
        
    

ACTION
=============================================================================
class xdmuploadComponent extends PageComponents {
    public function execute($request) {
        try{
            $file = $_FILES;
            $fileH = new ImageUpload($file, 'logo' ,BRAND_IMAGES_FOLDER, true);
            $successmsg = $fileH->uploadFile();
            $this->successmsg = $successmsg;
        }catch(Exception $e){
            print_r($e);
        }
    }
}

Jquery cool Flashmessage

Ali Aman — Tue, 21 Jun 2011 21:27:50 +0000

Just one line of code and you have a brilliant message that slidesDown.. and then fades and slidesUp

$('#somediv').css({'display':'none','opacity':'1'}).html('some text').slideDown(1000 , function(){}).animate({opacity: 0.1},5000,function(){$layout.response.slideUp('slow',function(){});});

Cool Fonts! with cufon…

Ali Aman — Mon, 13 Jun 2011 18:45:04 +0000

I’ve tried various font engines and font rendering engines. This one (cufon) is by far the best.

It translates each letter to an html canvas tag and renders a very rich look and top notch UE. No fret its compatible with IE5+ and all browsers.

JsonP with Mustache templating engine and JQuery.

Ali Aman — Mon, 13 Jun 2011 18:36:57 +0000

Recently discovered Mustache templating engine.
I think its really neat and should replace inline server-side scripts whenever possible.

Here is a sample code to use jsonp and Mustache to fetch and iterate over the returned dataset.

Server Side:

    private function _getInitContent(){
        $init =
        array(
            'title' => 'Administrator Dashboard!!!',
            'menu'  =>
            array(
                array(
                    'title'     => 'Menu#1',
                    'submenu'   =>
                        array(
                            array(
                                'title'     => 'Menu#1.1',
                                'link'   => '/abc'
                             ),
                            array(
                                'title'     => 'Menu#1.2',
                                'link'   => '/abc'
                            )
                        )
                    ),
                array(
                    'title'     => 'Menu#2',
                    'submenu'   =>
                        array(
                            array(
                                'title' => 'Menu#2.1',
                                'link'  => '/abc'
                                 ),
                            array(
                                'title' => 'Menu#2.2',
                                'link'   => '/abc'
                                )
                            )
                        )
                    )
                );
        $val = $this->_params['callback'].'('.json_encode($init).')';
        return $val;
    }

Javascript Code:

_init = function(){
    $.jsonp({
      "url": 'https://someurl/login?callback=?',
      "data": {
          "phi_action": "app/adminDashboard",
          "subAction":  "_getInitContent"
      },
      "success":
        function(dat){
            var rend = Mustache.to_html($layout.wrapper.html(), dat);
            $layout.wrapper.html(rend);
            fonts();
            $layout.wrapper.css('visibility', 'visible');

        }
    });
}

This is the markup with the mustache script


     {{title}} 
    {{#menu}}
        {{title}}
        
            {{#submenu}}
                {{title}}
            {{/submenu}}
        
    {{/menu}}

JQuery phone format

Ali Aman — Mon, 28 Feb 2011 22:11:45 +0000

Here is something that I just worked on today.
The class of your container will be ‘phone’ and the rest is formatted.

var plugins = {
 formatphone: function(){
   window.layout = { phone   : $('.phone') };        
   layout.phone.each(function(){            
   var numb = $(this).html().match(/\d/g).join('');            
   $(this).html('(' + numb.slice(0, 3) + ') ' + numb.slice(3, 6) + '-' + numb.slice(6, 10));        });
 }};

call this method:

plugins.formatphone();

Welcome…

Ali Aman — Mon, 28 Feb 2011 21:53:10 +0000

So I start blogging.

I welcome you here.