Aleksandar • Vacić

iOS bits and pieces

Small bug fix

Building upon the techniques I wrote about, WCH is recoded in such manner. By itself, this would not warrant an entry, but I also introduced one change.

Previously, when you first call WCH.Apply("layer", "cont"), it would create an iFrame with an id of WCHhiderlayer. It will also position the iFrame to be the exact size and at exact position (exact…more or less) as the layer is (minding the positioned container). All fine until now.

However, if the layer changes its position or size, its corresponding WCH layer will not. I noticed this bug when testing out ADxMenu behavior when window is resized.

Apply method now has 3rd parameter, bResize. If its value is true, and the iFrame needed already exists, sizing and positioning will be repeated.

this.Apply = function(vLayer, vContainer, <strong>bResize</strong>) {
  if ( _bIE55 && 
    (oIframe = _Hider(vLayer, vContainer, <strong>bResize</strong>)) ) {
function _Hider(vLayer, vContainer, bResize) {
  if ( !oIframe ) {
  } else if (bResize) {
    _SetPos(oIframe, oLayer);
</strong>  }

Now you just need to decide when should this parameter be true.

Vertical menu examples

I received several e-mail requests to create vertical examples of the menus. During the Easter holidays I did them, but had no time to write event the shortest entry afterwards. (Is it just me or the amount of work that piles up while being on any holiday is so big that quickly burns any freshness from it?)

So, not to delay this anymore, I have created vertical examples.

Changes are few. What I did was to move the basic CSS rules used for submenus to the main menu as well, and re-style the main menu so that it sits comfortably at the left side.


I’ve always been a big fan of greyish interfaces. And web layouts too. From white to black with few soft grey tones…my favourite.

That said, it is damn hard to make it look likeable. It can easily look washed away, or it could be hard to read.

screenshot of my FireFox with Le Breeze theme

Kevin Davis’s Le Breeze theme for FireFox suffers not, from any of those. It’s a brilliantly designed theme which resembles old Mac OS look. He has similar theme for Thunderbird too. Great work, Kevin.

Javascript's hidden gems

I know I did not write for over a week now. I’m damn busy. Again, it’s Tim Connor’s fault. He left this fantastic link in the comments and after I read it, I was hooked so much that I’m overburning.

Mr. Crockford opened up a whole new level of Javascript programming for me. Before it, I was finally having a grip on how Javascript should be used in standards oriented pages. There, JS is not required to complete an action, but if you do enable it, you will complete it a lot quicker. The secret can simply be called..

Class abuse

As my latest WCH shows, I use one particular class to make the script working in IE5.0. I add WCHhider to any element that should be hidden when WCH is applied. That class is not in any CSS file, it is simply there as a marker.

This is a mild case of abuse.

Worse one is where I deliberately place classes on certain elements, just to be able to find them afterwards, when page is loaded. Using Mike Foster’s excellent X library you can do wonders. Here, I’m interested in xGetElementsByClassName, which returns an array of elements that have passed class name. Since all modern browsers support multiple class names, this is a sure-hit strategy.

What can you actually do with this? Well, let’s say that you have an unknown number of links on the page that all opens up the same link, but in the new window (see here, Horse form and Live commentary). There are various ways to open it up, but I wanted an accessible, yet usable stuff. Accessible means that even people with JS off can see this, and those with JS on will see it in new window.

To achieve that, I placed a regular A element, with href equal to link which should open in new window, and one dummy class.

<a href="link-to-open" class="TTwnd">....</a>

Now, on window.onload, you need to find all the links with this class and process all of them like this:

window.onload = function() {
  var aTmp = xGetElementsByClassName("TTwnd", document, "a");
  for (var i=0;i<aTmp.length;i++) {
    aTmp[i].onclick = function() {
      sHref = this.href;;
      return false;

Very neat and very useful.

Private members and inheritance

So, just when I (more of less) finished recoding all my scripts to that, inheritance comes. I have developed several large JS applications, but I always disliked the fact that each function could call any other. Even though it is fastest to code, it also creates a whole a lot of mess, with no clear structure.

I was always trying to somehow divide my scripts into namespaces (for the lack of better word). That is why you see ADXM, WCH and other prefixes. Douglas Crockford showed that Javascript can have private properties and methods as well as some sort of protected and public ones (not identical to Java or C# with same name).

So, now I’m recoding all of it again, using the parasitic inheritance to gradually build my objects. I have recoded WCH and ADxMenu to use this, only I don’t have time to post them. I’m damn busy recoding commercial work into this so I can use all the benefits of it. That work features 5 large Javascript modules, all calling each other here and there.

Now, instead of doing..

if (typeof(BS_BodyHide) != "undefined" && ...) ...

…I can use much cleaner form..

if (BS && ...) ....

This is the simplest example - possibilities are endless. And I just love it when I see something like this now: