Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How to make a link open an embedded page
Mottie (MVP) 6/13/2008 10:29 AM EST : How to make a link change your embedded page
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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
TopBottom

538250866_Inactive (New Admin) 6/13/2008 2:01 PM EST : RE: How to make a link change your embedded page
538250866_Inactive
Posts: 135
Posts With Wolves

Very nice.  I liked this and your video organizing idea alot.  I am impressed with how you came up with the idea of using multiple forms as a single one.  Good work!
TopBottom

Ciannon (Guild Admin) 6/13/2008 2:26 PM EST : RE: How to make a link change your embedded page
Ciannon
Posts: 2000
Zomgawsh Poster

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


Epic quotes from Coils:

"lol out of money. I bought my system and forgot to factor in the cost of the game." - Coils 7/14/2008
"No money totaled my car. Cant play. Probly selling my computer. Adios." - Coils 8/25/2008


TopBottom

electraoutlaw (Guild Admin) 6/14/2008 10:34 AM EST : RE: How to make a link change your embedded page
electraoutlaw
Posts: 1172
Zomgawsh Poster

Mottie, this is great!
I'm working with it now and was wondering, is there a way to limit the width of the embedded page too?  When I open a page, it's too big and I have to scroll to the right side.
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

electraoutlaw (Guild Admin) 6/14/2008 11:09 AM EST : RE: How to make a link change your embedded page
electraoutlaw
Posts: 1172
Zomgawsh Poster

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!
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Mottie (MVP) 6/14/2008 11:29 AM EST : RE: How to make a link change your embedded page
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hehe you're welcome...

The script can detect the width of your browser, so if the embedded page is too wide, look at the top of the code and you'll find a "var sideWidth = 350;". Just make this number 400 or 500 to tell the script the width of your side column. If you have a single column page, set this number to zero 

Nice suggestion Electraoutlaw about using images also. I was originally going to post the script with bullets in front of the links, but figured it would make things messier for people that don't know how to use HTML - you can always use the editor to do that I guess. People that do know HTML can feel free to tweek/adjust it as they desite!

Hopefully that will help!
TopBottom

electraoutlaw (Guild Admin) 6/14/2008 4:42 PM EST : RE: How to make a link change your embedded page
electraoutlaw
Posts: 1172
Zomgawsh Poster

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.
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%