Jquery textarea maximum character limit
Posted by on July 13, 2011
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
Posted by on June 23, 2011
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 ============================================== <form id="frmUpload" action="https://someurl/xdmupload" method="post" name="corporatebranding" enctype="multipart/form-data" target="upload_target"> <input type="hidden" name="MAX_FILE_SIZE" value="{{max_file_size}}" /><!--2MB--> <input type="hidden" name="mode" value="save" /> <input id="btnSubmit" class="cancel buttonsprite" type="submit" value="" /> </form> <script type="text/javascript"> _XDM = function(){ var btn; var remote = new easyXDM.Rpc({ remote: baseurl+"/xdmupload", swf: baseurl+"/en_US/js/easyxdm/easyxdm.swf", onReady: function(){ //display the upload form var frm = document.getElementById("frmUpload"); frm.action = baseurl+"/xdmupload"; $layout.frmUpload.submit(function(){ $layout.btnSubmit.attr('disabled', 'disabled'); document.body.style.cursor = 'wait'; }); } }, { local: { returnUploadResponse: function(response){ document.body.style.cursor = 'default'; $layout.btnSubmit.removeAttr("disabled"); $layout.previewimg.attr('src', response.filename); if($layout.filecontrol.val()!=""){ //$layout.response.css({'display':'none','opacity':'1'}).html(response.msg).slideDown(1000 , function(){}).animate({opacity: 0.1},8000,function(){$layout.response.slideUp('slow',function(){});}); $layout.brndresponse.html(response.msg); } $layout.filecontrol.val(''); fonts(); } } }); } </script> Server Side Code =============================================== <html> <body> <script type="text/javascript"> // the `rpc` object will be referenced by the upload handler var rpc = new easyXDM.Rpc({ swf: "https://someurl/en_US/js/easyxdm/easyxdm.swf" }, { remote: { returnUploadResponse: {} } }); </script> <iframe name="upload_target" src="about:blank"> </iframe> <script> parent.rpc.returnUploadResponse({ status: "<?= $successmsg['success'] ?>", filename: "<?= $successmsg['filename'] ?>", msg: "<?= $successmsg['msg'] ?>" }); </script> </body> </html> 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
Posted by on June 21, 2011
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…
Posted by on June 13, 2011
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.
Posted by on June 13, 2011
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
<div id="wrapper" class="mustachetpl">
<h1 class='tgbf'> {{title}} </h1>
{{#menu}}
<div class='tgf'>{{title}}</div>
<ul>
{{#submenu}}
<li class='tgf'>{{title}}</li>
{{/submenu}}
</ul>
{{/menu}}
</div>
JQuery phone format
Posted by on February 28, 2011
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();
