It was about a month ago I decided to finally act on the idea of Extensioneer.com, an idea I have been toying with for the past year. Over the past month I have been thinking about whether to center the site around a blog or center it around a message board. I even looked into the idea of using PhpBB3 and WordPress seamlessly through a script called WP-United. All I will say is using WP-United did not pan out very well.

I decided to center the community around a PhpBB3 message board. A blog would have centered to much around a central author or authors, I would rather have the open exchange of a message board.

As for the design…well that has been a bit slow. I have a couple logo options so far that will play on Dreamweaver’s style but I am a bit weary of playing too close to the manufacturer’s marketing and design. By the end of August I am hoping to have the design complete as to start working on creating a template for PhpBB3.

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.