Forum Moderators: open

Message Too Old, No Replies

how to code 2 iframes to populate pages simultaneously?

         

sai digitalle

7:05 pm on Nov 10, 2004 (gmt 0)

10+ Year Member



I have 2 iframes on my site. the site is about photography. here's the behavior i want. When a user clicks to view "weddings" I want the top iframe to populate this "welcome to weddings portfolio" page, at the same time, i want the thumbnails strip to populate in the bottom iframe.

I already have the site up and running. There are no problems with the code as is. i just want to add this feature. As of now, the picture in the main iframe window will not change until a thumbnail has been clicked in the bottom iframe (which is how it's designed to work). BUT THIS means, when a user is ready to go the next portfolio like "Bridal", the last photo they were viewing will still remain until they click a photo from the newly populated "bridal" thumbnail strip in the bottom iframe. This can be confusing for the user, making them think they haven't gone anywhere or the website is screwed up because the last photo they viewed is still on the screen and it's especially confusing for users with smaller screens who cant even seen the thumbstrip unless they scroll down.

the thumbstrip to populate at the bottom is flash and it's src'd it's targeted to the center iframe. my question is can you do multiple href's and mulitple targets?

tedster

7:35 pm on Nov 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It takes javascript for one link to change two frames or iframes. This little snippet would define a function loadIFrames() - it goes either in the head or your external js file.

function twoiframes(iframe1,page1,iframe2,page2) {
eval("parent."+iframe1+".location='"+page1+"'");
eval("parent."+iframe2+".location='"+page2+"'");
}

Then your links need to call that js function and supply the four parameters - the two iframe names and the two pages you want loaded.

<a href="javascript:twoiframes('iframenameA', 'pageA.html', 'iframenameB', 'pageB.html')">Load PageA & PageB</a>

sai digitalle

11:13 pm on Nov 10, 2004 (gmt 0)

10+ Year Member



the code is in css/text. does the entire code have to be written in java though right?

tedster

11:48 pm on Nov 10, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not the "entire code" - to address two targets with one link you need Javascript (not Java, which is a very different technology.) The rest of the page can stay as is, HTML and CSS.

sai digitalle

1:40 am on Nov 11, 2004 (gmt 0)

10+ Year Member



Please forgive me, because i'm sucha noob. So basically, use the script- substituting the with the appropriate names or whatever right. Should I insert this script into the beginning of the body?

tedster

2:34 am on Nov 11, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The definition of the function goes either into the <head> or possibly an external .js file. If you put it in the head of your html document, it looks like this:

<script type="text/javascript">
function twoiframes(iframe1,page1,iframe2,page2) {
eval("parent."+iframe1+".location='"+page1+"'");
eval("parent."+iframe2+".location='"+page2+"'");
}
</script>

Then, yes, wherever your links are in the body, plug the real names of the four parameters: two iframe names/ids and two pages to load. And of course, use the anchor text of your choice.