Having mostly done brochure advertising sites, I am now taking my first stab at a content centric (maybe community) site. Extensioneer.com aims to fill what seems to be a void in quality web sites discussing how to develop extensions for Adobe Dreamweaver (CS3+) and it’s predecessors Macromedia Dreamweaver (8.0 and below). Over the past two years I have dived fairly deep into developing Dreamweaver extensions that greatly reduce the amount of time it takes to code a site in XHTML/CSS. Throughout my journey I have found quality information on the subject to be quite as scarce and the “good” information seem to come with a monetary cost associated with it. Extensioneer.com will fill this void of freely available information on Dreamweave extension development.

Many of us who have used iframes, or tried, know that you cannot give an iframe a height of 100% and have it actually use 100% of the available space. Internet Explore, Firefox and Safari to not actually give the iframe a height of 100%. The only way you can set an iframe’s height is using a fixed measurement like pixels. This can be quite an inconvenience as we do not know what the size of our user’s browser is.

What we have to do to get a dynamic iframe that we can set to use an amount of space unknown is to use JavaScript. We can use JavaScript to get the height of the browser’s viewable area in pixels and then subtracted the height of any banner or other contents at the top of the page. Finally all we need to do is set the function to fire on resize. Ta da! A dynamically resizing iframe!

// Declare the function
function iFrameHeight() {

// Get the iframe with the id or "iFrame1"
var q=document.getElementById('iFrame1');

// Get the div with the id "containerTop".
// This could contain a banner or other content.
var r=document.getElementById('containerTop');
var qHeight = window.innerHeight;
var browser = navigator.userAgent;

// Browser detection to determine how we
// get the height of the viewable area.
isB = browser.indexOf("MSIE");
if ( isB > -1 ) {

// IE, FF
a = document.documentElement.clientHeight;
}
else {

// Safari & FF & Opera
a = window.innerHeight;
}

// Browser detection to ensure the page does not get large enough to require a vertical scroll bar.
isB = browser.indexOf(”Firefox”);
if ( isB > -1 ) { a = a - 5; }
isB = browser.indexOf(”Opera”);
if ( isB > -1 ) { a = a - 5; }

// Set the proper height of the iframe.
newH = a-r.offsetHeight ;
q.style.height = newH + “px”;
}

// Set our function to fire when the browser is resized.
window.onresize = iFrameHeight;

Dynamically resizing iFrame height demo. Do not forget to use a Reset style sheet to override browser defaults!

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;

Well Wednesday I attended the Minnesota Interactive Media Association’s annual summit. Jason Fried of 37signals was one of the keynote speakers. In fact he was pretty much the reason I was there. Jason spoke on Unconventional Collaboration, more or less speaking about how 37signals has operated and how these techniques can work for you too. Many of these ideas challenge many corporate business norms of today. Like most meetings are pointless, do not have them. If you do keep them short and to the point. Make attendance optional, this makes presenters have to make their content valuable enough for people to stop what they are doing to come. Many professional find a lot of these truths that Jason presented as idealistic and not very realistic. Funny thing is 37signals may only be an eight person company (completely by choice), but I would not dare say that they are unsuccessful. These are the people who brought us Ruby on Rails, BaseCamp, Campfire, Highrise and many more great applications. Not to mention being an icon in the industry.

The topics Jason spoke on come out of the book written by 37signals called “Getting Real”. I am currently reading it myself and am loving it. People like Jason Fried & Jim Coudal have proven that many of the founding principles which I have been building Port Eighty upon are not just pipe dreams. While these ways of doing business may challenge many corporate norms and standards, they define a more pure way for those passionate about their work to make a living through their passion.

So two weeks ago I commented saying I would post about key things I took away from An Event Apart Chicago 2007. Here we are more than two weeks later and nothing.

Fortunately I love my clients. This is why I have had no time for writing about AEA. Currently working with a local clothing shop on a splendid little web presence. Pretty standard site, Xhtml/Css a dash of flash and done! Well sort of.

Apparently in this industry, manufactures do not understand what an API is. That is to say that the manufactures do not offer any API of any sort. Which in an industry like clothing were fashion is changing constantly, this can be an issue for retailers that do not have huge budgets to spend constantly updating their web sites. Retail outlets have little to no recourse for posting online what their manufactures offer but through linking to the manufactures’ website. This seems to unload the burden of smaller retail outlet of having to constantly update their websites with the new seasons fashions.

Great….right? Well not exactly. We (you and I) are in the business of Online marketing, and if there is one thing we know it is that we do not send visitors to some other site where they may loose interest in our clients products/offerings. Heck, they could go to one of these manufactures’ sites and find another retailer to purchase from!

Solution, frames. Yes, I know what I just said….I feel dirty just saying it. BUT it give me the ability to work with the lack of an API and still hopefully not completely sending people off my client’s site. Create a nice banner which includes contact information in plain text along with navigation to contact or break out of the frame. This banner will be a frame at the top of the page when a visitor clicks to view a manufacturer’s website from our clients site. Now we have hopefully retained a potential client. As they browse the manufacturer’s site, our client’s information & branding is still at the top of the page reminding the user who they want to call or visit for their purchase. We have helped the user find what they are looking for along with a retailer to buy it from plus we have helped our client retain a client that may have gotten lost on the manufacturer’s site.

I am sure many readers(yes I mean the two people that read this) are very curious to see exactly what I am talking about along with what I perceive to be a beautiful solution to a real problem. Once the project has been finalized and goes live I will post an update on how this solution worked along with a link to see for yourself.