Integreate Messi jQuery dialog with Coldfusion

Nov 19

posted by Pyae Phyoe Shein in jQuery, Coldfusion | 0 Comments Bookmark and Share

If you're getting sick of working with coldfusion built-in dialog? Here is beautiful messi jQuery dialog can integrate with coldfusion.

Include JS and CSS in your CSS first.

view plain print about
1<link rel="stylesheet" type="text/css" href="CSS/messi.css">
2<script type="text/javascript" src="JS/jquery.js"></script>
3<script type="text/javascript" src="JS/messi.js"></script>

[More]

This entry was posted on November 19, 2012 at 2:37 AM and has received 1052 views. There are currently 0 comments. Print this entry.

Change jQueryMobile default selected value in select box

May 23

posted by Pyae Phyoe Shein in jQuery, jQueryMobile, Stylesheet | 0 Comments Bookmark and Share

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.

view plain print about
1selectedIndex = select[0].selectedIndex == -1 ? 0 : select[0].selectedIndex,

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

[More]

This entry was posted on May 23, 2011 at 1:23 AM and has received 2398 views. There are currently 0 comments. Print this entry.

Change jQueryMobile Select Box active style color in iPad safari

May 19

posted by Pyae Phyoe Shein in jQuery, Javascript, jQueryMobile, Stylesheet | 0 Comments Bookmark and Share

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.

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

[More]

This entry was posted on May 19, 2011 at 10:41 PM and has received 3852 views. There are currently 0 comments. Print this entry.

Simple jQueryMobile Keypad

May 9

posted by Pyae Phyoe Shein in jQuery, iPad, Coldfusion, jQueryMobile | 2 Comments Bookmark and Share

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.

view plain print about
1<label>Enter Phone Number</label>
2<!--- store current DOM --->
3<input type="hidden" name="currentDOM" id="currentDOM">
4<input type="text" name="phone" data-inline="true" id="phone" maxlength="8" /></td>
5<a href="keypad.html"
6    data-role="button"
7    onclick="setFocus('phone')"
8    data-iconpos="notext"
9    data-inline="true"
10    data-rel="dialog"
11    data-transition="pop"
12    data-icon="gear">&nbsp;</a>

[More]

This entry was posted on May 9, 2011 at 9:46 PM and has received 5104 views. There are currently 2 comments. Print this entry.

Increase the width of select box in jQueryMobile

May 6

posted by Pyae Phyoe Shein in jQuery, Coldfusion, jQueryMobile, Stylesheet | 1 Comments Bookmark and Share

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]

This entry was posted on May 6, 2011 at 7:02 AM and has received 12626 views. There are currently 1 comments. Print this entry.

Multiple Area Chart between CFChart and HighCharts

Apr 20

posted by Pyae Phyoe Shein in jQuery, Coldfusion | 0 Comments Bookmark and Share

Sometimes, I'm really getting sick of using CFChart because it doesn't support all of Charting features like Pyramid Chart without integrating Web3Dchart. Even integrate with Web3Dchart, it's not good enough to use like Fushion Chart. That's why I was seeking the nice 3rd party chart like jQtouch. Fortunately, I found that HighCharts fully support what I really need it. That's is Area Chart. Because I'm currently developing Growth Chart feature for our current Project.

Using Multiple Area Chart with CFChart is I've already described in my older posts. Please check it out the following link http://www.ppshein.net/index.cfm/2011/1/22/Multiple-Area-Chart-in-Coldfusion

view plain print about
1<cfchart
2    chartheight="200"
3    chartwidth="300"
4    xaxistitle="Year"
5    yaxistitle="Month"
6    format="png">
7        <cfchartseries type="area">
8            <cfchartdata item="10" value="40">
9            <cfchartdata item="20" value="50">
10        </cfchartseries>
11        <cfchartseries type="area">
12            <cfchartdata item="30" value="80">
13            <cfchartdata item="40" value="90">
14        </cfchartseries>
15</cfchart>

[More]

This entry was posted on April 20, 2011 at 12:09 AM and has received 2550 views. There are currently 0 comments. Print this entry.

Vaccination Module with Coldfusion

Jan 29

posted by Pyae Phyoe Shein in Project, jQuery, Coldfusion | 0 Comments Bookmark and Share

Vaccination module is one of my pre-sales projects what I've done in our company. The object is to record of the vaccination of children. The nurse can perform the vaccine to the children in hospital and can record of the vaccination of the same children from the other hospitals. On the other hand, the nurse can trace which vaccine has been performed and which vaccine hasn't been performed yet as missed vaccination.

I've developed this module with Coldfusion 8, Oracle and jQuery. In jQuery, I've integrated with facebox jQuery plugin

[More]

This entry was posted on January 29, 2011 at 1:06 AM and has received 1670 views. There are currently 0 comments. Print this entry.

Coldfusion load content like Facebook and Twitter

Oct 14

posted by Pyae Phyoe Shein in jQuery, Coldfusion, Twitter, Facebook, Stylesheet | 12 Comments Bookmark and Share

