Against All Odds - Stylesheet

Background image with percentage

Sat, 09 Mar 2013 05:19:00 -0700

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.



.mybg {
background: url("img") no-repeat center left;
}

Here is modern adjustment



.mybg {
background: url("img") no-repeat 50% 25%;
}

It's cool, isn't it?

Disable style in CSS

Wed, 12 Dec 2012 23:03:00 -0700

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.


input[type="text"], input[type="password"]{
	color: #000000;
	border: solid 1px #999999;
}

select {
	color: #000000;
	border: solid 1px #999999;
}

[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]

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]

Simple float table header with CSS

Wed, 08 Dec 2010 16:41:00 -0700

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:



	
		
			ID
			Name
			AGE
		
	
		

	
		1.
		PPShein
		28
	
	
		2.
		Rob
		27

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]

DOCTYPE Declaration for CSS

Sun, 17 Oct 2010 04:25:00 -0700

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.


	/* button style */
	.button 
	{    
		color: #feeef5;    
		border: solid 1px #d2729e;    
		background: #f895c2;    
		font: 14px/100% Arial, Helvetica, sans-serif;    
		padding: .5em 2em .55em;
	}
	
	.button:hover 
	{    
		background: #f90442;    
		text-decoration: none;
	}
	.button:active 
	{
	    color: #f3c3d9;
	}

[More]

Coldfusion load content like Facebook and Twitter

Thu, 14 Oct 2010 19:28:00 -0700

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]

Create gradient button with CSS

Fri, 24 Sep 2010 04:10:00 -0700

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


/* it's just to create gradient button */

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}


/* it's just to create color manipluation */

.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

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

Shortcut icon for iPhone

Thu, 16 Sep 2010 17:15:00 -0700

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.

(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....

How? Easy, right?

Shortcut screen for iPhone

Thu, 16 Sep 2010 17:14:00 -0700

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:

It will look alike following image:

(Click to check preview image)

Rounded Corner for IE

Wed, 23 Jun 2010 06:32:00 -0700

If you want to make rounded corner box for everything, you may use integrating with images and css. Unless, For firefox, you can set border-radius by prefixing "-moz" to the css property. And ofcource for webkit use "-webkit. For IE, border-radius doesn't work on it. That's why we need to integrate images and css for doing rounded corner. If you're sick of doing so, you can use following coding: CSS


.curved {
	padding:4px 0px 0px 0px;    
	width:80px;     
	height:20px;     
	border:#666666 solid 1px;     
	color:#000000;     
	text-align:center;     
	-moz-border-radius:20px;     
	-webkit-border-radius:10px;     
	behavior:url(border-radius.htc);
}

The HTML:


rouneded div

Best Credit to : http://www.htmlremix.com/files/20080924-border-radius.zip

Automatically choose stylesheet file with users' browser

Sat, 30 Jan 2010 06:32:00 -0700

As being web-developer, we need to consider our websites must be compatible with every browsers. When I was lack of experiences in Web Developement, some of my websites are ok with only Internet Explorer. In firefox or Opera, the structure of my websites are distortion and awful. That's why I need to do all of my site to be compatible with all browsers whenever I start creating. And, need to do our site can choose appropriate stylesheet up to users' browser. Because we cannot do only one stylesheet file can be compatible to every browser. Here is coding:




(For Chrome, firefox so on)

Transparent PNG Image in Internet Explorer

Wed, 20 Jan 2010 06:32:00 -0700

Some designers might say PNG image type is the best in Web Development. Because it has good resolution, less file size and so on than JPEG. But it's a problem that its background cannot be transparent in Internet Explorer like Gif format. And, we cannot do it can be transparent with CSS coding. But, don't worry. I can point out how to make PNG image background to be transparent in Internet Explorer. iepngfix.htc




// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = '[root]/blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s, m)
{
 if (filters[f])
 {
  filters[f].enabled = s ? true : false;
  if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
  (event && !/(background|src)/.test(event.propertyName))) return;
 var bgImg = currentStyle.backgroundImage || style.backgroundImage;
 if (tagName == 'IMG')
 {
  if ((/\.png$/i).test(src))
  {
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   filt(src, 'scale');
   src = blankImg;
  }
  else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
  if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
  {
   var s = RegExp.$1;
   if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    style.width = offsetWidth + 'px';
   style.backgroundImage = 'none';
   filt(s, 'crop');
   // IE link fix.
   for (var n = 0; n < childNodes.length; n++)
    if (childNodes[n].style) childNodes[n].style.position = 'relative';
  }
  else filt();
 }
}
doFix();

And, you must put blank.gif image into your root. To include above file in stylesheet.css like that :

span#logo img {behavior: url("iepngfix.htc");}

How.?? It's easy, isn't it?