Category Archives: javascript

Firebase

Track or count online users in Firebase webapp

It’s a pretty common need to track online users of an web application. Sometimes for counting total online users, sometimes by isolated space, e.g., by chatroom or shared list. So, instead of doing similar things every time, I’ve written a javascript module to use in Firebase web applications – Gathering.js.

In this post, I’ll show how it can be used for various type of tracking needs with small code snippets.

BTW, if you are thinking what Firebase is, it’s a Google acquired app development platform for mobile and web. For web application, it’s providing ready made infrastructure with super fast realtime database, flexible Authentication, cross platform Cloud Messaging, static hosting, CDN… (almost) everything you need to develop an app (or a feature) quickly with robustness. You should give it a try.

Continue reading

BootstrapFileField – File input with preview and restrictions, no ajax

The file input is one of those HTML elements that are complex to style with CSS.
As a result, now a days we see many ajax uploader plugins (e,g, DropZone) that helps to modify appearance of file input. Now, what if I have a/some html fields in a regular form (no ajax upload required), but I want to make it look beautiful? Additionally I want to have other cool things that those ajax uploader provides like showing image thumbnails and restricting file types?

One ready-made solution is – BootstrapFileField. A jQuery plugin to enhance html file input to look like bootstrap button, showing image thumb and apply useful restrictions (e.g. file types, size, number of files etc.)

BootstrapFileField - File input with preview and restrictions

Check this live demo, it’s usability + simplicity!

Continue reading

Building Large Scale Javascript Application

Digital World 2014 was a 4 day (4th – 7th June, 2014) ICT event at Bangladesh. It was organized by ICT Division of Telecom and IT Ministry of the country. There was a full series of technical sessions with various interesting topics throughout the event.

One of them was Building Large Scale Javascript Application. It was presented by me together with Emran Hasan, CTO of eMicrograph. Here is the slide that I prepared in very short time.


Continue reading

Backbone.Marionette + RequireJS + Bootstrap boilerplate

Few days ago, I was searching around for a boilerplate setup for Backbone.Marionette with RequireJS. I was looking for something that is ready for use instantly without any prerequisite or additional dependency. I found few good solutions. But unfortunately none of them seems to be as simple and straightforward as I was expecting.

marionette is ready

So, I had to write my own boilerplate.
Continue reading

jQuery and jQuery Mobile on JSCon 2011, Dhaka

PHPXperts group  is one of the most active PHP community in Asia. They have arranged the first JavaScript Conference of Bangladesh on September 17, 2011 at AIUB Auditorium. It was a cool event with 250+ participants.

Our (me and Mohammad Zakir Hossain Raju) session was about jQuery and jQuery Mobile. Here is the slide –

BTW, SlideShare has featured this slide on homepage.

Continue reading

jQuery – Presentation at phpXperts Seminar, 09

At the phpXperts seminar 2009, I gave a talk on  “Blessings of modern javascript framework – jQuery” and it seemed well-received. I enjoyed giving the presentation very much!
Special thanks for all the organizers, group members and participants.

Here is the slide available for you.

Hope you’ll Enjoy the slides! Suggestions are welcome.

Extjs quick start guide for jQuery Developers

I’ve seen many people (including myself) trying out the power of jQuery for once and then getting stuck with it. Why not? It’s one of the coolest and smartest JavaScript library out there. However, I have broken out from the circle and found that Extjs is another great mentor in the field of JavaScript libraries. Especially, I think it’s UI components are unbeatable (Dojo can be a nearest candidate).

If you are habituated to think JavaScript coding in the syntax of jQuery, you can start working with ExtJS right now (with a few twist)!  What you need is some little tuning in concept and syntax. Today I will be trying to explain how to do this in 6 important points :

  1. Document is ready – How to get the our document ready and where to start.
  2. Selecting elements – How to select elements in Ext.
  3. Dom scripting – Changing on and in the element.
  4. Ext events – Assigning and firing events.
  5. Ext Components – The powerful alternate of jQuery UI.
  6. Ajax – Making Ajax request in Ext.

Ok, let’s dive in to deep of each of these points.

Continue reading

Front-end optimization with PHP Speedy – increase Yslow grade in 10 minutes!

Before I move into PHP Speedy, a small background won’t hurt much! Until a few days back, whenever I hear the word optimization, my brain quickly shows a few keywords in my mental screen: “query optimization, page caching, opcode, etc”. All these terms and the associated work relates to the optimization of a web application in the back-end. This has been serving my need pretty good, until I became aware about the excellent 13-point front-end optimization techniques from Yahoo (thanks Emran bhai).

At first I was a bit skeptical, but as soon as I started seeing the points – I knew its importance. Without much delay, I gave it a short in my latest project at work. And the tool that made it a less than 10 minute work is: PHP Speedy. I am literally speechless with it’s performance and way of working. Just in 10 minuets, It upgraded the Yslow grade of our project from 43 to 88.  Just like a magic touch!

php_speedy_logo_medium

Now, let’s see what Yslow Grade is (for those who are not yet using it) and how php-speedy helps to upgrade it. Hope this enlightens someone like me 😛

Continue reading

Interactive character limit for textarea using Jquery

For a textbox, character of a field can easily be limited with maxlength attribute. But maxlength doesn’t work for  a textarea. So, It needs an alternate way. For one of my project, I wrote a function for this purpose where I used jQuery. Here I am explaining how I did it.

Let’s look an example of this interactive solution here

OK. Now we will make this in 2 easy steps.

1. Import your jQuery file and write the function "limitChars(textid, limit, infodiv)" in the head section of your page.

This function takes 3 parameters. They are:

  • textid : (string) The ID of your textarea.
  • limit : (num) The number of character you allow to write.
  • infodiv : (string) The ID of a div, in which limit information will be shown .

  Here is the function:

<span style="color: #606060"> 1:</span> &lt;script language=<span style="color: #006080">&quot;javascript&quot;</span> src=<span style="color: #006080">&quot;Jquery.js&quot;</span>&gt;&lt;/script&gt;
<span style="color: #606060"> 2:</span> &lt;script language=<span style="color: #006080">&quot;javascript&quot;</span>&gt;
<span style="color: #606060"> 3:</span> <span style="color: #0000ff">function</span> limitChars(textid, limit, infodiv)
<span style="color: #606060"> 4:</span> {
<span style="color: #606060"> 5:</span> <span style="color: #0000ff">var</span> text = $(<span style="color: #006080">'#'</span>+textid).val(); 
<span style="color: #606060"> 6:</span> <span style="color: #0000ff">var</span> textlength = text.length;
<span style="color: #606060"> 7:</span> <span style="color: #0000ff">if</span>(textlength &gt; limit)
<span style="color: #606060"> 8:</span> {
<span style="color: #606060"> 9:</span> $(<span style="color: #006080">'#'</span> + infodiv).html(<span style="color: #006080">'You cannot write more then '</span>+limit+<span style="color: #006080">' characters!'</span>);
<span style="color: #606060"> 10:</span> $(<span style="color: #006080">'#'</span>+textid).val(text.substr(0,limit));
<span style="color: #606060"> 11:</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span>;
<span style="color: #606060"> 12:</span> }
<span style="color: #606060"> 13:</span> <span style="color: #0000ff">else</span>
<span style="color: #606060"> 14:</span> {
<span style="color: #606060"> 15:</span> $(<span style="color: #006080">'#'</span> + infodiv).html(<span style="color: #006080">'You have '</span>+ (limit - textlength) +<span style="color: #006080">' characters left.'</span>);
<span style="color: #606060"> 16:</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">true</span>;
<span style="color: #606060"> 17:</span> }
<span style="color: #606060"> 18:</span> }
<span style="color: #606060"> 19:</span> &lt;/script&gt;

Remember, the script is using jQuery. So be careful about the path of jquery at first line of this script.
 
2. Bind the function to the keyup event of your textarea. Do this in jQuery’s ready event of document. Just like this:
<span style="color: #606060"> 1:</span> $(<span style="color: #0000ff">function</span>(){
<span style="color: #606060"> 2:</span> $(<span style="color: #006080">'#comment'</span>).keyup(<span style="color: #0000ff">function</span>(){
<span style="color: #606060"> 3:</span> limitChars(<span style="color: #006080">'comment'</span>, 20, <span style="color: #006080">'charlimitinfo'</span>);
<span style="color: #606060"> 4:</span> })
<span style="color: #606060"> 5:</span> });

Here my textarea’s id is ‘comment’ , limit of characters is 20 and limit information will shown in a div whose id is ‘charlimitinfo’. That’s all, we have made an "Interactive character limiter" for our textarea using Jquery.
 