Today, I've tested how to load content like facebook and twitter when scrolling down at the bottom of document. I feel it's cool and flexible for developers and users. As mention in previous post, don't need to include pagination and don't need to retrieve all data from database.By using like that, we can save our client time to click pagination link and don't need them to worry how many pages he/she already clicked. In this demo, index.cfm is the main page and action.cfm will display the rest of limited records when scrolling down at the bottom of document.

[More]

This entry was posted on October 14, 2010 at 7:28 PM and has received 3811 views. There are currently 12 comments. Print this entry.

Load Content like Facebook and Twitter

Oct 14

posted by Pyae Phyoe Shein in jQuery, Javascript, Twitter, Facebook | 5 Comments Bookmark and Share

Today, I found one of the new features of Twitter's new face is loading content while scrolling like Facebook. I feel it's cool and the advantage of using is don't need to fetch all records from database at once and don't need to use annoying pagination feature (I didn't say all pagination are annoying). Here is how they work with jQuery.

view plain print about
1/* Load jQuery from Google API */
2$(document).ready(function(){
3
4 /* Alert the height of content */
5 alert("Current Document Height is : " + $(document).height() + "px");
6
7 function AnotherContent()
8 {
9 /* get current Height of content */
10 var currentHeight = $(document).height();
11
12 /* increase Height of content */
13 var IncreaseHeight = currentHeight + 200;
14 $('#myHeight').height(IncreaseHeight);
15
16 /* Alert the new current height of content */
17 alert("Current Document Height is : " + IncreaseHeight + "px");
18
19 /*
20 if you wanna load another page, use this script.
21 $("#myHeight").load("index.cfm");
22 */
23
24 };
25
26 $(window).scroll(function(){
27 /* Load AnotherContent() function when scroll down to the bottom of page. */
28 if ($(window).scrollTop() == $(document).height() - $(window).height()){
29 AnotherContent();
30 }
31 });
32
33});

view plain print about
1<body>
2 <table cellpadding="4" cellspacing="1" border="1" height="640" width="100%">
3 <tr>
4 <td id="myHeight" valign="middle" align="center">What?</td>
5 </tr>
6 </table>
7</body>

This entry was posted on October 14, 2010 at 7:22 PM and has received 4481 views. There are currently 5 comments. Print this entry.

Simple Silder with Javascript

Sep 16

posted by Pyae Phyoe Shein in jQuery, Javascript | 0 Comments Bookmark and Share

As we all know, there are so many coolest silder plugin of jQuery. What I'm gonna show is Simple Slider with Javascript but no effect. It's very simple to use Slider in your webpage without including jQuery file.

Here is JS script

view plain print about
1/* scroll to absolute left */
2function toLeftAll(id){
3    document.getElementById(id).scrollLeft = 0
4}
5/*
6    id = container ID
7    range = the width of how much you want to scroll
8    pos = Scroll left or right
9*/
10function scrollDiv(id, range, pos){
11 if (pos == "+")
12     document.getElementById(id).scrollLeft += range
13 else
14     document.getElementById(id).scrollLeft -= range
15}
16
17/* scroll to absolute right */
18function toRightAll(id)
19{
20    document.getElementById(id).scrollLeft = document.getElementById(id).scrollWidth
21}

Here is CSS file

view plain print about
1<style>
2#container {
3    width: 500px;
4    height: 500px;
5    overflow: hidden;
6}
7
8#scroller {
9 width: 900px;
10}
11
12.content {
13 width: 300px;
14 height: 300px;
15}
16
17#scroller{
18    width: 900px;
19}
20</style>

Here is Usage

view plain print about
1<table width="100%">
2<tr>
3    <td align="center">
4        <a href="#null" onclick="toLeftAll('container')">first</a> |
5        <a href="#null" onclick="scrollDiv('container', 1, '500', 1, '-')">Move left</a> |
6        <a href="#null" onclick="scrollDiv('container', 1, '500', 1, '+')">Move right</a> |
7        <a href="#null" onclick="toRightAll('container')">last</a>
8    </td>
9</tr>
10<tr>
11    <td align="center">
12        <div id="container">
13            <div id="scroller">
14                <table id="t1" border="1" align="left" width="800">
15                    <tr>
16                        <td>This is ppshein 1</td>
17                        <td>This is ppshein 2</td>
18                        <td>This is ppshein 3</td>
19                        <td>This is ppshein 4</td>
20                        <td>This is ppshein 5</td>
21                        <td>This is ppshein 6</td>
22                        <td>This is ppshein 7</td>
23                        <td>This is ppshein 8</td>
24                        <td>This is ppshein 9</td>
25                        <td>This is ppshein 10</td>
26                    </tr>
27                </table>
28            </div>
29        </div>
30    </td>
31</tr>
32</table>

This entry was posted on September 16, 2010 at 5:16 PM and has received 782 views. There are currently 0 comments. Print this entry.

More Entries

Top of Page