Change jQueryMobile default selected value in select box

May 23

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

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 4:23 AM and has received 1568 views. There are currently 0 comments. Print this entry.

Your Ad Here

Change jQueryMobile Select Box active style color in iPad safari

May 20

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

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 20, 2011 at 1:41 AM and has received 2699 views. There are currently 0 comments. Print this entry.

How to make square shape button in jQueryMobile

May 17

posted by Pyae Phyoe Shein in jQueryMobile, Stylesheet | 0 Comments

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.

view plain print about
1<!--- line 1413 --->
2
3.ui-btn-inner {
4    padding: 2em;
5    display: block;
6    height: 100%;
7    text-overflow: ellipsis;
8    overflow: hidden;
9    white-space: nowrap;
10    position: relative;
11}

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]

This entry was posted on May 17, 2011 at 5:45 AM and has received 2362 views. There are currently 0 comments. Print this entry.

Increase the width of select box in jQueryMobile

May 6

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

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 10:02 AM and has received 11251 views. There are currently 1 comments. Print this entry.

Simple float table header with CSS

Dec 8

posted by Pyae Phyoe Shein in Stylesheet, Coldfusion | 6 Comments

Yesterday I need to upgrade GUI and function of existing project. One of files in this project, our old programmer use very very awesome code as follow:

view plain print about
1<span style="position:absolute;z-index:9">
2    <table width="100%" border="1">
3        <tr>
4            <th>ID</td>
5            <th>Name</td>
6            <th>AGE</td>
7        </tr>
8    </table>
9</span>        
10<table width="100%" border="1">
11    <tr>
12        <td>1.</td>
13        <td>PPShein</td>
14        <td>28</td>
15    </tr>
16    <tr>
17        <td>2.</td>
18        <td>Rob</td>
19        <td>27</td>
20    </tr>
21</table>

I cannot convince why he/she didn't use simple CSS for floating table header. I think he/she might be weak in CSS for sure. Because look through above coding, some of web developer might say it's dirty code or not up to HTML structure. Ok, I need to edit something in this file for float table header as follow:

[More]

This entry was posted on December 8, 2010 at 7:41 PM and has received 2696 views. There are currently 6 comments. Print this entry.

DOCTYPE Declaration for CSS

Oct 17

posted by Pyae Phyoe Shein in Stylesheet, HTML | 0 Comments

Before time, I didn't notice doctype declaration at the top of every pages and I don't either know how does it work. Yesterday, I created a new style sheet about change button style when mouse-over. As you know, it's very simple to do for developers and don't need to create much coding for it. After creating and then I tested, it doesn't work. I bet all are correct in my style. Here is stylesheet.

view plain print about
1/* button style */
2    .button
3    {
4        color: #feeef5;
5        border: solid 1px #d2729e;
6        background: #f895c2;
7        font: 14px/100% Arial, Helvetica, sans-serif;
8        padding: .5em 2em .55em;
9    }
10    
11    .button:hover
12    {
13        background: #f90442;
14        text-decoration: none;
15    }
16    .button:active
17    {
18     color: #f3c3d9;
19    }

[More]

This entry was posted on October 17, 2010 at 7:25 AM and has received 2197 views. There are currently 0 comments. Print this entry.

Coldfusion load content like Facebook and Twitter

Oct 14

posted by Pyae Phyoe Shein in Twitter, jQuery, Stylesheet, Facebook, Coldfusion | 10 Comments

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 10:28 PM and has received 2704 views. There are currently 10 comments. Print this entry.

Create gradient button with CSS

Sep 24

posted by Pyae Phyoe Shein in Stylesheet, HTML | 0 Comments

It's great that we can create gradient button with only CSS. We don't need any background image for creating gradient button anymore.

view plain print about
1/* it's just to create gradient button */
2
3.button {
4 display: inline-block;
5 outline: none;
6 cursor: pointer;
7 text-align: center;
8 text-decoration: none;
9 font: 14px/100% Arial, Helvetica, sans-serif;
10 padding: .5em 2em .55em;
11 text-shadow: 0 1px 1px rgba(0,0,0,.3);
12 -webkit-border-radius: .5em;
13 -moz-border-radius: .5em;
14 border-radius: .5em;
15 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
16 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
17 box-shadow: 0 1px 2px rgba(0,0,0,.2);
18}
19.button:hover {
20 text-decoration: none;
21}
22.button:active {
23 position: relative;
24 top: 1px;
25}
view plain print about
1/* it's just to create color manipluation */
2
3.orange {
4 color: #fef4e9;
5 border: solid 1px #da7c0c;
6 background: #f78d1d;
7 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
8 background: -moz-linear-gradient(top, #faa51a, #f47a20);
9 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
10}
11.orange:hover {
12 background: #f47c20;
13 background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
14 background: -moz-linear-gradient(top, #f88e11, #f06015);
15 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
16}
17.orange:active {
18 color: #fcd3a5;
19 background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
20 background: -moz-linear-gradient(top, #f47a20, #faa51a);
21 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
22}

view plain print about
1<!--- usage --->
2<input class="button pink" type="button" value="Submit" />

Very thanks to : http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

This entry was posted on September 24, 2010 at 7:10 AM and has received 2340 views. There are currently 0 comments. Print this entry.

Shortcut icon for iPhone

Sep 16

posted by Pyae Phyoe Shein in Stylesheet, iPhone | 3 Comments

Everybody know how to make shortcut icon for Internet Explorer, Firefox and others. But, some people doesn't know how to make shortcut icon for apple projects. For me, I recently know how to make shortcut icon for iPhone either. Well, it's just simple and totally look alike with other shortcut icon.

Ok, let's go. First of all, we need to create Icon and standard resolution is 45x45 pixels. If you create the size more than standard resolution, iPhone automatically resize to their standard size.

Here is my icon for my blog.

App-Icon

(click above image to view)

After that, we need to put this icon as shortcut icon for apple projects in our coding. Ok, here we go....

view plain print about
1<link rel="apple-touch-icon" href="app-icon.png" type="image/png"/>

How? Easy, right?

 

This entry was posted on September 16, 2010 at 8:15 PM and has received 2816 views. There are currently 3 comments. Print this entry.

Shortcut screen for iPhone

Sep 16

posted by Pyae Phyoe Shein in Stylesheet, iPhone | 4 Comments

Last day, I've created shortcut icon and shortcut screen for iPhone but only shortcut icon is done. Oddly, I don't know why shortcut screen hasn't come up in iPhone even I've put some code in my blog. Recently, MrBuzzy gave me some codes to implement what I have a need to do. It's quite cool.

If you done creating shortcut icon and shortcut screen regarding my post for your website, you don't need to open Safari browser and don't need to wait page loading screen of Safari browser if you want to open your website in iPhone. Only click on shortcut icon and browse the website without using Safari browser.

One thing forgot to mention is your site must support mobile version. Currently, my site doesn't support mobile version. :)

Here we go:

view plain print about
1<link name="viewport" content="minimum-scale=1.0, maximum-scale=1, width=device-width, user-scalable=no">
2<link name="apple-mobile-web-app-capable" content="YES">
3<link name="apple-mobile-web-app-status-bar-style" content="black-translucent">
4<!--- create shortcut icon for iPhone --->
5<link rel="apple-touch-icon" href="app-icon.png" type="image/png"/>
6<!--- create shortcut screen for iPhone --->
7<link rel="apple-touch-startup-image" href="app-welcome.png" type="image/png">

It will look alike following image:

(Click to check preview image)

This entry was posted on September 16, 2010 at 8:14 PM and has received 1855 views. There are currently 4 comments. Print this entry.

More Entries

Top of Page