As I eluded to in my previous post (Deal with manufactures with no API for their retailers) frames were going to be the final solution. Not just frames though, an iframe. Before I get to deep into the nuts and bolts of the solution take a look at how it turned out. Example: A page with vendor links and a vendor page.

When a user surf to a vendor/manufacturer link, they are sent to the vendor.php page that contains a nice banner that maintains the originating companies branding and contact information along with the ability to remove the banner at the top. Then the vendor’s site loads in an iframe that is dynamically resized to 100% to fill the remaining space in the browser window.

The vendor page is setup to be dynamic so every vendor link points to this same page and passes the page the information it needs to load the correct vendor site into the iframe. All-in-all a pretty simple solution to keeping up-to-date information on the retailers offering by using the vendor’s site. Which in the bridal industry, vendors are good about keep their sites up-to-date with their most recent lines of dresses and this helps my client reduce the cost of their website by not needing the new lines of dresses to be constantly added.

Now back to the iframe. Many who have used iframes know that you cannot give an iframe a height of 100% and have it use the remaining space in a web browser reliably. Internet Explore, Firefox and Safari to not actually give the iframe a height of 100%. To accomplish this the iframe height has to be declared in pixels. To accomplish this feat I used JavaScript to get the height of the browser’s viewable area in pixels and then subtracted the height of the banner at the top of the page. Then set this function to fire on resize and now you have also prevented the end-user from ever getting a vertical scrollbar in the iframe and the browser, which would be nasty to say the least. I won’t explain line for line of code how I did this but I will say I had to do some different code for each of the major browsers. Explaining the JavaScript would be quite a blog post of it’s own so I will just post it below. Feel free to post questions.

function iFrameHeight() {
var q=document.getElementById('iframeVendor');
var r=document.getElementById('wrapperBorder');
var qHeight = window.innerHeight;
var browser = navigator.userAgent;
isB = browser.indexOf("MSIE");
if ( isB > -1 ) {
// IE, FF
a = document.documentElement.clientHeight;
}
else {
// Safari & FF & Opera
a = window.innerHeight;
}

isB = browser.indexOf(”Firefox”);
if ( isB > -1 ) { a = a - 5; }
isB = browser.indexOf(”Opera”);
if ( isB > -1 ) { a = a - 5; }

newH = a-r.offsetHeight ;
q.style.height = newH + “px”;
}
window.onresize = iFrameHeight;