If you are not using jQuery for your site, it will not be wise to include it only for this script. You can get the same functionality from javascript without jquery. Look at this example. It looks like and works 100% as the previous though not using jquery.
Here you need just 2 changes. First, change the function "limitChars" as follows :
<span style="color: #606060"> 1:</span> <span style="color: #0000ff">function</span> limitChars(textarea, limit, infodiv)
<span style="color: #606060"> 2:</span> {
<span style="color: #606060"> 3:</span> <span style="color: #0000ff">var</span> text = textarea.value; 
<span style="color: #606060"> 4:</span> <span style="color: #0000ff">var</span> textlength = text.length;
<span style="color: #606060"> 5:</span> <span style="color: #0000ff">var</span> info = document.getElementById(infodiv);
<span style="color: #606060"> 6:</span>&#xA0; 
<span style="color: #606060"> 7:</span> <span style="color: #0000ff">if</span>(textlength &gt; limit)
<span style="color: #606060"> 8:</span> {
<span style="color: #606060"> 9:</span> info.innerHTML = <span style="color: #006080">'You cannot write more then '</span>+limit+<span style="color: #006080">' characters!'</span>;
<span style="color: #606060"> 10:</span> textarea.value = text.substr(0,limit);
<span style="color: #606060"> 11:</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span>;
<span style="color: #606060"> 12:</span> }
<span style="color: #606060"> 13:</span> <span style="color: #0000ff">else</span>
<span style="color: #606060"> 14:</span> {
<span style="color: #606060"> 15:</span> info.innerHTML = <span style="color: #006080">'You have '</span>+ (limit - textlength) +<span style="color: #006080">' characters left.'</span>;
<span style="color: #606060"> 16:</span> <span style="color: #0000ff">return</span> <span style="color: #0000ff">true</span>;
<span style="color: #606060"> 17:</span> }
<span style="color: #606060"> 18:</span> }

 
And finally, call the function manually on keyup event of your textarea. Use "this" keyword for textarea instead of id when calling the function. example:
<span style="color: #606060"> 1:</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">textarea</span> <span style="color: #ff0000">name</span><span style="color: #0000ff">=&quot;comment&quot;</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&quot;comment&quot;</span> <span style="color: #ff0000">onkeyup</span><span style="color: #0000ff">=&quot;limitChars(this, 20, 'charlimitinfo')&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #606060"> 2:</span> <span style="color: #0000ff">&lt;/</span><span style="color: #800000">textarea</span><span style="color: #0000ff">&gt;</span>

Finished. We made the solution again without dependency of any javascript framework.

Please let me know if you have an idea to make it better. 

jQuery controlled Dependent (or Cascading) Select List 2

Thank you all. Thanx for using, commenting and visiting my script jQuery controlled Dependent (or Cascading) Select List from my old bolg http://php4bd.wordpress.com and here.

I am getting a lots of request and questions from visitors about adding some features and some other problems. Sometimes I faced some problem when using this script myself. So, I have made some changes here. I hope, this change will help you to overcome some problems of previous version of this script. The main features added in this version are:

  1. It will keep in child list box only sub items of selected parent value when initializing.
  2. Added a 4th parameter to input a selected value for child list box.
  3. When "isSubselectOptional" is true, add a default value ‘none’ for ‘– Select –‘ option of child list box.
  4. Automatically focus the child list box when a value is selected from parent list box.
  5. More effective for multilevel association.

Click here to see a demo of multilevel association using this function. here is same demo for jquery 1.3.x users.

Here is the modified function (for < jquery 1.3):

