Archive

Archive for the ‘html’ Category

Testing websites on IE 7

June 22nd, 2011 No comments

Today I was informed that a webapp I had written had some IE7 problems… argh… I thought to myself, not ie7… I went in search of ways to test the site on ie7. I tried Microsofts Virtual PC Image of Windows Vista with IE7, but it crashed on me repeatedly. I tried loading it in VirtualBox instead of VirtualPC, but to no avail. Then I found a tool I had used at a previous job but had forgotten the name of.

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.

Categories: html Tags:

Dynamic Sizing of a cross domain iframe

March 25th, 2011 No comments

There are several ways to communicate via domains in a browser. One of the simplest is using the hash on a url… i.e. The part of the url AFTER the # sign.

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!

Categories: html, Uncategorized Tags:

Using Selenium to test Ajax

December 1st, 2010 2 comments

If you’ve used Selenium before you know it’s power, and the pain of Ajax and Selenium…  I spent about a week on it at work and created several helper methods, but was never quite happy with my Ajax solution (waiting for text to be present, blech!!!).  Then, I found this article about getting selenium and ajax to play nicely…

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!!!

Categories: ajax, dojo, html, jquery, selenium, yui Tags:

Awesome Prototyping Tool!

October 25th, 2010 No comments

Check out this AWESOME free prototyping tool. Pencil Project.  (It’s a Firefox Plugin / XUL Application)

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

HTML 5 Freature Overview Presentation With Sample Code

April 23rd, 2010 No comments

At work Shawn Lonas sent this out to all of us, it’s a really good concise overview of some html5 features.

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

Categories: html, html5, Uncategorized Tags: , ,

JavaScript Primer

September 10th, 2009 No comments

So you want to learn JavaScript huh? Way to go! SOA powered by JavaScript is the future of the web. (Trust me).

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.

Categories: html, javascript Tags:

min-height CSS Hack

July 17th, 2009 No comments

I needed a min-height hack for css that worked everywhere. I searched for a while, and found this link: http://www.greywyvern.com/code/min-height-hack. It works as advertised, just checkout the tabs on propertynut.com

Categories: css, hacks, html Tags: