I wasn't quite sure how to describe this "module" I wrote. But I was helping a friend set up his library with links to sites with information and began to dislike how it was setup.

This set up is pretty quick (I hope LOL).

• Make two "Free Form Text/HTML" content boxes.
  
  
• One should be in a side column - I put mine on the left and named it "Links"
• The main content box should be in a center column. It will probably be best on a tab with only one side column, so the center column can stretch across the rest of the page - I named mine "Current Link Selection"
  
  
• In the center box, paste the HTML below. You can replace the orange text with whatever you want, but there should be some indication that the user needs to click on a link to make this work.
  
  <div id="currentLink">Click on a link to the left</div>
  
  
• In the side box, paste the code below
  
  <script type="text/javascript">
  // Width of Side Column
  var sideWidth = 350;
  
  // Don't change any of the script below
  
  function get (linknm,ht) {
  var a = '<iframe src="';
   a += linknm;
   a += '" allowtransparency="true" align="top" frameborder="0" scrolling="auto" width="';
   a += allowedWidth () - sideWidth;
   a += '" height="' + ht + '"></iframe>';
   document.getElementById('currentLink').innerHTML = a;
  }
  function allowedWidth () {
   if (parseInt(navigator.appVersion)>3) {
    if (navigator.appName=="Netscape") {
     return window.innerWidth;
    }
    if (navigator.appName.indexOf("Microsoft")!=-1) {
     return document.body.offsetWidth;
    }
   }
  }
  </script>
  <!--
  ***********************************************
  Replace {INSERT URL HERE} with the URL
  Replace 800 with the height you want the window
  Replace {LINK NAME} with the name of the link
  
  <a href="javascript:get('{INSERT URL HERE}',800);">
  {LINK NAME}
  </a><br>
  
  ***********************************************
  -->
  
  <a href="javascript:get('http://admins.guildportal.com/Guild.aspx?GuildID=3780&TabID=27537',800);">GuildPortal Admin Boards</a><br>
  <a href="javascript:get('http://www.ctrlaltdel-online.com/comic.php',800);">Ctrl+Alt+Del</a><br>
  <a href="javascript:get('http://www.angryalien.com/',800);">30-Second Bunny Theatre</a><br>
  <a href="javascript:get('http://www.weebls-stuff.com/toons/badgers/',800);">Badgers</a><br>
  
  

Customizing the script

• Remove the code in green above (unless you like my selections )
  
  
• Copy (CTRL-C) the code in blue and red and paste it (CTRL-V) at the end, repeat pasting for each link you plan to add.
  
  
• Replace the {INSERT URL HERE} with the URL of your link
  
  * NOTE: Make sure you left the single quotes on either side of the URL intact!
  
  
• Replace the 800 with the desired height you want to make the window
  
  
• Replace the {LINK NAME} with the page name of your URL
  
  
• Repeat for each link you add
  
  
• Now once you have the script done. Try it out. Then look at the gap on the right side of the embedded page. If it is too wide or too narrow, keep reading. If not, you're done! YAY!
  
  
• The code above automatically figures out the width of your browser, the variable "sideWidth" is set to the column width in pixels. It is subtracted from the browser width to determine the width of the embedded page.
  
• First look at the top of this code for the 350 (in red)
  
• If the gap is too wide, make the 350 smaller
• If the gap is too narrow, make the 350 bigger

You can see this script in action on my test site here.

Edit: Updated the script to fix a minor problem

I will definitely have to do this sometime in the future.

Also, I wanted to point out two things.

First:  You can also create (or use) a tab that has only one column, and rather than putting the links in a side content box, put them in a long content box across the top of the page.  This will give you even more width to display the embedded page.  (I would do this, but I don't have any one column pages and don't really have room to make a new one.  That means I still wonder if I can limit the width!)

Second:  You can use an image as a link in your left content box (or center, if you're going that way), rather than just text.  To do this, just edit the <a href=. . .  text that Mottie has in green.  Like this:

<ahref="javascript:get('YourURLHere',800);"><img src="URLtoYourImageHere"  border="0"></a><br>

Just thought I'd share the possible variations. 

Thanks again, Mottie!

Thanks again, Mottie!

You're going to have to stop coming up with great ideas and codes.  My guildies must be wondering why I'm not in game and w hy I can't leave the website alone! 

Oh btw, call me EO. It's way easier.