Most of the applications I wanted did not have the support for Metric unit system! It is absolutely shocking that most American iPhone application developers didn't bother or too ignorant to realize that the rest of the world have moved on with the metric unit system. US is pretty much the only western country in the world still stuck in dark ages. (Myanmar and Liberia are the other countries) Knowing the fact that iPhone was going international and the need for the support of metric units system is essential to sell the dam software!!! 

I simply can't believe the stupidity and ignorance of these developers… It's your loss anyway!

Check out the demo where the script is applied to a table and an unordered list. 

The script 

function Zebra(parentNode, styles) {
    this.colorMe(parentNode, styles);
}

Zebra.prototype = {
    colorMe: function(parentNode, styles) {
        if (parentNode && styles) {
            var styleList = styles.split(",");
            var parents = $$(parentNode);
            for (var i=0; i < parents.length; i++) {
                var currentParent = parents[i];
                var children = currentParent.childElements();
                for (var j=0; j < children.length; j++) {
                    var currentChild = children[j];
                    var k = (j + (styleList.length)) % styleList.length;
                    currentChild.addClassName(styleList[k]);
                }
            }
        }
    }
}

Usage

Usage is pretty simple.

new Zebra(ParentNode, List of styles you like to alternate);

Example

.odd { background: #fff; }
.even { background: #edf3fe;}

new Zebra('ul','odd,even');

The beauty of it is that since its CSS driven, you can have any color imaginable and any number of colors to alternate.

“Is there a reliable way to dynamically resize the iFrame height according to its contents?”

Well according to my previous post I thought I nailed it! But I soon found out it wasn’t all that reliable! So it wasn’t the silver bullet I was hoping for. 

So as a part of “E2″ development, my mate Rob and I started on a journey to conquer this once and for all! Our findings were some what disturbing!

First of all, there ISN’T a silver bullet that solves the problem for all the browsers. The basic problem is that iFrames (along with applets) are handled differently on browsers as compared to other elements. In fact iframes are not handled by browsers at all, but by the OS. So the solution will never be the same for all the browsers. So heres what we found. 

IE 6/7

The solution is a nasty CSS hack. Until yesterday I have not heard about this trick. The trick is to have an expression like this in your CSS.

.iframe { height: expression(document.documentElement.clientHeight + "px"); }

IE being a special browser, it detects this expression and resize your iFrame accordingly. But there is a down side to this. Having expressions in your CSS affects your site’s performance. But having battered by this issue for days and nights, I am willing to go down this path for now!

FireFox 2 and 3 / Safari 3

Yes, they both behave the same way! So trick here is to wrap your iframe with a DIV tag and assign an  absolute positioning to the DIV. 

<div id="iframe_wrap"><iframe scrolling="auto" id="iframe" name="iframe" class="iframe" frameborder="0" src="source_page.html" width="100%" height="100%"></iframe></div>

And then apply styles to the DIV tag like below. 

#iframe_wrap {
position:absolute;
top: 60px;
left: 0;
right: 0;
bottom: 0;
}

This nice trick will get ride of the “double scrollbar” phenomenon as well. 

So there you go. The job is done!!! (At least for now) Special thanks to Rob for doing most of the “googling”!

But jQuery seems to be the preferred choice of most people and therefore you will find alot of sleek plug-ins on the web as compared to prototype. But unfortunately for me I can't use jQuery while using prototype because of the obvious conflicts in the syntax. (the use of $ is different on 2 frameworks). At least that's what I thought until I found this!

jQuery.noConflict();

Seems like jQuery found a way around. This is the sweetest bit of news I heard for a while!!! Because it means that i don't need to change my existing prototype code to enjoy jQuery goodness. 

1. Every table needs a body

   var table = Builder.node("table", [Builder.node("tr", [Builder.node("td")])]);

   This piece of code will render a nice table on Firefox and Safari. But unfortunately not on IE. You need to create a TBODY explicitly for IE to make sense out of this.  So you need something like   var table = Builder.node("table", [Builder.node("tbody", [Builder.node("tr", [Builder.node("td")])])]); for this to work.

2. Table with inline style attribute will break your javascript

   var table = Builder.node("table", [Builder.node("tbody", [Builder.node("tr", [Builder.node("td" , {style:"background:blue;"})])])]);

   Again this piece of code will create a table with the single cell and the background is set to blue. Works like a charm in Firefox and Safari. But not IE7! This also applies to styles applied to table rows, columns and table headers. Only way around is to define a className attribute and assign a class name or set styles directly onto the DOM element like

   object.style.background="blue";

Another very very annoying thing with prototype is that it does not have any error reporting mechanism. So the issues like these are harder to track down.

But my progress sort of stalled after I was moved from tech support to product development. I have been having too much fun working on the new E2 project, I barely have the energy or the time for a side project like this. But the idea of building an offline blog editor still intrigues me. Simply because it is still an untapped market and there is so much potential to grow. As Technorati alone tracks more than 100 million blogs today.

Now that I have no time to develop my home grown editor, I looked for one on the web. I found 2 note-worthy contenders, on the Mac platform. Ecto and MarsEdit. MarsEdit immediately captured my attention with its clean and very Mac-like UI. Ecto has more features but I didn’t really like the general flow of the application. However, Ecto is a few bucks cheaper and has rich text support which MarsEdit doesn’t. In my view MarsEdit seems to be the better software. If somehow MarsEdit can support rich text, it will definitely be the winner! 

During the E2 development I ran into a very annoying iframe resizing problem. In simple terms iframe did not automatically resize in IE after the contents of the iframe had been loaded. This used to drive me nuts since the iframe appeared to be working fine in Firefox and Safari. I looked and tried a lot of solutions available on the web and finally came up with a Prototype, javascript solution which seems to be working like a charm! So heres the code…

• The page with an iframe

<html>
<head>
<tittle>Iframe Resizing</title>
<script type=”text/javascript” src=”resize.js”></script>
</head>
<body>
<iframe width=”100%” height=”100%” scrolling=”auto” id=”iframe” name=”iframe” frameborder=”0″ src=”SOMETHING.HTML” /></iframe>
<script type=”text/javascript” language=”JavaScript”>
new Resize();
</script>
</body>
</html>

• The Prototype based javascript (resize.js )

function Resize() {
this.init();
}
Resize.prototype = {
init: function() {
var userAgent = new String(navigator.userAgent).toLowerCase();

if (userAgent.indexOf(”msie”, 0) > 0) {//Only call it on IE
Event.observe(window, ‘load’, this.resizeIFrame.bindAsEventListener(this)); //This is where the magic happens
}
},

resizeIFrame: function() {  
var frame = $(’iframe’);  
var renderedDocumentHeight = frame.contentWindow.document.body.scrollHeight;  

if (renderedDocumentHeight < 600) {       
renderedDocumentHeight = 600;//Set a minimum height in case the document is really small
}  
frame.height = renderedDocumentHeight;
}
}