Background image with percentage

Mar 9

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

Today, I've found that we can adjust background image with percentage in CSS. The time before I knew only to adjust background image with two positions. It's left, right, center and bottom, up position. Now I know is to adjust by percentage for those two positions.

view plain print about
1<!--- transitional background image adjustment --->
2.mybg {
3background: url("img") no-repeat center left;
4}

Here is modern adjustment

view plain print about
1<!--- transitional background image adjustment --->
2.mybg {
3background: url("img") no-repeat 50% 25%;
4}

It's cool, isn't it?

This entry was posted on March 9, 2013 at 5:19 AM and has received 510 views. There are currently 0 comments. Print this entry.

Disable style in CSS

Dec 12

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

Today I've found that how to create CSS for disable input form. It's very useful and we can do separate class for those event. Here is CSS for normal input event.

view plain print about
1input[type="text"], input[type="password"]{
2    color: #000000;
3    border: solid 1px #999999;
4}
5
6select {
7    color: #000000;
8    border: solid 1px #999999;
9}

[More]

This entry was posted on December 12, 2012 at 11:03 PM and has received 714 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 2396 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.

How to make square shape button in jQueryMobile

May 17

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

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 2:45 AM and has received 4461 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 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 12625 views. There are currently 1 comments. Print this entry.

Simple float table header with CSS

Dec 8

posted by Pyae Phyoe Shein in Coldfusion, Stylesheet | 9 Comments Bookmark and Share

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</th>
5            <th>Name</th>
6            <th>AGE</th>
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 4:41 PM and has received 4787 views. There are currently 9 comments. Print this entry.

DOCTYPE Declaration for CSS

Oct 17

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

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 4:25 AM and has received 3080 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 3808 views. There are currently 12 comments. Print this entry.

Create gradient button with CSS

Sep 24

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

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

More Entries

Top of Page