Make 1 link load 2+ files into 2+ DIVs

**reman** · Nov 4, 2000, 17:15

Hello ALL!

I have the below code from The Dynamic Duo web site. It works great! It loads an external page in both IE and NN. Also verifies the load is complete. HOWEVER...I would like the code to load 2 (or more) pages into 2 (or more) DIVs. How do I change the code?

ANY IDEAS? Thanks for the help!
Marc
=======================================

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<TITLE>The Dynamic Duo - External Source Files Demo [IFrame Buffer - LoadSource Function]</TITLE>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<STYLE TEXT="text/css">

</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<IFRAME STYLE="display:none" NAME="bufferFrame"></IFRAME>

<A HREF="javascript:loadSource('contents',null,'text-buffer.html')">load source</A><br>
<A HREF="javascript:loadSource('contents',null,'text-buffer2.html')">load source2</A><br>
<A HREF="javascript:loadSource('contents',null,'text-buffer3.html')">load source3</A><br>

<SPAN ID="contents"></SPAN>
<SPAN ID="contents2"></SPAN>

</BODY>
</HTML>

==========code of page to load==========================
==========save the file as text-buffer.html
==========save the file as text-buffer2.html
==========save the file as text-buffer3.html

<html>

<head>

<title>Contents Page</title>

</head>

<body onLoad="parent.loadSourceFinish('contents')">

This is my Test Page1. This is my Test Page1. This is my Test Page1.

This is my Test Page1. This is my Test Page1. This is my Test Page1.

</body>

</html>

==============================================

**Vincent Puglia** · Nov 4, 2000, 21:10

Hi Marc,

I'm not sure if I understand the problem. From a quick glance, the code is set up to accept any filename and insert it into a div -- you simply have to define the divs and the function's parameters.

Or, are you asking how to load doc1 + doc2 into div1?

Vinny

**reman** · Nov 5, 2000, 10:21

>>Or, are you asking how to load doc1 + doc2 into div1?
CLOSE!

What I am trying to do is to allow any of the links on the page to process 1,2,3 etc pages to load into the corresponding DIVs 1,2,3 etc.

The current code will take the clicking of a link and process 1 page and load into 1 Div.

Please see: http://www.dansteinman.com/dynduo/en/source.html for the details of the whole thing.

Any Ideas?

**Vincent Puglia** · Nov 5, 2000, 16:11

Hi,

This is going to be somewhat hasty (the Bills just tied it up and the Jets are scheduled to begin

The only thing I can think of offhand is to load each file and append them to the div. Sort of:

function loadSource(id,nestref,url)
{
if (ns4)
var lyr += (nestref)....blahblah...
else
parent.bufferFrame.document.location += url
}

I'll try to think of something else during the commercials

Vinny

**reman** · Nov 5, 2000, 18:04

I know what you mean...my steelers lost to a last min FG

What about passing the URLs to an array and cycling through it. ie, click link--> http://www.a.com, http://www.b.com... Then the array opens each file. I am a newbie to JS so I have no idea how to do it. Food for thought.

**Vincent Puglia** · Nov 7, 2000, 20:17

Hi Marc,

I've been caught up in a few things (in addition to crying because of the Jets

A few questions:
1) Do you want the text to appear as one document? In other words, can a 'Load Next' button do?

2) Do the documents have to be html documents? Can they be written as document.write()s and included as a js file?

3) Are these local pages? Or, are you importing pages from another site?

Vinny

**reman** · Nov 8, 2000, 13:40

1) Do you want the text to appear as one document? In other words, can a 'Load Next' button do?
No...the intent is to load 2 or more at the same time into adjacent DIV/SPANs.

2) Do the documents have to be html documents? Can they be written as document.write()s and included as a js file?
No...they can be html or text. There will be text and gifs/jpgs. It needs to work in IE 4+ and NN 4+.

3) Are these local pages? Or, are you importing pages from another site?
NO...I am using pages ONLY from my web or sub webs.

The links would change both the content AND PICs. So clicking on link1 would have content 1a and pic 1b, while link2 would have 2a and 2b.

**Vincent Puglia** · Nov 8, 2000, 16:45

Hi Marc,

Ok. I'm still a little confused as to why you are trying to load the data as pages, especially since you say that you want: "content 1a and pic 1b, while link2 would have 2a and 2b".

The easiest solution would be to create the pages you want by combining the data (text & images) and then loading one source (eg: page1.html = content1a + pic1b)

Another possibility is to put everything into arrays either within the page's header or an included js file and then use the links to swap DIV content & visibilities (see the "dHTML: an Introduction" script/tutorial at my site)

The process could look something like:

function loadDiv(content1, divID)
{
var content = (content1) ? myContent[0] : myContent[1];
var picSrc = (content1) ? myPics[0] : myPics[1];

if (ns4)
{
document.layers[divID].document.open();
document.layers[divID].document.write(content);
document.layers[divID].document.images['pic1'].src=picSrc;
document.layers[divID].document.close();
document.layers[divID].visibility = 'show';
}
else
{
document.all[divID].innerHTML = content;
document.all[divID].images['pic1'].src = picSrc;
document.all[divID].style.visibility = 'visible';
}
}
//-->
</SCRIPT>

<STYLE TEXT="text/css">
....blah blah....
</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<DIV id='Div1' style='position:absolute; visibility:hidden;..blahblah....>
Some text as a placement holder, mainly for netscape<img src="pic1.gif">
</DIV>
<a href="javascript:loadDiv(0,'Div1')">Link1</a>
<a href="javascript:loadDiv(1,'Div1')">Link2</a>

If the above doesn't solve your problem, I'm going to need a url to see what it is you are attempting.

Vinny

**reman** · Nov 9, 2000, 09:13

Good Morning! I am sorry I did not get back to you but the election thing here in Palm Beach County is just too good to ignore!

Anyway, go to these to see examples and test pages:
http://www.mydevelopmentonline.com/myegretlanding/
http://www.mydevelopmentonline.com/m...ing/iframe.htm
http://www.mydevelopmentonline.com/m...iframe_bak.htm
http://www.mydevelopmentonline.com/m...frame_bak2.htm

The top, bottom and left remain constant. The page is in 3 columns. Left column is 150px the middle is 470px and the right is 150px.

The middle area, located in the 470 column and the right 150 (between the top and bottom) column, contain content that must change depending on the link clicked. Normally I would use FP2K but not this time. Instead of having 50 or more pages, I wanted to only alter the content. That is possible and doable. The problem is the code only changes 1 DIV/SPAN.

The right column is an advertising area that is directly related to the content in the middle. So if a restaurant page is shown then the right should show restaurant ads.

The SitePoint Forums have moved.

User Tag List

Thread: Make 1 link load 2+ files into 2+ DIVs

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions