Topic awaiting preservation: Iframe help! loading multiple pages in ONE Iframe from index.htm (Page 1 of 1)

Okay all,

I would first like to say that this website has been really helpful to me on solving some of my web page nightmares, however I have this one porblem that I can not figure out. So, here it goes. Bare with me, the explaination may suck..

My first page is index.htm. It has three links; portfolio, practice, office.

My second page is pageset.htm. I have an iframe on this page (name="frame1")

Now on the index.htm, I would like the links to load the pageset.htm AND it's corresponding page in the IFrame.


EX: I click on portfolio link on the index.htm; pageset.htm is loaded and portfolio.htm is loaded in iframe on second page.


That is about the best I can describe it. I know how to get the iframe to load just a default page.

<iframe
id="frame1"
name="frame1"
src="default.htm"
width="600"
scrolling="no"
frameborder="0"
cellpadding="0"
cellspacing="0"
align="top"
style="background:black"
> </iframe>

I think the link on the index page has to look something like this.

a href="pageset.htm?portfolio.htm=frame1"

But i think i am missing something. Can someone give me a hand here?

Thanks

Norm

Hello, and welcome in the Asylum

Your should use the target attribute. Therefore your links should look like :

<a href="portfolio.htm" target="frame1">blah</a>

Thanks for the quick response, but let's run through this together.

The target ="frame 1" does not work because the link is on index.html. The Iframe is on the second page. If the link was on the same page as the Iframe, then the 'target' would work.

example as suggested:
The link on the the index page has <a href="pageset.html">,

so if I add the target it would read: <a href="pageset.html" target="frame1">

where in this script to call up 'portfolio.htm'in the iframe?

I think there has to be more to the link on the index page.

Oh! so you'll need to send in GET ( aka in the URL ) a parameter to tell your pageset.html page which page to load by default in the IFRAME. Usually this is a task for server side script, but it can be done on client side.

You almost got it in first suggestion, but your link should look like :

< a href="pageset.htm?pageInFrame1=portfolio.htm">blah</a>

Then in pageset.html you'll need some JavaScript to pick the infos in GET ( via the document.search property which would return ?pageInFrame1=portfolio.htm in that case) and set the src attribute of the IFRAME.

Can I ask you what is the purpose of the pageset.html page. What does it add to your normal pages ( portfolio.htm, practice.htm and office.htm ) ? Couldn't you achieve the same result without that page ?

pageset.html has a banner and a flash file that needs to stay loaded the whole time in order to work... here is the link so you can check it out... http://www.bradparish.com/rta2/index.htm

Some advice on the site would be helpful... be gently, I am fairly new to creating websites.

In having said that... can you point me in the direction of the script that I will have to put in the pageset.html. I have been looking online, but really can not find what I am lookin or maybe I do not know what i am looking for... hahaha...

I guess I can load different layers that have the diferent Iframes loaded in it. The source for each of these layers would be different.. any case, let me know what i can do to make this site easier..

quote:

---

any case, let me know what i can do to make this site easier.

---

You can simply do this with server side script. In PHP it will be damn easy. You could put the HTML markup of your banner and flash file in an external file, and include( ) it at the top of each page. Period.

And if that that banner must be on say every .html page, if you don't want to bother inserting the include( ) in every page and your sever allows it, you could even let APACHE do this for you with the following .htaccess file :

<FilesMatch "\.html$">

    ForceType application/x-httpd-php

    php_value auto_append = "banner.php"

</FilesMatch>

That will treat the .html files as PHP and will auto append the file banner.php

Hope that helps,

Thanks for the advice, but have one last question.. returning to my original question... what does the script look like that needs to go in the pageset.html to GET the portfolio page in the iframe... I would like to know for future knowledge... Thanks for all your help....

ok ok, it would like :

<script type="text/javascript">



// extract the parameters sent in GET and create an associative array with them

var _GET = document.location.search.substr( 1 ).split( "&" )

for( var i in _GET )

{

	var tmpArray = _GET[ i ].split( "=" )

	_GET[ i ] = null

	if( tmpArray.length==2 )

		// create the entry in the associative array. _GET[ variableName ] = value

		_GET[ unescape( tmpArray[0] ) ] = unescape( tmpArray[1] )

}



// retrieve 'frame1'

var frame1handle = document.getElementById('frame1')



if( _GET['frame1'] && frame1handle )

	// set the src attribute of 'frame1' if it exists and we have the 'frame1' variable in GET

	frame1handle.src = _GET['frame1']



</script>

To learn more about JavaScript and DHTML, be sure to check the Javascript/DHTML and DHTML/JavaScript.

looks great, thank you for all your help... i will read up on your links.. thank you and have a good day...

(Edited by Norm1252003 on 02-16-2005 16:09)

I inserted the above script into my document, and i am getting a blank page in the iframe. What am I doing wrong... i set the src of the frame

src = "_GET['frame1']"

but still am not getting anything. i am puzzled...

to go along with Poi's suggestion of doing this server side, these tutorials at the Gurus Network be useful:

http://www.gurusnetwork.com/tutorial/php_templates/

http://www.gurusnetwork.com/tutorial/php_templates_2/

http://www.gurusnetwork.com/tutorial/server_side_includes/

that's

frame1handle.src = _GET['frame1']

without the quote



(Edited by poi on 02-16-2005 16:37)

looking at the php tutorials, can you position where the pages are loaded into the template.. via tables, or css... Because I have a side menu and top header. so i would need to position the page load in x=225 7 y =105... that is how i have it lay out now...

Also, can flash be loaded into the template. my menu is flash..

thanks for the advice on th php.. this might make my life a little easier..

(Edited by Norm1252003 on 02-16-2005 17:52)

Yes your menu can be loaded in the template, and positionned with CSS. Avoid tables if you don't use them to display tabular datas.

quote:

---

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

---

Btw, why is your navigation in Flash ?! from what I see there is absolutely no need to make it in Flash. You can use a simple UL and some CSS.

Will I get the same effect as the flash menu.. I like how it expands and contracts when I click other buttons.. I have found other menu that just expand all the way, but does not contract when another button is hit. I would pefer not to use the flash navigation because it will cause problems..

what does UL stand for.. I can begin researching about it... Thanks

UL

(Edited by DL-44 on 02-16-2005 19:55)

Doh! I double checked the page you gave ealier, and actually I didn't knew I had to click on the texts to open a sub level of navigation. Since nothing happened when I hovered the texts I thought they were completely inactive.

Check the Frequently Asked Questions, there's something about menus in DHTML. Though in fact, if the sub levels appear on hover of their parent, there is no need to use some DHTML. CSS is fairly enough ... except in that crap of IE but it can fixed in few lines of JavaScript. Check my site and the mighty Son of Suckerfish Dropdowns article and one example.


Regarding the UL, check the link I gave in my previous post. And read the specs of HTML 4.0 specs: Lists in HTML. Reading the specs of (X)HTML ( or better the DTDs as DL-44 pointed ) and CSS is a must if you want to do some websites.


Go to the site of the W3C, and on W3 schools for some tutorials.

I will make the hover a different color so that you know to click on the menu.. Thanks for all your help today... I have learned alot and need to catch up on all the readings that are linked to this page....thanks again.

(Edited by Norm1252003 on 02-16-2005 20:29)