HTML5 postMessage()

postMessage() is allow javascript to communicate cross domain. This is very interest feature. There is a simple demo in http://ejohn.org/blog/cross-window-messaging/.

With this feature, single sign on and web service can be done in the client. Hopefully, this feature is not going to open new chapter of security issue.

Use CSS to create vertical Text

IE got more simple solution by setting style attribute "writing mode".


<style>
.vt {
writing-mode: tb-rl;
filter: flipv fliph;
}
</style>

<div class="vt">Vertical Text</div>


For the rest of browsers, need to use SVG.

<embed class="svgex" src="vertical_text.svg" type="image/svg+xml" frameborder="no" width="30" height="90" />


For svg,

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
//this will create htmljavascriptfunctionname in html document and link it to changeText
top.htmljavascriptfunctionname = changeText;
function changeText(txt){
targetText=document.getElementById("thetext");
var newText = document.createTextNode(txt);
targetText.replaceChild(newText,targetText.childNodes[0]);
}
// ]]>
</script>
<text id="thetext" transform="rotate(270, 90, 0)" font-size="12" x="3" y="-60" font-family="Verdana">Vertical Text</text>
</svg>

The svg code is modified from http://www.thescripts.com/forum/thread721811.html.
I just make it work, but I think the width/height will change base on content.

Firefox 3 beta 3

I am very impressed Firefox 3 beta speedy. Right now, I feel it fly like Safari 3.

One thing I don't really like it is "Location bar & auto-complete" because the search result is too wide. And, it really change user experience. For example, I type "d", Firefox 2 shows the first item on the list is "digg .com", but not Firefox 3. I prefer auto-complete to work on url search only.

I also try to see how good its memory management, so I let it run a day and back to my start up page, default google search page. Windows Task Manager show 90 MB. The first start up page is 26 MB only. Looks like there is still big gap to improve in the memory management.

Generally, I give thumb up for it.

Happy 2008

I got Happy 2008 signature from somewhere. I try to apply style sheet to close all gaps.
Almost perfect, but still can not align Y.
Happy 2008

Spray form validation demo

Today, I am looking Eclipse plugin and find a interested javascript editor, JSEclipse.

I am also browsing around Adobe Labs to see other helpful resources.
I always doubt how to design AJAX framework. So I check Spray and get some concept of how to design some APIs. I look at form validation demo and its source codes. The AJAX validation is registered at the end of page, which make the code very portable. But I have different view of those attributes related validation, like minChars:20, maxChars:180 in the textarea. I believe it's better put those attributes into TEXTAREA object for easy maintenance.

Looking for a plugin in Eclipse to export Structure Compare report

In the CVS repository Exploring, I can compare by day and the result come out a tree list. I only get "Expand All" in the context menu. Can any plugins export the tree list to a report?

I have two kind of sources (english and chinese in html files). English is developing mainly and I would like to synchronize chinese files immediately and need a way to verify sources. If you have any idea, please advice. Thanks in advance.

Spaces not displayed when adding Options to Select box

With Option object, you can add multiple spaces to IE, but Firefox.

To work around it, see my sample code.


<FORM name="myForm">
Location (building room) <SELECT name="loc" style="font-family:monospace,Courier,Courier New;font-size:12px"></SELECT>
</FORM>

[SCRIPT language="JavaScript"]
function addOption(obj, text, value) {
value += ""; //in case of number
if (!document.all) { //Firefox
text = text.replace(/\s/g, "\xA0");
}
var newOption = new Option(text,value);
obj.options[obj.options.length] = newOption;

return newOption;
}

addOption(document.myForm.loc, "Please select location" , 0);
addOption(document.myForm.loc, " City Hall          A101" , 1);
addOption(document.myForm.loc, " Governor Hall      1" , 2);
addOption(document.myForm.loc, " Constitution Hall  1" , 3);
addOption(document.myForm.loc, " State Hall         1" , 4);
[/SCRIPT]

Firefox innerHTML is not synchronized with DOM

Here is solution.

I remember I have this problem before. Today, I meet this problem again.

Problem with IE print preview and window.close()

In IE, when window.close() or self.close() is executed, the window is closing perfectly. But when after opening a print preview window from file menu in IE and after closing the print preview with [X] button, then the window.close() is not working. Is there any solution to close the window even after closing the print preview window?

I am looking this solution, too. Unfortunately, this post land to wrong forum and no answer provide.

javascript form reset()