<span style="color: #606060"> 1:</span> <span style="color: #0000ff">function</span> makeSublist(parent,child,isSubselectOptional,childVal)
<span style="color: #606060"> 2:</span> {
<span style="color: #606060"> 3:</span> $(<span style="color: #006080">&quot;body&quot;</span>).append(<span style="color: #006080">&quot;&lt;select style='display:none' id='&quot;</span>+parent+child+<span style="color: #006080">&quot;'&gt;&lt;/select&gt;&quot;</span>);
<span style="color: #606060"> 4:</span> $(<span style="color: #006080">'#'</span>+parent+child).html($(<span style="color: #006080">&quot;#&quot;</span>+child+<span style="color: #006080">&quot; option&quot;</span>));
<span style="color: #606060"> 5:</span> 
<span style="color: #606060"> 6:</span> <span style="color: #0000ff">var</span> parentValue = $(<span style="color: #006080">'#'</span>+parent).attr(<span style="color: #006080">'value'</span>);
<span style="color: #606060"> 7:</span> $(<span style="color: #006080">'#'</span>+child).html($(<span style="color: #006080">&quot;#&quot;</span>+parent+child+<span style="color: #006080">&quot; .sub_&quot;</span>+parentValue).clone());
<span style="color: #606060"> 8:</span> 
<span style="color: #606060"> 9:</span> childVal = (<span style="color: #0000ff">typeof</span> childVal == <span style="color: #006080">&quot;undefined&quot;</span>)? <span style="color: #006080">&quot;&quot;</span> : childVal ;
<span style="color: #606060"> 10:</span> $(<span style="color: #006080">&quot;#&quot;</span>+child+<span style="color: #006080">' option[@value=&quot;'</span>+ childVal +<span style="color: #006080">'&quot;]'</span>).attr(<span style="color: #006080">'selected'</span>,<span style="color: #006080">'selected'</span>);
<span style="color: #606060"> 11:</span> 
<span style="color: #606060"> 12:</span> $(<span style="color: #006080">'#'</span>+parent).change( 
<span style="color: #606060"> 13:</span> <span style="color: #0000ff">function</span>()
<span style="color: #606060"> 14:</span> {
<span style="color: #606060"> 15:</span> <span style="color: #0000ff">var</span> parentValue = $(<span style="color: #006080">'#'</span>+parent).attr(<span style="color: #006080">'value'</span>);
<span style="color: #606060"> 16:</span> $(<span style="color: #006080">'#'</span>+child).html($(<span style="color: #006080">&quot;#&quot;</span>+parent+child+<span style="color: #006080">&quot; .sub_&quot;</span>+parentValue).clone());
<span style="color: #606060"> 17:</span> <span style="color: #0000ff">if</span>(isSubselectOptional) 
<span style="color: #606060"> 18:</span> $(<span style="color: #006080">'#'</span>+child).prepend(<span style="color: #006080">&quot;&lt;option value='none'&gt; -- Select -- &lt;/option&gt;&quot;</span>);
<span style="color: #606060"> 19:</span> $(<span style="color: #006080">'#'</span>+child).trigger(<span style="color: #006080">&quot;change&quot;</span>); 
<span style="color: #606060"> 20:</span> $(<span style="color: #006080">'#'</span>+child).focus();
<span style="color: #606060"> 21:</span> }
<span style="color: #606060"> 22:</span> );
<span style="color: #606060"> 23:</span> }

Again, here is the function for jquery 1.3.x. Thanks a lot to TuxX for tuning up it to work with jquery 1.3.x.

[javascript]
function makeSublist(parent,child,isSubselectOptional,childVal)
{
$("body").append("<select style=’display:none’ id=’"+parent+child+"’></select>");
$(‘#’+parent+child).html($("#"+child+" option"));

var parentValue = $(‘#’+parent).attr(‘value’);
$(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child).val(childVal).attr(‘selected’,’selected’);

$(‘#’+parent).change(function(){
var parentValue = $(‘#’+parent).attr(‘value’);
$(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
if(isSubselectOptional) $(‘#’+child).prepend("<option value=’none’ selected=’selected’> — Select — </option>");

$(‘#’+child).trigger("change");
$(‘#’+child).focus();
});
}
[/javascript]

And initialize the association on ‘$(document).ready’, as following example:

<span style="color: #606060"> 1:</span> $(document).ready(<span style="color: #0000ff">function</span>()
<span style="color: #606060"> 2:</span> {
<span style="color: #606060"> 3:</span> makeSublist(&#x2019;parentID&#x2019;,<span style="color: #006080">'childID&#x2019;, true, '</span>selected_val_of_child');
<span style="color: #606060"> 4:</span> });

If you want to create multilevel association, start the initialization from child most order. such as:

<span style="color: #606060"> 1:</span> $(document).ready(<span style="color: #0000ff">function</span>()
<span style="color: #606060"> 2:</span> {
<span style="color: #606060"> 3:</span> makeSublist(<span style="color: #006080">'child'</span>,<span style="color: #006080">'grandson'</span>, <span style="color: #0000ff">true</span>, <span style="color: #006080">''</span>); 
<span style="color: #606060"> 4:</span> makeSublist(<span style="color: #006080">'parent'</span>,<span style="color: #006080">'child'</span>, <span style="color: #0000ff">false</span>, <span style="color: #006080">'3'</span>); 
<span style="color: #606060"> 5:</span> });

For details instruction and example of using this script, please visit the previous version. Feel free to ask me if any problem with using this script or any bug you found.

UPDATE [09/10/09] : Updated function added for jquery 1.3.x