Against All Odds - jQueryMobile

My first web based mobile project

Fri, 22 Jul 2011 18:28:00 -0700

Here is my first web-based project for my company. Our target is for customer who want to register Patient thru online. This project is based for iPad but it can work either on Android based tablet. For this project, I've used jQueryMobile framework, Coldfusion 9 and Oracle 11g. For jQueryMobile part, I've created our own customize theme for this project and added some JS coding into jQueryMobile existing scripts. Just example: my boss want me to highlight which field has been filled up by users and need to categorize for mandatory field. As you know, it's difficult to change or add some JS coding into their existing core JS file because we need to know the flow of existing JS coding. Likewise, what we add or change JS coding will impact the whole existing JS coding. I took 2 days to study the whole existing JS coding but it's not enough time honestly for it. Below is some of my change logs into jQueryMobile existing JS coding for this project. [More]

Change jQueryMobile default selected value in select box

Mon, 23 May 2011 01:23:00 -0700

Today what I've successfully done is I can change the color of default selected value in select box with jQueryMobile. Frankly, this feature is missing in jQueryMobile because nobody can obviously know whether any value is selected in select box or not. Because they missed out to let users know about it. That's why I need to add the customize function of myself.

First of all, we need to search the following coding in jquerymobile javascript.


	selectedIndex = select[0].selectedIndex == -1 ? 0 : select[0].selectedIndex,

Then, we need to add the following customize coding after that,

[More]

Change jQueryMobile Select Box active style color in iPad safari

Thu, 19 May 2011 22:41:00 -0700

Today, I'm very happy that I can change jQueryMobile select Box active style color in iPad safari. Because, current active style ".ui-btn-active" is 100% working for other inputs like text, radio and checkbox but for select box, it doesn't completely work in iPad safari. My boss told me that I need to change all of active input color to "dark blue" instead of default color. That's why I need to change and already played in existing jQueryMobile stylesheet file. But it doesn't work at all. That's why I think I need to hack jQueryMobile existing javascript. After 30 minutes, I found that there are three places I need to change in jQueryMobile existing stylesheet. The first part is I need to add new class name for active select box in stylesheet.


.ui-select-active {color:#0000a0; text-shadow: 0 -1px 1px #ffffff;}

[More]

How to make square shape button in jQueryMobile

Tue, 17 May 2011 02:45:00 -0700

As I mentioned in my older posts, I'm really on web-based mobile tablet project for our existing project. Honestly, this web-based mobile tablet project is our first mobile project for our company. That's why all of requirements are so high and trying to got impressive from our clients. Among them, they urged me to create square shape button in jQueryMobile instead of existing them. As we all know, the existing stylesheet coding of jQueryMobile is very unit, thick and complex and if you change something in it, the impact will be so high. That's why I don't want to change anything in it except theme creating but they want square shape so no choice. So, I've changed the following coding like that.




.ui-btn-inner { 
	padding: 2em; 
	display: block; 
	height: 100%; 
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap; 
	position: relative;
}

After changing it so and rendered it, I've got the odd outcome. Please see the image. Because it changes to all of input like drop down, checkbox and radio. [More]

Useful Tools, Template and Design for iPad and iPhone

Wed, 11 May 2011 18:15:00 -0700

In these days, I'm on developing web based Mobile Tablet project for especially iPad. That's why I need more information about iPad such as framework, template and Design for coming out nice GUI design. For actually development, I've used jQueryMobile of course because it's kinda flexiable and reliable. But I gotta know which other else framework and template are avaliable for web mobile development. For that case, I've found this website http://webdesignledger.com has a lot of information for iPhone and iPad development articles. Among them, I'd love to read the following three articles for iPad development.

http://webdesignledger.com/freebies/11-ui-kits-for-iphone-and-ipad-development

http://webdesignledger.com/tools/10-best-ipad-apps-for-web-designers

http://webdesignledger.com/inspiration/30-inspiring-ipad-app-websites

Hope above three articles will be useful for someone who is trying to implement Web Tablet Development like me.

Simple jQueryMobile Keypad

Mon, 09 May 2011 21:46:00 -0700

Currently, I'm on web based mobile project for our current project. That's why I've developed this project with jQueryMobile framework because it's very simple and reliable to use for developers like us. In jQueryMobile, almost features are cool like calendar plugin, date plugin, etc. For me, keypad plugin is missing and I feel isn't not urgently needed because we can use mobile phone keypad as well. Unfortunately, my senior urged me to add KeyPad feature in our project. That's why I'm about to develop it by my own. First of all, I need to write following coding in index.cfm.


Enter Phone Number

[More]

Increase the width of select box in jQueryMobile

Fri, 06 May 2011 07:02:00 -0700

Currently, I'm on web based mobile project by using jQueryMobile framework. As I already mentioned in my previous posts, jQueryMobile is really awesome and very simple to develop web based mobile project for even user-level developers. But, we cannot easily change the built-in theme of their existing style. Because all of infrastructure of existing styles are transformed by javascript coding of jQuery and styling with CSS a little after. Today, I was on trouble about the width and display style of select box in jQueryMobile. Oddly, the width is neither 100% nor 50% and seems display style is Block type. That's why I cannot put horizontally two select boxes within in the same DIV. That's why I feel I need to change any coding in stylesheet of jQueryMobile. So open jQueryMobile stylesheet and changed the following two coding for the sake of my project. [More]

BlogCFC simple add mobile ON/OFF feature with jQueryMobile

Wed, 30 Mar 2011 23:16:00 -0700

Yesterday I've added mobile version on/off feature in my blog with jQueryMobile. As we know, this mobile version on/off feature is already in BlogCFC. For my side, just put jQueryMobile button and add simple javascript. Here is my change log in index.cfm file of BlogCFC mobile folder.



	Mobile Version:

[More]

Pagination in BlogCFC with jQuery Mobile

Fri, 18 Mar 2011 03:25:00 -0700

I've wrote how to integrate blogCFC into jQuerymobile. Honestly, it's just simple integration and don't have pagination features and comments at that time. Because it's my testing purpose and just want to play jQueryMobile. Now, it's time for me to add pagination feature in blogCFC with jQueryMobile. For about that, we need to add some codings in index.cfm and completely don't need to include posts.cfm from index.cfm of blogCFC mobile folder. Because I just took some coding reference from existing mobile version of blogCFC. First of all, we need to declare following two parameters in index.cfm.

After that, we need to replace the following coding from existing "posts.cfm" instead of "including=posts.cfm". In this point, I've changed some codes and add any needed function into it. [More]

Simple change BlogCFC mobile version to jQueryMobile

Sun, 09 Jan 2011 18:37:00 -0700

Yesterday I've upgraded my blogCFC mobile version to jQueryMobile. Currently, blogCFC use jQtouch as their mobile version. Once I saw jQueryMobile, I want to upgrade and test it at my site. Installation jQueryMobile is kinda simple. First of all, we need to include following stylesheet and JS file into our CFM page.


[link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" /]
[script src="jquery-1.4.3.min.js"][/script]
[script src="jquery.mobile-1.0a2.min.js"][/script]

After that, we need to change a bit of blogCFC mobile version index file like that. [More]

jqTouch and jqPlot

Fri, 13 Nov 2009 06:32:00 -0700

When I browse my twitter this morning, I've found two amazing jQuery cores tweeted by Raymond Camdem. These are called jqTouch and jqPlot. jqTouch stands for mobile development for iPhone, iPod and iPad. It's just for only mobile web development, not for mobile application development. jqPlot stands for charting. It's not that much cool like jqTouch. Because Coldfusion already supports Charting and which can be integrated with 3rdparty application like WebCharts3D. After browsing jqPlot, I feel onClick event is missing in these core function. I think it will be included in next version or let me know if you found these event in it.