Today, I am looking at the a problem at form.reset().

I found out form.reset() function suppose to be reset all form objects to original values.

I have problem in this situation :
If I delete an OPTION from a SELECT, reset() function won't recover original item.

I can't find any answers on the web.

innerText and textContent

Try to use your HTML text/code for your confirm dialog message, below is my sample.



document.getElementById("msg").innerText is perfect for IE, but Firefox.

document.getElementById("msg").textContent works for Firefox, but loses all line breaks.



So I come out my solution :

<div style="display: none; visibility: hidden;" id="msg">
Deleting this category will lose all articles.
Do you really want to do it?</div>

<SCRIPT>
function confirmDeletion() {
 var msg = document.getElementById("msg").innerHTML.replace(/
/ig,"\n");
 if (confirm(msg) ) {
   ....
   form.submit();
 }
 return false;
}
</SCRIPT>

LEGEND and H2

<FIELDSET>
  <LEGEND><h2>build your pizza</h2></LEGEND>
  <LABEL><H3>select your toppings</H3>
    <SELECT name= "toppings" multiple>
      <OPTION>cheese</OPTION>
      <OPTION>Pepperoni</OPTION>
    </SELECT>
    </LABEL>
  <LABEL><H3> pick a crust:</H3>
  <INPUT type= "radio" name= "crust" value= "deep dish" checked> deep-dish<BR>
  <INPUT type= "radio" name= "crust" value= "whole wheat"> whole wheat</LABEL>
</FIELDSET>

In the above sample layout, I can see the header H2 in the Fieldset outline correctly only in IE, but Firefox.

This gives me some trouble. I would like to use FIELDSET for better layout. Also, I would like to use H2 for better accessibility -- screen reader (JAWS) can separate different section of content. Unfortunately, it doesn't look great in Firxfox. Sine I have urgent of accessibility. I need to drop FIELDSET/LEGEND.

Silverlight

Just install silverlight on IE7.

After refresh the silverlight home page, I got

Silverlight Error :

Error Type: DownloadError
Error Message: AG_E_NETWORK_ERROR
Error Code : 4001


Not very good start.

Excel can't open .csv file with UTF-8 encoding content.

This is my another day pain.

This is what open office can do, but not excel.

MSN virtaul Earth

It's interested three major internet services(Google, Yahoo, MSN) competing each other. Microsoft is the one like to chase Google.

Google got the 3D Map for a while. I were fascinated that we can fly around the around and see trees, rivers, houses. The satellite map is really helpful to visualize the distance from the top and give me more solid idea from point to point and turn to turn because I can always reference the building, landmark. I trace through train rail line, my bike route, and optimize the local route.

At sometime, MSN came out satellite map, too. Unfortunately, the map was so old. I didn't see my house and the community I living and that's black white. I were wondering that picture was taken back to '80s. Despite the recent MSN claim whatever they have and improvement, I still see the same old map.

Safari 3 auto update

One time, I did update to 3.01. After that, I still got 3.02 upgrade dialog.
I was busy at that time, and decide to do it later. So, I canceled the upgrade.

Well, where is the auto upgrade in the Safari 3? I don't see it in the menu and preference.

I just want to check Safari is still hanging in https.

HTML required fields

In HTML5, it defines "required" attribute for the required fields. The example is

<ul>

<li><label> Name: <input type="text" name="name" required="required" /></label></li>

<li><label> Comment: <input type="text" name="comment"
/></label></li>

</ul>



In the W3C WCG20, SCR25: Using Dynamic Web Content Accessibility to programmatically identify form fields as required, it also mentions "required" attribute for required fields. But, in that script sample, it shows

setAttrNS(field, "required", "true");

And, screen reader should be able to read out.



Both above sites use the same attribute "required". My question is here :

Can screen reader still read out if required="required"?

I incline to HTML5 since it's much clean and easy in the design.

AWAI Member :: View topic - For Those Who Use XSitepro...

AWAI Member :: View topic - For Those Who Use XSitepro...

Copy-and-paste from word containing the following line is really trouble.


<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />


I am wondering what kind of environment will produce that namespace.

Safari 3 on Vista

I just have a Safari 3 installed on Vista. I am experiencing extreme slow in https. Almost, can't load the page and eventually crash.

I am still looking some sites. It's interested to see mac style (scroll bar, button) on the window. Even, the native style of BUTTON tag.

IE input % width problems

IE input % width problems

Today, I got the same problem, too.