How to code multiple links to similar a page?

**drhoctor** · Jun 19th, 2008, 05:19 AM

Hi folks,
I've got what I think is a relatively simple problem;

I have a ul with multiple li links that I want to point to a page with an iframe. The only difference between each is the destination iframe url. What is the best way to code this? I have a total of 16 li links and would prefer not to have a webpage for each.

http://www.bjmarine.net/newsite/index.html shows a set of 4 li in a ul on the left hand side under featured boats which currently each link to a different page with an iframe. This is an example of what I want to streamline.

I am familiar with Java and C#, but it's been a while and would really like some help.

Thanks for your input in advance!
Denis

**Web Design Forums** · Jun 19th, 2008 05:19 AM

**bfsog** · Jun 19th, 2008, 06:11 AM

So you have 16 links and you want to have them point to the same page but change a certain iframe src?

**drhoctor** · Jun 19th, 2008, 06:18 AM

Yeah, just the iframe source on the page changes

**bfsog** · Jun 19th, 2008, 06:43 AM

Okay.

So your < ul > links will look something like..

HTML Code:

<ul>
	<li><a href="frame.html#feature">Feature</a></li>
	<li><a href="frame.html#about">About</a></li>
</ul>

Then on frame.html have this code:

Code:

<iframe id="myiframe" src="#" width="400" height="400" frameborder="no"></iframe>

<script type="text/javascript">

	var myUrl = window.location.href;
	var myPos = myUrl.indexOf("#");
	var src = myUrl.substring(myPos + 1, myUrl.length) + ".html";

	document.getElementById( 'myiframe' ).src = src;

</script>

Thats one way of doing it, basic too. You will need to make sure you know what src is.

**drhoctor** · Jun 20th, 2008, 05:58 AM

Sorry what do you mean by "make sure you know what src is."?

I've played around with this and keep getting an error saying
document.getElementById( .... ) is null or not an object

Thanks for the help

**bfsog** · Jun 20th, 2008, 06:06 AM

Well what I mean by make sure you know what src is, is that a pesky user could change the value in the address bar.

A good way around this is to have an array and check that the variable src exists.

Can you post the page? As my page works fine.

**drhoctor** · Jun 20th, 2008, 09:25 AM

I created two simple pages;

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Test for iframe url passthrough, main page </TITLE>
 </HEAD>

 <BODY>
  <ul>
    <li><a href="frame.html#feature">Feature</a></li>
    <li><a href="frame.html#index">index</a></li>
</ul>
 </BODY>
</HTML>

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Test for iframe url passthrough, frame page </TITLE>
  <script type="text/javascript">

    var myUrl = window.location.href;
    var myPos = myUrl.indexOf("#");
    var src = myUrl.substring(myPos + 1, myUrl.length) + ".html";

    document.getElementById( 'myiframe' ).src = src;

    </script>
 </HEAD>
 <BODY>
  <iframe id="myiframe" src="#" width="400" height="400" frameborder="yes"></iframe>
 </BODY>
</HTML>

**bfsog** · Jun 20th, 2008, 09:26 AM

The script will have to come after the iframe as the iframe is created after the script.

**drhoctor** · Jun 20th, 2008, 10:33 AM

That's great! Thanks for your time

**seanmiller** · Jun 26th, 2008, 02:55 AM

You're making your page dependent on Javascript, which is never a particularly good idea... won't help search engines or those with Javascript switched off.

If you must use an iframe I'd be more likely to do it like this... you'll need PHP and the file needs to be called frame.php not frame.html

HTML Code:

    <ul>
      <li><a href="frame.php?p=feature">Feature</a></li>
      <li><a href="frame.php?p=index">index</a></li>
    </ul>

HTML Code:

<?php
         /* default */

          if ( isset($_GET['p']) ) $frame = $_GET['p'];
          else $include = "default";                                   // or whatever default should be

          $include .= ".html";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title> Test for iframe url passthrough, main page </title>
  </head>
  <body>
    <iframe id="myiframe" src="<? echo $include; ?>" width="400" height="400" frameborder="yes">Sorry your browser doesn't support Inline Frames.  Please consider donating your computer to a museum and upgrading.</iframe>
  </body>
</html>

...but I wouldn't be inclined to use an iframe. Just stick the content in using an include... in other words, as above...

Code:

    <body>
        <? include($include); ?>
    </body>

...and the include file wouldn't need any of the HTML headers etc., obviously... just the content.

Sean

Thread: How to code multiple links to similar a page?

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Thread: How to code multiple links to similar a page?

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Sections

General Info