Aleksandar • Vacić

iOS bits and pieces

csshover.htc and IE freeze

When I tried to implement csshover.htc-enabled ADxMenu on the client website, I was greeted with very unpleasant behavior. On the very long page or complicated page, IE would freeze for a period of 10-15s. Download stops, but it does not give you the control over page until it finishes processing. Don’t know what exactly it’s doing, but I guess it might be going through complete document tree, for each new hover rule. Or I could be spitting nonsense.

Whatever it is, it was unbearable. Hence the version 2b.

I didn’t do anything spectacular. First, I reincarnated the double style rules - one for IE, one for all other:

#menu li:hover,

* html #menu li.<strong>iehover</strong> {

    ...

}

Then in the script, for each li element, I added the class changing code, shown here and there over the Net:

oMenuLI.onmouseover = function() {

    this.className += " iehover";

};

oMenuLI.onmouseout = function() {

    this.className = 

        this.className.replace(" iehover", "");

};

All else is identical to existing menus. For those who want to have perfectly valid CSS files, this script is the way to go.

I took the opportunity to implement WCH3. All 2.x examples are updated to use WCH3 and latest corresponding versions of ADxMenu script.

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 ) {
    ...<strong>
  } 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.

Breeeeze

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.