Tag Archives: Javascript

Integrating InMobi Ads into jQueryMobile and MoSync based app

Recently I was developing a HTML5 app for a client using jQueryMobile and MoSync Reload with Wormhole Library (an amazing client which let you develop about 70% times faster compared to using native procedures) when I struck with a problem of placing InMobi ads into jQueryMobile sub-pages. If you are familiar with jQueryMobile you would know that it normally fetch pages on ID bases through AJAX and this trick allows it make smooth transitions. While on non-AJAX pages you can simply integrate InMobi’s JavaScript SDK which would be simple JavaScript snippet which you include in your pages and mobile ads will start rolling, however, in case of  AJAX based pages, ad providers normally detect AJAX requests and then refuse to serve ads because of the threat of misuse. I went as far as signing up for an AdMob account but found similar problem there.

I googled through, despite of some questions on stackoverflow, none had the solution (except the solution of turning to non-AJAX based pages which I couldn’t do in any case), I fired up an email to InMobi support and surprisingly got reply with-in an hour linking me to InMobi Mobile Web API.

InMobile Web API require POST request with a certain set of parameters and then return ads in XML format which you then need to parse and display ads wherever you want (including your jQueryMobile sub-pages).

Following is the dissection of request to API:

Basically InMobi Mobile Web API require you to make a POST request along with following parameters:

  • mk-siteid is the ID which you get after registering your app with InMobi through their website, for the purpose of development you can use their test ID which is: 4028cba631d63df10131e1d3191d00cb
  • mk-version is unknow to me but it remains static as it is.
  • h-user-agent is your browser agent which you can easily get through navigator.userAgent
  • mk-carrier is the user IP which you can get through following simple JSON call:
      userIP = data.ip;

and format can always be XML as response will always be.

Moving forward we all know how to make POST request using jQuery along with above parameters:

