Archive for the ‘HTML’ Category

So color in KML is in aaBBGGRR!

September 20, 2011

not in aaRRGGBB as you normally expect:

<color>ffFFFF00</color> is cyan

<color>ffff00ff</color> is pink

Simple solution: PNG-24 alpha transparency on IE 6

January 30, 2010

This solution only uses CSS and doesn’t involve creating additional images other than the single source PNG-24 file. The point is to put the image in a div, using IE specific “filter” extension for IE6 only and background-image for other browsers only. I’ve tested on IE6/7, FF3.5 and Safari.

HTML:

<div id=”header”>
<div id=”hdr_content”><div id=”hdr_logo”></div></div>
</div>

CSS:

#hdr_logo{
background: url(“images/logo_24.png”) repeat-x;
/*IE6*/
*background: none;
width: 191px;
height: 34px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo_24.png’, sizingMethod=’scale’);
}

Parsing PHP in .html Files

December 9, 2009

Add/Append the following lines in you .htaccess file in your web server.

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html

Source

Notes for Building iPhone With HTML, CSS and JavaScript by Jonathan Stark

October 17, 2009

The book. Author: Jonathan Stark.

  • Page scaling in iPhone
    By default Mobile Safari will zoom out for a page that is wider than 980px unless you specify “viewport” <meta> tag to tell it not to;

    <meta name = "viewport" content = "user-scalable=no, width=device-width" />
  • CSS for iPhone
    <link rel=”stylesheet” type=”text/css” href=”styles/iphone.css” media=”only screen and (max-device-width: 480px)” />
    <link rel="stylesheet" type="text/css" href="styles/desktop.css" media="screen and (min-device-width: 481px)" />
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="styles/desktop.css" media="all" />

    <![endif]-->
  • Icon for iPhone home screen, a.k.a. “web clip icon”By default, this is a 57px by 57px named “apple-touch-icon.png” in your web root. iPhone will add gloss and 10px(?) radius rounded corner to it. If you don’t want the iPhone to add effects to your webclip icon, change the name of the file to “apple-touch-icon-precomposed.png“.In the case you want to add a web clip icon for an individual page that is different from the rest of the site, add one of the following lines to the of the page:

  • <link rel="apple-touch-icon" href="myCustomIcon.png" />
    <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />

  • Full-screen modeAdd the following line to the of your page and your web app will in display full screen mode when launched from the web clip icon, which will give you an extra of 104 px in height:

    <meta name="apple-mobile-web-app-capable" content="yes" />

    Once you’ve added the apple-mobile-web-app-capable meta tag, you have the option to control the background color of the 20 pixel status bar at the top of the screen using the apple-mobile-web-app-status-bar-style meta tag. The normal gray Safari status bar is the default, or you can change it to black. You can also set it to black-translucent which makes it partialy transparent and additionally removes it from the document flow. In other words, your content will be shifted up by 20 pixels and behind the status bar the when page first loads, so you might have to position your header a little lower to compensate.

  • Here are some webkit(?)/Safari specific CSS or newer CSS3 attributes or confusing ones:

  • text-shadow
    text-shadow: 0px 1px 0px #fff;

    The parameters: horizontal offset, vertical offset, blur, and color.
  • -webkit-gradient
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    a CSS gradient can be used anywhere you would normally specify a url() (e.g. background image, list style image). The parameters from left to right are as follows: the gradient type (can be linear or radial), the starting point of the gradient (can be left top, left bottom, right top, or right bottom), the end point of the gradient, the starting color, and the ending color.
  • -webkit-border-top-left-radius, etc.
    #header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    }
  • first-child/last-child pseudo classes

    #header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    }
    #header ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    }

    The first-child and last-child pseudo classes can be a bit confusing. For example, li:first-child will select the first li that is the child of its ul parent. It does not select whatever is the first child of the li.
  • rgb/rgba
    text-shadow: rgba(125,125,125,0.6) 0px -1px 0px;
  • -webkit-border-image and border-width
    border-width: 0 8px 0 8px;
    -webkit-border-image: url(images/button.png) 0 8 0 8;

    These two propoerties together allow you to assign portions of a single image to the border area of an element. They are similar to 9-slice scaling in Flash or 9-patch in Android. The parameters in border-width refer to top/right/bottom/left side of the image.

JSON to XML

June 1, 2009

A lightweight plugin for Eclipse. Works good for me on Flex Builder 3 (v3.0.1.2x).

JavaScript xml2json and json2xml.

“Unexpected end of token stream when parsing XML”

April 29, 2009

When I tried to load an external xml file using an XML tag, I got something like this from Flex Builder:

“Problem parsing external XML. Unexpected end of token stream. The last token was: 360.”

The file was built in Nodepad++ and was displayed fine in Firefox as well as in Eclipse/FB. When I got the error message, I then tried to load it in IE, which also gave me an error. What I did to fix it was going back to Nodepad++ and  “Format>Encode in UTF-8“, which basically changed the encode from ANSI (the default one for Notepad++) to Unicode. I got several “special” unicode characters such as 360° in my orignial XML file.

Loading data in Flex 101

December 16, 2008

First of all, all the Flash ways of loading data are available for Flex.

Then there are some Flex specific ways (depending on whether it’s Adobe Flash Player application or Adobe AIR application).

Using the HTMLControl Class in Adobe AIR to parse HTML as a data source

eveyday unicode characters in web design

July 14, 2007

» & raquo;
& #149;
•  & #8226;
& & amp;
non-break space & nbsp;
en-dash/– & ndash;
em-dash/— & mdash;
Opening Double Quotes & ldquo;
Closing Double Quotes & rdquo;

Sources:

Unicode character finder

HTML accent entity codes

align form elements

May 16, 2007

I had a brief hard time trying to align a few form elements
, e.g., “text” input, text label and “image” input. The following code will roughly do the work:

<!– sample code–>

<form action=”” id=”srchNameFrm” onsubmit=”return false;”>
<div class=”labellit”>Find alderman by name:</div>
<input type=”text” size=”25″ height=”22″ name=”alname” id =”alNameTxt” value=”” onFocus=”toggleAddrFeedback(false);” />
<input alt=”submit” type=”image” src=”images/go_btn41x18.gif” width=”41″ height=”18″ border=”0″ align=”top” value=”Go!” />
</form>