IE Collection!

IE collection is actively maintained (as of this writing atleast) and can install everything from IE 1.0.

In the end, I just used ie9 developer tools to enable IE 7 browser and document modes. But, IE Collection is still a fantastic tool.

The way this works is… The parent window can set the url of the child iframe, and the child iframe can set the url of the parent window. The only hangup, is that both windows need to know the correct location for the other window before they can properly set the hash on the other’s url without navigating the other to a different url…

Recently I explored methods of accomplishing this for a project I was working on. After trying a few solutions I came up with a simple clean solution that works GREAT if both sides already know the url for the other… And acutally, for resizing, only the page in the iframe needs to know the right url for the parent, as the communication is only one way… Below is the code… (jQuery is required, but this could easily be changed just by setting the function as an event handler without jQuery.)

So… On all pages in the child iframe you want to resize make sure jQuery is installed and add this code…

jQuery(document).ready(
	function(){
		iframe_resize_extend_jQuery();
		if (top != self) {
			var parent_url = jQuery.getUrlVar('parent_url');
			if(parent_url){
				parent_url = unescape(parent_url);
				jQuery.cookie('parent_url', parent_url);
			} else {
				parent_url = jQuery.cookie('parent_url');
			}

			if(parent_url){
				var url = parent_url + '#'  + document.body.scrollWidth + 'x' + document.body.scrollHeight;
				parent.location = url;
			}
		}
	}
);

function iframe_resize_extend_jQuery(){
	if(!jQuery.cookie) jQuery.cookie = function(name, value, options) {
		if (typeof value != 'undefined') { // name and value given, set cookie
			options = options || {};
			if (value === null) {
				value = '';
				options.expires = -1;
			}
			var expires = '';
			if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
				var date;
				if (typeof options.expires == 'number') {
					date = new Date();
					date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
				} else {
					date = options.expires;
				}
				expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
			}
			// CAUTION: Needed to parenthesize options.path and options.domain
			// in the following expressions, otherwise they evaluate to undefined
			// in the packed version for some reason...
			var path = options.path ? '; path=' + (options.path) : '';
			var domain = options.domain ? '; domain=' + (options.domain) : '';
			var secure = options.secure ? '; secure' : '';
			document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
		} else { // only name given, get cookie
			var cookieValue = null;
			if (document.cookie && document.cookie != '') {
				var cookies = document.cookie.split(';');
				for (var i = 0; i < cookies.length; i++) {
					var cookie = jQuery.trim(cookies[i]);
					// Does this cookie string begin with the name we want?
					if (cookie.substring(0, name.length + 1) == (name + '=')) {
						cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
						break;
					}
				}
			}
			return cookieValue;
		}
	};

	if(!jQuery.getUrlVars) jQuery.getUrlVars = function(){
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
		  hash = hashes[i].split('=');
		  vars.push(hash[0]);
		  vars[hash[0]] = hash[1];
		}
		return vars;
	};

	if(!jQuery.getUrlVar) jQuery.getUrlVar = function(name){
		return jQuery.getUrlVars()[name];
	};
}

And, on the parent window add...

var refreshFrequency = 30;
var extraHeight = 0;
var extraWidth = 0;
var lastHeight = 0;
var lastWidth = 0;
var iframeId = 'resizeIframe';

function checkIFrameSize(){
  if(window.location.hash && document.getElementById(iframeId)){
    var currentHeight = parseInt(document.getElementById(iframeId).style.height.replace(/[^0-9]/g, ''));

    var dimensions = window.location.hash.split('x');

    if(dimensions.length == 2){
        var width = parseInt(dimensions[0].replace(/[^0-9]/g, ''));
        var height = parseInt(dimensions[1].replace(/[^0-9]/g, ''));
    }
    if(!isNaN(width) && !isNaN(height)){
        var newWidth = (width + extraWidth);
        if(lastWidth != newWidth){
            document.getElementById(iframeId).style.width =  (newWidth) + 'px';
            lastWidth = newWidth;
        }

        var newHeight = (height + extraHeight);
        if(newHeight != lastHeight){
            document.getElementById(iframeId).style.height = (newHeight) + 'px';
            lastHeight = newHeight;
        }
    }
  }
  setTimeout(checkIFrameSize, refreshFrequency);
}

setTimeout(checkIFrameSize, refreshFrequency);

That's it!

It turns out the major JavaScript libraries (jQuery, YUI (v3+), Prototype, and Dojo) provide a way to see if requests are still active.  They provided instructions for writing a function, but I wanted a fool proof method, that JUST WORKS regardless of what library you use.

So, I created this function (Currently supports jQuery, Dojo, and Prototype, not Yui 3 yet):

function getActiveRequestCount(){
    var currentActiveRequestCount = 0;
    //Get prototype active requests...
    if(window.Ajax && window.Ajax.activeRequestCount){
        currentActiveRequestCount += window.Ajax.activeRequestCount;
    }

    //jQuery active requests...
    if(window.jQuery){
        currentActiveRequestCount += jQuery.active;
    }

    //Dojo
    if(window.dojo && window.dojo.io.XMLHTTPTransport.inFlight.length){
        currentActiveRequestCount += window.dojo.io.XMLHTTPTransport.inFlight.length;
    }
    return currentActiveRequestCount;
}

Then, use the following selenium command to wait for the request count to be low…

selenium.waitForCondition("selenium.browserbot.getCurrentWindow().getActiveRequestCount() == 0", "30000");

And viola!!!  No more pesky pauses!!!  Or wait for text to be present!!!

It let’s you mock up fully functional websites without writing any html code.  Then, you can export it as html, and use it as a starting point for a better mockup.  Or export all the pages to png’s in one shot, and use those as a starting point in Adobe Illustrator, or your design tool of choice.

It’s great for useability testing.  Mockup your ideas.  Put them in front of customers / users, re-prototype, and continue until you get it as good as possible, and meeting your cash cow customers’ needs.  THEN make it look good.

http://pencil.evolus.vn/en-US/Home.aspx

http://apirocks.com/html5/html5.html

What is JavaScript? It’s a scripting language that all modern web browsers run that allows you to manipulate web pages and do sweet stuff.

To get started, first, you need an easy way to run JavaScript. While you could write javascript in an html page and run it, it’s generally easier to be able to run scirpts without making an html page. To do this, install Firebug, and use it’s console. (Just install firebug, click on the little cock-roach icon in the lower left of Firefox, and click the console tab, now reload your window.).

Once you have the firebug console working, type the following into the console, and you should get a popup.

alert('Hello World!');

Here’s a video that shows how to install and use Firebug:

If you want to learn more, head over to w3schools’ JavaScript tutorial.