$.post("http://w.sandbox.inmobi.com/showad.asm", { "mk-siteid": "4028cba631d63df10131e1d3191d00cb", "mk-version": "pr-SPEC-ATATA-20090521", "h-user-agent": navigator.userAgent,
"mk-carrier": localStorage.getItem("userIP"), format: "xml", "mk-ad-slot": 10 },
function(data) {

URL in above post request is of Sandbox which you should use while developing and when you are ready to go Live, you should make your calls to:


At this point if you check your Firebug or Chrome JavaScript developer tools you should see a XML object with AdURL, ImageURL or LinkText in it. The next step would be how we extract this data and display in our page.

First you need to create an ad ‘holding’ area in HTML, in my case I created it just above the closing content div:

<a id="bannerURL" href=""><img id="playerBanner" src=""></img></a>

Next you need to expand your data callback function and include XML parsing capability which should extract the ad data out and show it in ad holding HTML.

function(data) {
        $(data).find("Ad").each(function(){ //find Ad tag and loop through each
        $("#bannerURL").attr("href", $(this).find("AdURL").text()) ;  //get AdURL tag and update 
        if($(this).attr("type") != "text"){ //if ad is not text based
           $("#playerBanner").attr("src", $(this).find("ImageURL").text()) ; //update image src 
        }else{ //in case of text based ad
           if($(this).find("LinkText").text() != "invalid ip-address"){ //ip not found
              $("#bannerURL").text($(this).find("LinkText").text()) ; //just update text

Above code should be self explanatory as I have added comments against each line, basically you need to loop through all of the XML, finding “Ad” nodes, then going through each node and finding AdURL (where user will go after clicking on Ad) and updating href attribute of our hyperlink tag in holding HTML then InMobi serve ads in two formats, one is text and other is image based banner ads. If it’s not text ad, we will get ImageURL and update the img src in our holding HTML, if it’s text ad then we will simply update text enclosed in “a” tags.

This should complete your ad integration and you should see a sandbox banner or text in your sub-pages. In my case it did:

Complete code is below:

var userIP;
        userIP = data.ip;
        localStorage.setItem("userIP", userIP);

$.post("http://w.sandbox.inmobi.com/showad.asm", { "mk-siteid": "4028cba631d63df10131e1d3191d00cb", "mk-version": "pr-SPEC-ATATA-20090521", "h-user-agent": navigator.userAgent,
"mk-carrier": localStorage.getItem("userIP"), format: "xml", "mk-ad-slot": 10 },
function(data) {
        $(data).find("Ad").each(function(){ //find Ad tag and loop through each
        $("#bannerURL").attr("href", $(this).find("AdURL").text()) ;  //get AdURL tag and update 
        if($(this).attr("type") != "text"){ //if ad is not text based
           $("#playerBanner").attr("src", $(this).find("ImageURL").text()) ; //update image src 
        }else{ //in case of text based ad
           if($(this).find("LinkText").text() != "invalid ip-address"){ //ip not found
              $("#bannerURL").text($(this).find("LinkText").text()) ; //just update text
<a id="bannerURL" href=""><img id="playerBanner" src=""></img></a>

This provides basic integration of ad API and you can build your ad serving structure on top of it. One improvement would be of adding your in-house ads which would show banners linking to your other apps probably as often InMobi simply do not return any ad when you go live, instead it would show:

<!-- mKhoj: No advt for this position -->

So, it would be wise to handle this exception and in this case show your own ad.

Happy coding!



Tutorial: iOS Twitter app in 60 seconds using MoSync and Sencha Touch

Assumption for this video tutorial is that viewer don’t know Sencha Touch and MoSync at all, that’s why it is a bit longer than 60 seconds :;)

Introducing MoSync – SDK for Cross Platform Mobile App Development
MoSync is a cross platform mobile application development SDK which allows you to write cross platform apps for as many as 6 different platforms including iOS, Android and Windows Phone 7. Developers can develop their native UI web apps using HTML5 or native UI apps using C++. You can find more information about MoSync on http://www.mosync.com

Introducing Sencha Touch – JavaScript Framework for Mobile Devices

Sencha Touch is a JavaScript framework to write HTML5 based web applications targeted for touch based devices. It is specially designed to support touch based devices. Sencha Touch is from the same people who are behind ExtJs and Sencha Touch 2.0 is largely based on ExtJs codebase. You can find more information about Sencha Touch on www.sencha.com

Let’s get to work!

First step is to download MoSync IDE from www.mosync.com. You can download MoSync Mobile SDK or MoSync Reload which is specially written for HTML5 apps. I have used MoSync 3.0 Mac OSX version for this video tutorial.

The second step would be to have latest release of Sencha Touch with you, at the moment Version 1.1.1 is latest while version 2 is in developer preview only. You will need to give your email address to download free commercial version which I have already downloaded and unzipped on to my machine.

Let’s create our twitter client app. Open MoSync -> go to New Project -> Choose MoSync Project -> Choose HTML5 Project -> Choose HTML5 WebUI Project and then click Finish.
As you can see we have a HTML5 project ready for us now, it’s based on a template, so even if we don’t do anything and run it straight away on the iOS simulator, it will work for us!

A tip for you here will be that beside that you don’t need to configure anything on MoSync to run HTML5 apps, it come bundled with iOS simulator but you still need to have XCode installed on your machine to get it working, XCode is already installed on my MacBook at it’s default location and we can start using it straight away.

Now, back to our twitter client app, when you download Sencha Touch 1.1.1 and unzip the folder, you get examples folder in it, just open the examples folder, find twitter folder in it, copy it’s contents, go back to MoSync, delete all files from Local Folder and then paste the twitter folder contents in it. Then copy sencha-touch-debug.js from sencha touch folder and copy it also in Local files folder in MoSync. Then open index.html and change the path for sencha-touch.js file accordingly.

Now start you simulator again targeting iPad (because twitter example is not supporting iPhone resolution) and hey! you have your twitter client ready to go!
That is that easy! (I know this is cheeky)

Next time I will come back with a tutorial to target the same app to work on Windows Phone 7 and Android platforms.

Till then see ya!

Tutorial: Creating an Ajax based form using Zend Framework and YUI

Many of you would already know that Dojo is JavaScript framework of the choice for Zend Framework. However, Zend framework itself is very loosely coupled that you can use whatever JavaScript framework you are comfortable in. As part of my previous project we were already using YUI, so it was the best idea that while Zend Framework was our choice for our next project, we should stick to the JavaScript framework in which we already have developed our expertise i.e. YUI. As part of developing an Ajax based form, it takes a bit of time to take your head around but it works exactly as the JavaScript should work with PHP i.e. unobtrusive way. The deal is simple, the whole point of using a MVC architecture is that, you have different layers of presentation, controlling and business logic, that makes your code easier to maintain and develop upon, same should be the case of JavaScript you will be using in your application. Just a note that I am using Zend Framework 1.10 for this mini-tutorial.

Let’s get to work!

Say you have a form in your forms directory which extends Zend_Form class:

<?php class Forms_Product_Values extends Zend_Form { public function init() { // Set the method for the display form to POST $this->setMethod('post'); $this->addElement('text','my_timestamp',array( 'filters'=>array('StringTrim'), 'required'=>true, 'label'=>'Time Stamp' )); $this->addElement('text','my_value',array( 'filters'=>array('StringTrim'), 'required'=>true, 'label'=>'Currency Value' )); // Add the submit button $this->addElement('button', 'values', array( 'ignore' => true, 'label' => 'Modify', )); } } ?>
In here, note the last element, button, normally if it is a non Ajax based form, the element type will be the submit but as we do not want the form to submit itself straight away, we would just like to create a button element and give it a name, in this case ‘values’, same as controller name, I will explain this later that why I have used this specific name in our tutorial.
Next you will create a corresponding controller action obviously to handle whatever you want to do with your form input:
public function valuesAction(){ $form = new Forms_Product_Values(); $request = $this->getRequest(); // Check to see if this action has been POST'ed to. if ($this->getRequest()->isPost()) { // Now check to see if the form submitted exists, and // if the values passed in are valid for this form. if ($form->isValid($request->getPost())) { //do whatever you want to do } } $this->view->form = $form; // disable layouts for this action: $this->_helper->layout->disableLayout();
and not values.phtml which will act as a view for our controller action:
OK, up to here it was simple, straight form without submit button in the form, now we need YUI to act here. You can either create a separate JS file (always recommended) or just paste your JavaScript code in the values.phtml (your view file) which is not recommended however, I am doing that just for demonstration purpose of this tutorial!
Here is you updated values.phtml:

<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/connection/connection-min.js&2.8.1/build/selector/selector-min.js"></script>
<script type="text/javascript">
function fnCallback(e) {
sUrl = e.currentTarget.id; //controller name is the same as button name;
var nodes = YAHOO.util.Selector.query('input');
//prepare the data in query string format var data = ""; for (var i = 0; i< nodes.length; i++) { data += nodes[i].name+"="+nodes[i].value; if(i != nodes.length-1){ data += "&"; } }
var div = document.getElementById("responseDiv");
var handleSuccess = function(o) { //upon successful response we embed the response text into responseDiv on our HTML page div.innerHTML = o.responseText; YAHOO.util.Event.addListener("submitButton", "click", fnCallback); }; var handleFailure = function(o){ //if the request if failed, we need to log the event if(o.responseText !== undefined){ div.innerHTML = "Failed request to the server. Please try again."; } }; var handleEvent = { start:function(eventType, args){ }}; var callback = { //on start call back calls the handle event which starts showing ajax loader image customevents:{ onStart:handleEvent.start }, success:handleSuccess, //parameter to define which function to use on success failure:handleFailure, //parameter to define which function to use on failure timeout:1500 //timeout is 1500ms, can be extended from here }; var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, data); } function init(){ YAHOO.util.Event.addListener("values", "click", fnCallback); } YAHOO.util.Event.onDOMReady(init);
<div id="responseDiv">

See, no rocket science, however, couple of things to note, I am using a different approach here to remember controller name, I have assigned the same name to the button as the controller i.e. ‘values’, on click event the listener fires fnCallback function and then I read what is the id of the button, hence I know which controller is this and that is all I need as sUrl (the URL which I need to call, you may also need to concatinate “../../”+e.currentTarget.id),  another approach you can use is to echo the controller name in a hidden span or div in the view and then just read it from the JavaScript on click or if you can come up with any other approach, kindly post in comments of this tutorial for others to use.

Then is the YAHOO.util.Selector.query(‘input’), the beauty of YUI become handy here, as in this form I only have input elements I want to read, however, if you want to read say for example all the select and textarea elements, it is simple, just use this YAHOO.util.Selector.query(‘input’, ‘select’, ‘textarea’), now you know how to harvest your inputs from your form, you pull that on into the data variable and make the normal Ajax request through connection manager utility of YUI. The only bit remains here is, because your controller action is same, when you will send a request to it, your whole form will regenerate itself (which is intentional as in the controller I am actually making a database call and I want to show that whatever user has modified is actually in the database now) so you will loose the listener which you attached earlier to the button, you have to add it again on receiving the response, however, in this example, I have hard-coded it, you may want to send it dynamically with function call so that your function become totally dynamic and you could use same with all of your forms, I leave that upto you!

Happy Coding!

YUI Button: Mimicking the native Select dropdown to avoid IE width problem

This is the 5th installment in YUI series. This installment uses YUI button widget and YUI keylistener utility. Although this post and example mimics the default SELECT element behaviour and look but you should also consider the JavaScript execution overhead this will cause.

Microsoft in all it’s glory continued to develop it’s own web standards, avoiding to support any open industry standards but then as technology progressed, word spread, people got knowledge and resources, open-source alternatives started to come into the market which now threatens the very existence of Microsoft itself. Yes, I am talking about the browsers at this moment, what Firefox and Google Chrome has done against a browser which comes pre-installed with an operating system which most of the people around the world use, yes the mighty IE (Internet Explorer).

As being a web-developer, you most probably would know the pain of working with IE. Although it has the developer tools now which makes the life a bit easier but what about it’s own implementation of DOM which is the only implementation and for this browser only,  a developer always feel forced to insert conditions in his/her code just so the code can work on IE as well. Anyway, this is something we all know about and can’t do anything until Microsoft thinks of something else. Let’s get to the business!

The problem with IE Select dropdown

IE Select dropdown width problem

If you are a web developer and you ever worked with a select dropdowns in your projects, you know this problem very well. IE by default don’t adjust it’s drop down panel according to the width of the longest text size. There are already work-arounds available and couple of them are based on YUI itself but they don’t mimick the exact look and feel of our old select dropdown list. I wanted the exact same look and  functionality of native SELECT element. I will list the work-arounds I founds:

Why a new fix?

Good question! The first fix I told you here, involves animation, when you get your mouse on the select element, it will animate itself to with of longest text option element, doesn’t look good to me as I think normal web user do not expect that to happen!

The second fix, had two major problems:

  • Scrollbars, my lists were very long as you will see in the example. By default YUI menu button’s scrollbars appear at the top and the bottom, if you increase the scroll rate for faster scroll, not very user friendly.
  • It didn’t had the important feature of selecting the options through keypress, I mean if you press B in normal select dropdown list, it will take you to the first item which is starting with B.

The fix itself!

Ok Ok, I think I am talking too much and few of my fellows will be in a hurry to get the code, copy paste it and get it done! Well, alright, the example is here:

Example: Work-around for fixed-width SELECT element

Explanation – The CSS

In fact I have modified the official YUI2 example.
First we need the same look as traditional select menu dropdown has. However if you want to make it more pretty, the CSS is here, do whatever you like to do, maybe using default arrow image of YUI is a better idea.

So, for the CSS, just as we override the default CSS rules of YUI skin sam:

.yui-skin-sam .yui-menu-button button {
    background-image: url("http://ciitronian.com/examples/images/select_arrow.PNG");
    outline: none;
    	font-size: 0.8em;
    	width: 15.2em;
    	background-color: #F8F8F8;
    	cursor: default;
    	line-height: 1.3em;
    	min-height: 1.45em;
	.yui-skin-sam .yuimenuitemlabel:visited  {

	.yui-skin-sam .yuimenuitemlabel  {
	padding:0 20px 0 0;

	.yui-skin-sam .yuimenuitemlabel:hover  {
	background-color: #111166;
	color: #ffffff;

and a bit of tweak to YUI’s official example em class of button to make it look like a classic one

        /*  Restrict the width of the label to 10em. */
        width: 10em;

Our YUI menu button has got the classic look of SELECT element. Now the bit which I refer to as a nasty tweak, YUI menu button comes with it’s own scrollbars and as I mentioned earlier, if  you have a very long dropdown list, like a list of all countries in the world, the scrollbars functionality is not very useful. YUI gives you the flexibility to disable the scrollbars but I actually needed a vertical scrollbar so, what I did, I made the YUI scrollbars hidden!

Here’s what I did:

/*hide the YUI scroll bars*/
.yui-skin-sam .yuimenu .topscrollbar,
.yui-skin-sam .yuimenu .bottomscrollbar {
    height: 0px;

What it’s doing? Simply overriding the overriding the CSS property of height and setting it to 0. It hides the top and bottom scrollbars altogether. Next we need to turn the overflow to auto for yui menu body:

.yui-skin-sam .yuimenu .yui-menu-body-scrolled {
    overflow: auto;
    padding-right: 10px; /*to prevent horizontal scroll*/

If you just set overflow to auto, there will be just about a couple of pixels which will get over-flowed horizontally as well, to make it right, the padding property is there.  The padding-right property in div.yuimenu .bd is also there because IE8 was not getting right even if after the above rule.

Explanation – The JavaScript Code

The other JS code is almost the same as you will find in the official example but as mentioned earlier there were only two problems, the scrollbar, which we have already fixed through CSS, now the sorting or whatever you call it that when you click for a character, the first of it’s appearance should get selected automatically. So, all we need is basically a YUI keylistener with a correct scope and then we need to have a functionality which gets all the menu items text in an array, traverse the first character of each text element and then if matched, scroll to it and select it with the correct focus.

The keylistener code:

var kl = new YAHOO.util.KeyListener("select-1-container", { keys:keyArr },
			   { fn:labelCharCode,
				 correctScope:true } );

The keylistener code select-1-container as first argument to give it correct scope. Notice the loops before this code in the source code of example, 65-90 are the keyboard character codes for A-Z characters and 48 to 57 are 0-9 characters. Next, keylistener calls the labelCharCode function with the keypressed event type, and arg[0] has the character which got pressed.

Now, the YUI Menu has a useful method of getting all items in a menu, as you see in the source code, I have used it to get the menu items:

var MenuItems = oMenuButton1.getMenu().getItems();

Now, in the labelCharCode, we have got the character which user has pressed, we need to match it with the first character of menu item. We access the text property of all menu items in a loop, slice the first character, match it in a if else block, if matched, simple old window.location takes us to the id of that menu item and then we fire the focus event for that menu item.

for (var i = 0; i < MenuItems.length; i++) {
			var firstChar = MenuItems[i].cfg.getProperty('text').slice(0,1);
			if(firstChar === Character){
				window.location = "#"+MenuItems[i].id;

That’s it your SELECT dropdown element is ready which will work in all browsers and will adjust itself with the width of longest item in the menu!

Things which are still nagging me

The above code works as you may see in the example (I only tested that in IE8, Firefox 3.6 and Chrome 5), however I personally don’t like the concept of matching in a loop and slicing. I tried using YUI DataSource for this purpose but what I have seen in the YUI source code is that, it takes LocalDataSource array as it is and then apply matching on it, probably DataSource is more useful for remote data. However, I left it there after I tried seeing the code of AutoComplete widget and DataSource together, maybe I need to give it a bit more investigation. However, I dislike the current approach of this example because of processing involved. If you have a better understanding and know a better way of doing this, kindly embed the example or simply let me know, that will make this fix better!

Happy Coding!

Get String Length Tool

Just a bit of background, I was working on live data coming through from Java applets into Javascript, there were strings which I had to match, the conditions were like if (thisID === “blahblahblah”) and there were a lot of them, I had to match strings and then do my stuff, the strings were all different, I had to cut each string into sub-strings because there was a variable portion of every string which I didn’t wanted to match. The result you can imagine is that I was sitting there, counting each string character by character and then putting a condition on it. Got the idea of this tool then (obviously I am lazy when it comes to code), just input your string, get the length, put it as a parameter for the Javascript equivalent of PHP substr or maybe use slice() method of JS and move on! Here is tool:

When I actually searched for such a simple tool online to find a string length straight away (like I have seen a simple tool the other day to convert px values in em for CSS), couldn’t find any (maybe there are but I couldn’t find them). However, when you will search you will get lots of functions in every language (C, C++, Java, Javascript etc.) to do that but what if I only want string length and don’t want to write a line, execute it, know the length, erase it and then continue? Well, here is one, it helped me, it may help someone else too!

Happy Coding!

Tutorial: Using IE Developer Tools as Firebug in Mozilla Firefox

There was a time when development for Javascript and CSS was restricted mainly because IE was the only main browser around (basically because it was shipped with your copy of MS Windows) and even the other browsers like Opera and Netscape were not able to listen to the web developer needs. Then came around, Youtube, GMail, Facebook, all of them giving rise to the concept of RIA (Rich Internet Applications) and at the same time Firefox was launched (2004). Firefox was an open source project which in turn allowed thousands of developers around to write what they want as plugins and someone came up with the idea of Firebug, that bug caught the web development community like fire and this plugin has more than 117,085 weekly downloads at the time of this writing. If  you ask any web developer that which plugin is his/her favourite, firebug will always get mentioned at the top and due to all good reasons. I remember coding Javascript before the firebug, when to check and debug a javascript array, I would have to write alert(array.length) and that will pop-up an alert box with array length and then imagine my page is getting updated after 1 second or that array is in a function who is running in loop.. bang! … just to inspect an instruction in that loop, that alert box will appear after every 1 second and ultimately I would have to kill my browser to get rid of it. Not the case any more. Then came around Ajax, I remember JS frameworks such as YUI and jQuery weren’t around in those days and I wrote my first function to make an Ajax request using XMLHttpRequest and after that telling my colleagues that the problem in writing Ajax code is that, you don’t get to see what is happening behind the request. A real nightmare? well we are lucky now, that dark period for client-side web scripting is over.

I don’t think if you are a web developer and you are not aware of firebug but this can be the case that you are a web developer and you are still sticking with the Firefox just because you love firebug and web developer toolbar. Most non-techie people around the globe still love IE (some of them are still on IE6 because that came with their MS Windows XP installation) and they constitute more than 70% of  the total, so if you are going to develop for general public or for a client who just couldn’t understand that why I don’t use IE and why Firefox is my favorite browser, you need to have a look at your web application in IE before shipping it and I am telling you it could always go wrong as you may be calling a function whose one parameter Firefox is ignoring and still executing the code while IE wouldn’t ignore and will stall altogether. Luckily, IE8 comes bundled with IE developer tools (developer tools were around from some time but installing them on and off was a real nightmare, at-least for me). But yes I can hear what you are saying, most of the times, IE will throw an error and it will have very “helpful” error description such as “Unspecified Error” and it will point at totally wrong line in the source code and you will have to do your guess work to eliminate the problem, anyway, with developer tools you could see something in place of nothing.

Enough discussion, here is your 3-minutes crack-on graphical tutorial to use IE developer tools just like your native firebug console and web developer toolbar on Firefox.

First load your desired web page in IE8 which you want to inspect by pressing F12 or by selecting Tools > Developer Tools in IE8.

Second always remember that to inspect a script you need to select it first and start debugging.  In IE Developer Tools > Script tab > Select script > Start Debugging

Selecting Debugging Source

Inspecting Javascript Variables

The most convenient use of firebug for me is of seeing the JS variable values as I develop a complex client-side application. As I discussed above, you don’t want to see alert boxes again and again, IE developer tools, do that for you in two ways.

You can use console to see any output messages. To differentiate between these messages, different console.log APIs are available:

  • console.log
  • console.error
  • console.warn
  • console.info
  • console.assert

My favorite in firebug was console.debug but I left using that long ago because IE Developer Tools do not support console.debug and this will break your code. Secondly firebug allows you to format those error message, IE  Developer Tools do not support that (or at-least something I am not aware of). The output of these console messages will be exactly like something you see in firebug. For the record, you write code like this:

var myvar = 0;

IE Developer Tools Log Messages

The other way is slightly different, can be used for the same purpose but is related to only variables, you are able to see variable values at your breakpoints, so you have the time to analyze them.

To create a break point, hover your mouse on the line number you want to mark as break point and click, a red dot will appear on the left beside the line number, now when you will start debugging, browser will stop executing it just before the line you marked as break point.

Then go to the right hand pane of IE developer tools and select Watch > Click to add the variables you want to see and developer tools will let you know the variable name, value and type at the break point.

Watch variables at break point

You are able to change variable values at this moment as well, just when you are watching a variable in Watch tab, open Console tab and assign new value to the variable to see how it will behave after you hit Play again. In the same manner you are able run any instructions which are not in source code but you want to run them at break point to analyze the effect.

Part 1: Running script at break point

Part 2: IE Developer Tools console with new variable value

Now go back to the Watch tab and see the updated value.

Part 3: Watch updated variable value

Profiling Javascript

Another important need for a web developer who do not think that JS is just a scripting language and it just has bits like getting an element and changing it’s value at run time etc. but it is so important that the developer actually needs to optimize the run times and to see how many times a function is getting called, JS profiler is just what saved our lives in firebug, it is here too in IE Developer Tools.

You need to select Profiler tab in Developer Tools > Start Profiling, do something on your page like refresh or wait for sometime if that is something you want to check and then Stop Profiling, Developer Tools will give you a complete report of JS activity done in that time span, listing Functions, count of the calls made and inclusive, exclusive time etc. Same information can be seen in Call Tree view if you select call tree from Current View.

Javascript Profiler

View Generated Source

If you ever worked with Ajax, you would probably know the importance of seeing the DOM once your Ajax call has been made and your DOM has got updated. In Firefox I use Web Developer Toolbar to see Generated Source, in IE Developer Tools, you can view the same by going into View > Source > DOM, you can view the Original source code and the selected element’s DOM as well.

View Generated Source

Outlining Elements on the Page

Another important tool of firebug is when you can outline the elements on your page to see where they are residing, like the divs or tables etc. I specifically use Web Developer Toolbar instead to outline and see the cause of cosmetic issues. IE Developer Tools comes with this solution as well. You can go to Outline in menu and select the type of elements you want to outline or to select an individual element you can go to Any Element and add the name of the element to view outline.

Outlining Elements

There are plenty of other functions which Developer Tools support like you can also see the CSS of an individual element by going to Find > Select Element by Click and then clicking on the element, just like you do for inspect element tool in firebug. You can view Images information or disable scripts, CSS, change the browser modes to render the page in IE7, validate your HTML (this will take you straight to W3C website and if you are working on localhost on your system, chances are W3C will refuse to check your code), CSS etc and you can even re size your browser to see your pages in different resolutions.

There is no doubt, Microsoft was under pressure from the developer community to bundle the developer tools with IE because after the arrival of Firefox, the whole development scenario got changed and developers want to develop more rich applications for the web. I personally havn’t adopted IE for my core development but it is handy to check my code every now and then in IE to see if everything is fine there and if not, using Developer Tools makes the life easier by allowing you to debug the code.

Feel free to comment if you have anything to say!

YUI Dialog: Hiding the Dialog Panel in IE – Bug Resolved

This fourth installment in YUI series is basically about firing a bug which appears to be IE (Internet Explorer) only. This is when you have opened an iframe in dialog widget and showing another resource using frame.src and relying on native

close : true

parameter of YUI Dialog widget to show a close button to the user on top of the dialog and when user clicks it, your dialog panel get hidden. Works very well in Firefox and Chrome but when I went to test in my IE8 installation, it went wrong.

The Error

The error was this, when I was closing the dialog panel in IE, it was getting hidden but leaving some traces of it back, in most of the cases, border of a table which was in the iframe, meaning dialog was not getting properly hidden. It was also not allowing me to click or change any thing in the background elements  in the parent page, reason because IE was still thinking that dialog is on top of those elements.

The Code

The code I was using to pop up a new dialog panel to show a new regular page to the user in dialog iframe:

<script type="text/javascript">        
 // Instantiate the Dialog
 var addCons = new YAHOO.widget.Dialog("addCons",
 {   width : "965px",
 y: 15,
 x: 500,
 modal: false,
 visible : false,
 constraintoviewport : true,
 draggable : true,
 monitorresize : true,
 close : true});
 var DialogShow = function(e, args, o){
 var frame = document.createElement('iframe');
 frame.src = "http://www.ciitronian.com";
 frame.width = "100%";
 frame.height = "580";
 //subscribing to the on show event
 addCons.showEvent.subscribe(DialogShow, addCons);
 YAHOO.util.Event.addListener("showHL", "click", function(o) {addCons.show();});

I tried couple of work arounds but this idea really works well that ofcourse the dialog panel’s body is having problems, then just set the body to null on hide event.  So I subscribed the hide function with the hideEvent of dialog:

var DialogHide = function(e, args, o){
 o.setBody(' '); //set the body to null to avoid IE problem
 //subscribe the hide event
 addCons.hideEvent.subscribe(DialogHide, addCons);

Another requirement was to enable the user to press ‘Esc’ key to hide the dialog panel. We need a Key listener event then from yui utils to listen on key 27 (which is Esc key). Add the following bit of code just before we render the dialog widget:

var keylistener = new YAHOO.util.KeyListener(document, { keys:27 },          
 { fn:addCons.hide,
 }, "keyup" );
 addCons.cfg.queueProperty("keylisteners", keylistener);

View the example source code to have a look at the full source code.

View YUI Dialog Example in New Window

YUI Calendar: Using and modifying multiple calendar picker instances on single page

In this third installment of how to create and modify existing widgets from YUI Javascript library, I will explain how to create multiple instances of calendar widget of YUI2. There are many examples of how to use Calendar widget on YUI’s official website but for my application, the requirement was to to schedule multiple actions on the same page, giving each one a date of its own, so I developed my calendar widget with the example found here.  As a matter of fact if you really want to include multiple elements of a same type on a HTML page, you assign them different ids so that they can be accessed and called appropriately (just like you do with your babies).

You can see in the example I have built on, we are using here the power of Dialog container of YUI, we are using its button and context features to support our pop-up calendar.

It’s best that you first see my example code working and then I will explain the code.

View Multiple YUI Calendar Example in New Window

If you see the source code of example, you will see what I have really done is that, I have passed a unique ID for each calendar instance through declaring

<script type="text/javascript">

Then I enclosed all of the code in a function, which accepts the calendar ID and each variable which declares the calendar, gets embedded with this calendarID so that whenever a user uses any instance of the calendar, my widget knows about which calendar we are talking about and the calendar instance needs to update which fields. The same id is needed to be embedded in HTML fields which we are updating through (of-course using powerful features of DOM manipulation given by YUI)

Dom.get("month-field"+calendarID).value = month;
Dom.get("day-field"+calendarID).value = day;
Dom.get("year-field"+calendarID).value = year;

and at the end we really need to ensure that our HTML bits have those IDs

<span id="datefields1">
 <label for="year-field">Year:</label>
 <input id="year-field1" type="text" name="year" value="" style="width: 3em;">
 <label for="month-field">Month:</label>
 <input id="month-field1" type="text" name="month" value=""style="width: 2em;">
 <label for="day-field">Day:</label>
 <input id="day-field1" type="text" name="day" value=""style="width: 2em;">

Note the input id parameter, which is year-field1, month-field1 and day-field1, you can create as many calendars as you want, if you have specified the input ids and declared calendars with those ids.

There is one other bit which I have manipulated is the default behaviour of calendar when it updates a field, I was required to have date stamps in the format of YYYY:MM:DD while the calendar would update the fields in the format of YYYY-M-D format, for this functionality there may be some call given by YUI Calendar widget itself because I have seen several type of formats floating around in examples section but for me it was really quick to modify my function to include preceding zeros (if there are none) to month and day before I populate the the DOM elements:

//This modification is done to cater calendar out from yui to
//give always the leading zeros for months and days, in case they
//dont have
 var month = ''+aDate[1]+''; //convert month into a string
 var day = ''+aDate[2]+'';    //converty day into a string
 var year = ''+aDate[0]+'';    //converty year into a string 

//embed the preceding 0 if month is of 1 digit
 if (1 === month.length) {month = '0' + month;} 

//emebed the preceding 0 if day is of 1 digit
if (1 === day.length) {day = '0' + day;}

Other than these you will see how this function is subscribing certain events. One important event is to hide the pop-up calendar when a user presses ‘Esc’ key

// Pressing the Esc key will hide the Calendar Menu and send focus back to
 // its parent Button
 Event.on(window["oCalendarMenu"+calendarID].element, "keydown", function (p_oEvent) {
 if (Event.getCharCode(p_oEvent) === 27) {
 }, null, this);

For the calendar I am using default button provided by YUI CSS, you can change it by declaring your own calendarpicker button style in CSS like:

#calendarpicker button {
 background: url(../../images/calendar_icon.gif) center center no-repeat;
 text-align: left;
 text-indent: -10em;
 overflow: hidden;
 *margin-left: 10em; /* For IE */
 *padding: 0 2em;    /* For IE */
 white-space: nowrap;

change the background URL to your own image.

Feel free to comment if you have any better ideas to make this example more robust.

YUI Panel: Changing buttons and re-using a panel on same page

YUI is a natural Javascript library, it is different from jQuery and other Javascript frameworks due to its closeness to original JS where it supports you to build widgets and enhance the user experience, the other JS libraries such as jQuery and Dojo are incredibly easy to work in but they divert you so much from the original language that they become almost a language of their own. The closeness of YUI to the Javascript at the one end gives you the depth to work at your own ease and develop whatever you want, on the other hand it proves to be a bit difficult for the beginners, probably that is the reason, you will not find much support for YUI around, YUI has its own forums where the original developers of YUI reply in time-efficient manner as well but they speak at very high level and people to support at beginner and middle level are very less on Google.

So, I have decided to write some blog posts about the problems I faced and I was not able to find help on Google but then I figured out in some way (occasionally from the help of developers at yuilibrary.com where I got some hints and I made something out of it). I have already wrote first in this series which was about IE rendering problem in YUI tabs, today I will explain how you change modal panel buttons on the fly.

The requirement was to make a modal panel in YUI, which work at its own as a activation widget using Ajax (YUI connection manager). The idea was pop up a YUI panel when a user clicks on “Activate”, that modal panel will allow the user to enter details of when he/she wants to schedule the activation (where user can choose now or a later date) and then user can hit Submit and Cancel buttons. Uptil now its usual YUI panel which you will find in any YUI panel example, here is the example of making this panel:

//function to execute if user clicks on Cancel button
var handleCancel = function() {

// Instantiate the Dialog
 var dialog23 = new YAHOO.widget.Dialog("dialog23",
 { width : "340px",
 fixedcenter : true,
 visible : false,
 modal: true,
 constraintoviewport : true,
 hideaftersubmit: false,
 buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
 { text:"Cancel", handler:handleCancel } ]
//delcare the call back
dialog23.callback = { success: handleSuccess,
 failure: handleFailure };
 // Render the Dialog

//attach the listener to Activate (button, div,
//span where ever you want to attach the click listener)
YAHOO.util.Event.addListener("Activate", "click",
dialog23.show, dialog23, true);

A function of handleSuccess is missing in this example, I will leave that to you because in my code its very inter-related. The handleSuccess is where I make an Ajax request through YUI connection manager, once the request get submitted, I show a spinning wheel and then the Ajax response get shown to the user. The problem here is, you can easily show the response but changing the buttons at the bottom became a night-mare. Once the response is shown, you don’t really want to show the user Submit, Cancel buttons, what you really need there is a OK button so that user can acknowledge and on acknowledgment the panel hides away.

Here is how you change the button at the bottom of YUI panel:

//embed the OK button, on click handleOK function will be called
 dialog23.cfg.setProperty("buttons", [ { text:"OK",
handler:handleOK, isDefault:true }]);

and then write a funciton to act when user press Ok

//these are events which happen after a user clicks OK
 var handleOK = function() {
 //hiding the dialog box

There is one other approach I am using in this panel, that is if once activated, the user clicks on the Activate/Deactivate button again, what will happen then? You really need to make it dynamic.

For example your panel HTML was this:

<div id="dialog23">
<div align="left"><div id="ajaxResponse">
<form method="POST" action="timeschedule.php">
 <input type="hidden" name="buttontime" value="1">
 <div id="resp"></div>
<div>Enter the date here: <input type=text value=date name=date>

In this case before initializing anything get the all the ajaxResponse innerHTML in a variable like:

var div = document.getElementById('ajaxResponse');
//we are storing schedule HTML which we will restore at the end
var divHTML = div.innerHTML;

Now our ajax response will change the bits you get in ajaxResponse div, the input text box and other will be changed something like:

User specified action has been activated.

What you need now is to restore the original panel just when the user clicks OK, the handleOK function will get changed to this:

//these are events which happen after a user clicks OK
 var handleOK = function() {
 //restore the schedule HTML in case user wants to use it again
 div.innerHTML = divHTML; //populating the initial schedule HTML back
 //hiding the dialog box
 //rebuilding the submit and cancel buttons for re-use
 dialog23.cfg.setProperty("buttons", [ { text:"Submit",
handler:handleSubmit, isDefault:true },
 { text:"Cancel", handler:handleCancel } ] );

And here you will replace the buttons in the bottom of the panel again to Submit and Cancel.

I have elaborated enough here to give you an idea of how things work, its possible you are not working on same thing but my idea was really to give you ability to change buttons in the panel on the fly and to give you an idea that how you can use a panel again and again. If you need any further help, don’t hesitate to comment and I will try to reply as much as I can.

YUI Tabview and IE: Rendering Problem Solved

YUI Tabview is the easiest way I came around to organise your web pages into tabs, rather than using multiple selective navigation. YUI Tabview can easily be used to organise a very long page into chunks or you can give it an external source which it collects through Ajax and show to the user. Different parameters are available while making these calls such as cacheData and active, which allows you to cache the contents after fetching through ajax while active parameter let you decide that should tab fetch the data on page load or should it wait until user clicks on the tab explicitly.

There is a problem of inline script exeuction in YUI2 version (I haven’t tested YUI3 yet). Bubbling library gives an alternative to it. Bubbling Library is a YUI extension and by simply including dispatcher plugin of bubbling, you will be able to run inline javascripts in the tabs content. From inline I mean, the YUI Tabview by itself is a javascript, when it calls a source which also have <script type=”text/javascript”> tag in it, it breaks away and just do not show you anything. Dispatcher on the other hand makes separate nodes of each script tag and hence let you execute any javascript in your tabs.

Example to call tabs content through ajax using dispatcher plugin for YUI:

<div id="container">
<script type="text/javascript">
  	var tabView = new YAHOO.widget.TabView('contenttabview');
        YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({
        label: 'Leave a comment',
        dataSrc: 'yourexamplefolder/yourexamplepage.php',
        cacheData: true,
        active: true 

When I started using YUI Tabview, the first hurdle was to execute inline javascript which I was using for form validation etc, dispatcher solved, but just when I was about to finish the module development and went on IE (I was developing on Firefox) to check, it just didn’t went well, for those pages which had tabs with lots of content in it, IE just seemed to break its while fetching data through Ajax. It wouldn’t get the whole script running and would die out somewhere in middle. Luckily I had a universal footer and I got it straight away that footer is not executing that means browser is just not getting there.

The Solution:

After getting the problem, solution was simple, just call your tabs script only when the whole of your browser’s DOM is ready and loaded. There is a very handy functions of YUI2 Event Utility:

//which works like

 function init() {
    YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");

But I will stick with native javascript function of


Here is how you modify the above example to work with IE to solve any potential rendering problems:

<div id="container">
<script type="text/javascript">
function tabs(){  	
       var tabView = new YAHOO.widget.TabView('contenttabview');
        YAHOO.plugin.Dispatcher.delegate( new YAHOO.widget.Tab({
        label: 'Leave a comment',
        dataSrc: 'yourexamplefolder/yourexamplepage.php',
        cacheData: true,
        active: true 
window.onload = tabs;

Happy Coding 🙂

Get Adobe Flash player