Thursday, April 28, 2005

rgb color

In Firefox, I can get a node color in javascript like
window.getComputedStyle(node,null).getPropertyValue("color")
Then, I get rgb(0,%200,%200) for black and rgb(255,%200,%200) for red.

I try to convert them back to hex code, but what does "%200" mean?

Wednesday, April 27, 2005

Opacity



Does Safari fully support opacity?

Try Safari, and see the difference in the line two.
--------------------------------------------

Line one : no opacity.
Line two : 50% opacity in TD.

Line three : 50% opacity in DIV.

--------------------------------------------

Monday, April 25, 2005

Annoying image alignment.

Since Mozilla can't render vertical alignment correctly (Bugzilla Bug 276766) .
Then, I come out this solution.
------------------
A IMG {border-width:0px; vertical-align:-1px;}
-----------------

Unfortunately, this cause more truoble for IE 6.
1,  The inline align doesn't work.
<A HREF=# ..><IMG align="left"></A>

2, Table cell height can't be control any more.

<TD><A HREF=# ..><IMG xxx></A></TD>


Friday, April 22, 2005

Safari 1.3 designMode

In Safari 1.3, I try to turn iframe designMode="on".
I can type in something, copy/paste, and turn text bold by ctrl+b, but nothing happen when I try to use execCommand() to apply bold font.
Not sure what's going wrong, but I doubt either document or TextRange object not same as IE/Mozilla.

So far, the available resource is very limited. I see few people raise this question in Dave Hyatt blog, but no one have answer yet.
Event, Apple doesn't provide any sample.

Not sure is good idea to implement HTML editor for Safari 1.3.
Safari 1.3 is Apple a big step, but still have a lot of things need to improve.

Safari 1.24 and Safari 1.3 coexist

Before I updated to OS 10.3.9, I duplicated Safari, and I renamed the
duplicated one as Safari 1.2.4.

After I updated to 10.3.9, I found that duplicated one became 1.3, so I
renamed them properly.
I got one called "Safari 1.2.4", the other "Safari 1.3".

Then, I checked both user agent.
Safari 1.24 : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/312.1 (KHTML, like Gecko) Safari/125.12
Safari 1.3 : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/312.1 (KHTML, like Gecko) Safari/312

I am wondering that Safari 1.24 is really 1.2.4 or not.

Thursday, April 21, 2005

Expand iframe to no scroll bar

I have a piece of JS code to expand iframe size, then scroll bar disappears.

//sample iframe code for ccExpandIFrame
//<IFRAME SRC="foo.html" NAME="dynamicFrame" marginHeight="0" marginWidth="0" width="100%" //FRAMEBORDER="no" SCROLLING="yes" onLoad="ccExpandIframe(this)">
//</IFRAME>
function ccExpandIframe(fooFrame) { // only good for page in the same domain name.
 
  location.hash="#";      
    var fooWin = eval("window." + fooFrame.name);
  if (document.getElementById) {
      try {
      //if (location.hostname == fooWin.location.hostname) {

            var fooBody = fooWin.document.body;
            var fooHeight=fooBody.scrollHeight + fooBody.offsetHeight - fooBody.clientHeight;
            var fooWidth=fooBody.scrollWidth + fooBody.offsetWidth - fooBody.clientWidth;
            fooFrame.style.height = fooHeight;
            fooFrame.style.width = fooWidth;
        fooFrame.style.borderStyle="none";
            if (document.all) {
          fooBody.scroll="no";
          fooFrame.frameBorder=0;
        }
      //}
      } catch (e) {}
  }
}

But my problem is when I try to include other site into iframe, permission denied is triggered. Once cross domain, the other domain window object can't be accessed.

The only way I can access is IFRAME object. Still need to find out a way when IFRAME showing scroll bar, but it's pretty much dead end.

Alex Blog: Tableless layout

I posted in from my e-mail client, why my html code shows up?

Let me enter my previous sample codes again.

<table>
<tbody><tr>
<td align="right">Name : </td>
<td>Alex</td>
</tr>
<tr>
<td align="right">Phone :</td>
<td>555 1234</td>
</tr>
</tbody>
</table>

Wednesday, April 20, 2005

Tableless layout

I really try to reduce tables in my html page; especially, nesting tables.
But, when I try to implement it, there are a lot of challenge, like
browser bugs or no way to do that.

For example, I have a simple table layout like that :
.............










Name : Alex
Phone : 555 1234

............
I would like to have the first column right alignment. I can't use fixed
width for the first column, since I may have very long label.

I would like to find out what is the equivalent html code for the above
sample. Remember, this layout can be in the middle of page or end of page.