Get the viewing plane .. correctly

As I've mentioned in previous post, we can use window.innerHeight to get the current viewing plane for the browser. However, since there are 2 documents inside a browser, putting them in either of them gave different values.

- reason:
- window.innerHeight called in Chrome level, return the browser's height
- window.innerHeight called in document level, return the viewpoint's height

- fixed using document.defaultView

This is a diagram taken from MDC:

#document
  window                 main-window
     ...
     browser
         #document
              window         myExtensionWindow)

As you can see, since they are on different levels, calling window.innerHeight will gave different values. The higher <window> is the window for the whole browser, whereas the lower <window> is the window of the viewing plane.

get image size after image is fully loaded

If we need to get the size (width and height) of an image, in order to manipulate it, we first need to make sure that the image is fully loaded inside the web document. But at most time, we may not need to render the image, we just need the size. so here is a neat way to do this:

- using Image() object to load an image internally, without displaying the image in the doc, and then get the size.

function getWidthAndHeight() {
   alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
   return true;
}
function loadFailure() {
   alert("'" + this.name + "' failed to load.");
   return true;
}
var myImage = new Image();
myImage.name = "someimg.jpg";
myImage.onload = getWidthAndHeight;
myImage.onerror = loadFailure;
myImage.src = "someimg.jpg";

With this code, the image is 'silently' being loaded into the current document. The image is attached with an 'onload' event listener, that calls a function named getWidthAndHeight() Note that onload event for images are only triggered after the image is fully downloaded to the browsers cache. So then, they will be no problem for us to get the correct size.

Thanks to phpnovice for his solution taken from webdeveloper.com

Detect when user resizes browser

There is a couple of ways to listens to the event triggered when a user resizes Firefox:

body.onresize
- when put an alert function for testing purpose, it alerts only once
- must be put inside loaded doc body, otherwise can't utilize 'body' var
- not valid HTML 4.0 spec

window.onresize
- alert twice
- can be put on chrome level or in document level
- valid HTML 4.0 spec

after some more tests:
- self.screen.availHeight = the whole screen height - taskbar height // not reliable
- window.innerHeight
- seems to be working accurately

XPCNativeWrapper : The DOM and Javascript Access Protector

During my search for solution for the previously mentioned problem, I stumbled upon a XPCNativeWrapper, a wrapper that wrap around DOMs and javascript codes, to protect if from XSS (Cross side server script) or unprivileged codes that may change the behavior of one's website or in Mozilla's case, the browser itself.

The praised functionality of a browser to allow DOM manipulation has make web-based and browser-based development more exciting. Yet, malicious codes will always try to do unethical thing, such as steal usernames and passwords as reported by Greasemonkey community.
Hence, a protector such as this is adequate.

Thanks to developers of Mozilla-based browsers, XPCNW has been enabled by default for Firefox version 1.5 and above.

Master document handling issues on different OSes

A new phenomenon has been discovered as we were testing TT on different OSes, just to try and see whether TT is stable. Here is the summary:

Test run on:
WinXP Home..... OK
Ubuntu 7.04..... OK
WinXP Pro........ NOT WORKING
Mac Os X........ NOT WORKING

The error returned was it can't find a toolbar with the given id, which I placed clearly on top of the status bar. I seems strange that the same codes won't work on different OSes.

After further research and scouring into one of my firefox extension (DownBar), which I'm trying to replicate, I realized that we need to specify the parent node of a an XUL element we are trying to access, as explicitly as possible. Consider my previous codes:

<overlay>
....
<toolbox align="end" insertbefore="status-bar" hidden="true">
<toolbar id="tlbid">
<!--content will be added dynamically-->
</toolbar>
</toolbox>
....
</overlay>

and I was trying to get the <toolbar> element by using document.getElementById('tlbid'). Apparently this works only on WinXP Home and Ubuntu. To overcome this bug, we need to specify the parent of <toolbar> which is actually <window>. so the correct codes will be:

<overlay>
....
<window id="main-window">
<toolbox align="end" insertbefore="status-bar" hidden="true">
<toolbar id="tlbid">
<!--content will be added dynamically-->
</toolbar>
</toolbox>
</window>
....
</overlay>

The piece of code above explicitly told the browser that the toolbar with id 'tlbid' is a child node for the main window for firefox browser. I guess this helps the DOM manager to find the element required, effectively.

Call function after user is connected...success!

As mentioned in this xmpp4moz thread, I was having problem on my PC, calling an alert() function after a user is connected. But the problem never occurred when tried on a Mac. Fortunately thanks to Bard, who releases a new version of xmpp4moz and SamePlace a couple of days earlier, this problems has been fixed. So everything is working in order now.

Newline / Line break inside layered divs

Imagine this codes:

<div id="layer1" style="position:absolute; width:....."> This is some text <BR> and this is a new line </div>
you will be given the output of:
This is some text and this is a new line

simple right?

But unfortunately, <BR> can't be use to append a line break or a new line in a sentence, dynamically, using innerHTML or textContent:

<script> document.getElementById('layer1').innerHTML = "This is some text <BR> and this is a new line" </script>

<div id="layer1" style="position:absolute; width:....."> no text yet </div>

It will give you:
This is some text and this is a new line

So how to overcome this?

Just use "\n" instead :D

<script> document.getElementById('layer1').innerHTML = "This is some text \n and this is a new line" </script>

Are You Indie?

I wasn't able to dwelve further into TT develepment since last week till today, because I was assigned to put up a website for the IndieCade festival.

IndieCade: The International Festival of Independent Games

IndieCade is the premiere annual festival for the future of independent games. The festival, planned for three undisclosed days in 2008, will feature continual screenings and hands-on play opportunities, game design jams, a play-testing atelier, large-scale social games, works-in-progress, workshops by creative industry legends, a gamemaking tools emporium, and a special mini-festival honoring the indie spirit in legacy games. Culminating in a gala award game show, IndieCade will be an unprecedented assembly of industry insiders, bellwether gamemakers, and players looking for the newest and most groundbreaking independent games.

- areyouindie.com

They have a booth in E3, happening in LA right now, showcasing some of the participating game videos. We will have another promotional event in London after this. IndieCade will be held on an undisclosed date, in spring 2008.

REF: Realtime Google Map sharing through XMPP messages

He's developing a realtime shared map that you can use to plan a travel with your friends in realtime while you chat with them.
http://www.pixzone.com/blog/231/realtime-google-map-sharing-through-xmpp-messages/
http://www.pixzone.com/blog/233/realtime-shared-google-map-screencast/