Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > Embedded page box
Mottie (SuperAdmin) 6/13/2008 10:43 AM EST : Embedded page box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to make a link open an embedded page

GuildPortal admin site link to original post

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 (How to add HTML).

    • 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>';
     $('#currentLink').html(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 in my chat tab here.

Edit (4/24/2009): Updated the code using jQuery.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/24/2009 1:30 PM EST : RE: Embedded page box
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Hi Mottie, I'm not sure why this script is not working for me. click
TopBottom

Mottie (SuperAdmin) 4/24/2009 1:47 PM EST : RE: Embedded page box
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Guppy!

I updated the code using jQuery. For some reason the forums won't display "document.getElementById..." without a little editing.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/24/2009 4:34 PM EST : RE: Embedded page box
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thank you Mottie. It works now 
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%