Creating dynamic popup menus with JQuery Mobile

Creating popup menus in JQuery Mobile is not quite simple. I am talking about menu that you might want to display when user clicks on, for example, a list item or a button. Refer to JQuery Mobile documents for select menus and custom menus . These menus are actually drop down lists and in all the cases, the menu has to be already visible.

However this is not what I wanted in my mobile apps. I do not want menu to be visible initially, but want to display it when user clicks on a button on a list item. So I started investigating how this could be done. As it turned out, the menu that JQuery Mobile shows (when nativeMenu attribute is set to false), is different from the select tags that you create for the menu. JQM hides the menu that you create and creates a new (wrapper) menu using div and anchor tags. Option tags become anchor tags in the new menu. This is all fine, but the problem is that JQM does not have any direct APIs to access elements of the new menu. This makes it difficult to attach event handlers to menu options.

Continue reading “Creating dynamic popup menus with JQuery Mobile”

Dynamic loading of JavaScript files

I am working on a JavaScript framework that uses JQueryMobile. The framework can be used for both mobile and non-mobile sites. You can set the page for mobile by calling, for example, enableMobile method. So the framework does not load JS files for JQueryMobile up front. It does so only when enableMobile method is called.

First I tried to include JS file for JQueryMobile using document.write method –

document.write("<script src='jquery.mobile-1.1.0.js' type='text/javascript'><\/script>\n");

However this did not work – the page was not converted to JQueryMobile page, i.e. CSS styles of JQM were not applied to the page. Instead I got following error –
Continue reading “Dynamic loading of JavaScript files”

Sprite Animation in HTML5 Canvas with KineticJS

If you want to simulate motion with repeated display of a set of images, where each image correspond to one position in a series of positions in motion, then you can do this easily with sprite. Sprite is individual image in this series of images that constitute motion. The example of sprite is a person walking, where his/her motions of hands and legs are repeated during the walk. However sprite animation is not limited to repeated motion only. You can simulate, for example, explosion of an object, with series of images (sprites), each showing different stages of the explosion.

In my simple HTML5 game, the planet stops moving (and the game ends) when it hits any asteroid or boundaries of the Canvas. I modified it so that the planet explodes when it hits any obstacle. And for this I used Sprites. KineticJS makes animating Sprites very easy. This is how my sprite sheet looks like (sprite sheet is one image that contains small individual sprite images) –

Continue reading “Sprite Animation in HTML5 Canvas with KineticJS”

Presenting a webinar on ColdFusion Builder – ColdFusion Developer Week

I am presenting a webinar on ColdFusion Builder on Wednesday, 6th June, as part of the ColdFusion Developer Week. I am planning to cover following topics –

  • Setting up project
  • Configuring ColdFusion server
  • Many editor features
  • Debugging
  • FTP & Synchronization
  • Extending ColdFusion Builder by writing extensions

Continue reading “Presenting a webinar on ColdFusion Builder – ColdFusion Developer Week”

Passing data between pages in JQuery Mobile

I am working on a JQuery Mobile application which is based on single page template design. In this design, there is one main page in the application and all other pages are loaded by JQuery using AJAX and content is embedded into the DOM of the main page.

I have a couple of pages in the application and I switch between pages using changePage. One of the issues I struggled a bit initially was, how to pass data between pages? The signature of changePage is
Continue reading “Passing data between pages in JQuery Mobile”

Collision Detection in HTML5 2D Games


I wanted to make the Simple HTML5 Game I had created a couple of weeks back a little more interesting. I decided that I would add some obstacles in the way of the moving object. The goal then would be to prevent the moving object from hitting the obstacles and boundaries of the Canvas. This required implementation of collision detection (between moving object and obstacles) logic. If shape of the image is rectangular, then it is easy to detect collision; this is something I had already implemented in the last game, where I checked if the moving object hits any of the four boundaries. But if shape of the image is irregular, then it requires a bit more work to detect collision. But first, try out the modified game below and see how collision detection works –
Continue reading “Collision Detection in HTML5 2D Games”

Thank You Readers!

I just want to express my sincere thanks to readers of my blog who have left comments on my posts. Most of the comments have been very encouraging. I really appreciate them.

Many of my posts are the results of experiments I do outside my work. I love my job at Adobe and I totally enjoy the work I do there. However I cannot publicly talk about most of the work until the product is released e.g. I have been working on a very interesting idea since the last one month, but cannot talk about it now. So many of my posts may not be related to the work I do at Adobe. Fortunately Adobe, and specifically my group, has always encouraged learning and experimenting with new technologies.

Again, thanks for your encouraging feedback.

-Ram Kulkarni

JavaScript Graphics Libraries

Last year I was evaluating options for JavaScript graphics libraries for ColdFusion Builder ORM extension. The extension lets you select tables from a datasource and displays it in a browser window. You can them configure relationships, table fields, data types etc and generate CFC code. Here is the screen shot of that extension.

I evaluated SVG and Canvas for graphics/drawing in this extension. However Canvas was not supported in Internet Explorer at that time. SVG was supported on all desktop browsers, but Android browser at that time did support SVG (Android version was 2.2 then) . Since this application was meant to be used on desktop, I decided to go with SVG. Fortunately I came across a very good SVG JavaScript library, RaphaelJS, which made drawing and manipulating shapes in the web page a lot easier. I used JQuery + RaphaelJS together in my application. I used these two libraries for my another extension to monitor CF server memory.
Continue reading “JavaScript Graphics Libraries”

Challenges in implementing ColdFusion Builder

ColdFusion 10 and ColdFusion Builder 2.0.1 released this week, on 14th May. My article on What’s new in ColdFusion Builder 2.0.1 is published on the Adobe Developer Connection. I have been working on ColdFusion Builder for close to 3.5 years now and the release of updater this week has put me in a mood to reflect on challenges we have faced so far.
Continue reading “Challenges in implementing ColdFusion Builder”

OOP in JavaScript: Class in various Avatars

I have done more JavaScript programming in the last couple of months than I have ever done before, and I have started liking it. I had used JavaScript before, but only for simple use cases like form field validations, alerts or taking simple input. Recently I have been looking at ways to do Object Oriented Programming (OOP) using JavaScript, and what struck me initially odd about it was different forms a function can take and different ways in which you can use them.

Functions can be treated as Class in JavaScript. They can have member variables and methods. I have seen many different ways in which this can be coded
Continue reading “OOP in JavaScript: Class in various Avatars”