View Full Version : linking iframes

12-08-2005, 08:17 PM
hi am having this problem, if anyone can help me figure it out i will be eternally grateful.
I have two iframes on my page. One is scrollable, and the other isnt. What i want to do is to be able to link items on the scrollable iframe to the other iframe. Such that when you click on the thumbnail of the item on the scrollable iframe, it will pop up in the iframe beside it. How do i do this without using html?bluegasps@yahoo.com (blugasps@yahoo.com)

12-08-2005, 08:38 PM
What's wrong with HTML? Using it, you would have:

<a href="filename.ext" target="iFrameName"><img src="thumbnail.ext"></a>

Using javascript would not be much different:

<a href="filename.ext" target="iFrameName" onclick="parent.iFrameName.location.replace(this.href);return false;"><img src="thumbnail.ext"></a>

There are actually many syntaxes available to do this in javascript. This is the only one where the result would be any different than the plain HTML code. That difference would be that the history stack would remain unchanged using this javascript onclick event.

12-09-2005, 06:54 PM
am not really fond of html... so if there is another way of doing it that would really make my day.

12-09-2005, 07:20 PM
If you do not use at least a bootstrap HTML with javascript, as in my second example, non-javascript enabled browsers or those with javascript enabled but with high security settings, will not see your content. Also, I think that you may have misunderstood, my second example, although written in an HTML code block and using bootstrap HTML code, is javascript. If your object is to hide your content from browsers configured as I just mentioned, the second code can be modified to do so:

<a href="javascript:void()" onclick="parent.iFrameName.location.replace('filename.ext');return false;"><img src="thumbnail.ext"></a>

If your object is not to replace the contents of the other iframe but rather, an image element within it:

<a href="imageFilename.ext" target="iFrameName" onclick="parent.iFrameName.getElementById('id_of_image_element').src='imageFilename.ext';return false;"><img src="thumbnail.ext"></a>

It is hard to be more specific, not knowing what exactly you want to do and not knowing what you would like the consequences to be for non-javascript enabled browsers.

12-09-2005, 08:29 PM
ok i will try to be more specific.
i have two iframes. let me call them left and right. the left iframe is scrollable, and has thumbnails, which are clickable. the right iframe is a blank iframe, and is not scrollable. Upon clicking on the thumbnails in the left iframe the thumbnails will pop up in the right iframe. so what i want to do is to be able to link the left iframe to the right one.
prefferably without using codes.

12-09-2005, 09:02 PM
Some kind of code(s) will be required. My second example, from my first post in this thread sounds like it will do the job.

You still haven't answered what you have against HTML. I guess I wasn't specific in asking that question, so I will do so now:

What do you have against HTML?

Some HTML is required or there will be no page in the left iframe.

I have another question. Have you at least tried out any of my suggestions yet, to see how they work?

12-09-2005, 09:18 PM
hey john, i figured out how to do the iframes without using codes...
thanks for the help though.

12-10-2005, 04:38 AM
Mostly because I really still don't understand what exactly you were trying to do, would you mind telling us the solution?

12-13-2005, 06:58 PM
Basically it sounds like he wants one iframe for navigation of topics, and another to display them in. this is actually a confusing problem for some (that dont entirely understand frame targeting), with a REALLY simple solution (link targeting between regular frames and iframes is the same btw).
i've tested it out and::::::::::::

container page (the one with both iframes)

<iframe src="test_1.htm" name="nav_frame" width="30%">
<iframe src="content_link_1.htm" name="content_frame" width="30%">

source for Navigation frame

<p><a href="content_link_1.htm" target="content_frame">link1</a></p>
<p><a href="content_link_2.htm" target="content_frame">link2</a></p>

then just make each content page however the heck you want, though personally I recommend NOT using javascript menus (like the ones posted in d-drive) inside the content pages, or things can get confusing. and make SURE that any links in the iframes target the correct frame you want ("content_frame" for the content, "_new" for a new window, and I think "_parent" to make the link take over the page containing the iframe)

and btw, theres NOTHING wrong with HTML, its the ENTIRE WEB, it would be WAY too inefficient to do everything with just javascript

12-16-2005, 12:01 AM
Thanks all...
i did it the easy way, without using code. I used the dreamweaver iframe icon. It was just the targeting that I was having problems with. But the codes that I got from the forum helped me figure that out.
Thanks. i guess codes are not too bad once you get familiar with them...

Today I have a different problem
I was linking all my links in dreamweaver. When I was done I uploaded it to the site. However due to naming of files, the host could not read some files that were capitalised. So I renamed the files, and the host was able to read the files. However, due to the renaming, some of the files lost the links. There are almost 70pages that need to be relinked. I could do each one, one at a time. But I was wondering if dreamweaver has a way of automatically relinking the lost links. Because essentially nothing has changed, except the name of the folders.

12-16-2005, 07:01 AM
With any effort of this nature, it is best to backup all the files first, just in case the results of the global edit are different than expected. If Dreamweaver (with which I am not familiar) has a global edit function, you could load up all the files and change the directory names to lower case or whatever needs to be done. There are utilities that do this, like gledit. Also many text editors can load multiple files and globally edit them. Word, I think, has this capability but, if you use it, make sure to rename all the files to .txt first and be sure that they are being seen as pure text files by Word and being saved as pure text. I use Edit Pad Pro which has a powerful global editing tool. There are many other programs that can do this, too numerous to count, let alone mention.

12-16-2005, 11:42 AM
Have you tried using find and replace in the edit menu (Ctl+F).
Never done it in Dreamweaver but Frontpage (yeah yeah I know I am Mr Gates' b*tch!) does this with find and replace.


01-13-2006, 06:06 AM
so heres one that im not sure if is even possible, but im sure one of you guys can figure it out.

i have three iframes inside a table. the bottom frame has my buttons for my page that i want to link to all my different pages, but i want them to load in the center Iframe of the page. here's the trick.

the bottom iframe referances a seperate html file with the buttons in it. that's why im having a problem linking the link of the button to load the page in the center Iframe......

i tried all the stuff above, but couldn't get it to work...

Does this make since to anyone??? any help would be awesome. Thanks!!!


05-18-2006, 08:25 PM
I'm creating a webpage where I'm using iframes and have run into a little problem.

At the moment I have iframes embedded into seperate html pages. The link buttons are presently linking the html pages. This is redundant since the page layout is the same for all pages and I really only need the buttons to load in a new iframe.

I'm using dreamweaver and I don't have the iframe behaviors and am not great at writing straight script.

How can I script in HTML to make my web buttons load a new iframe instead of linking to a new html document with an embedded iframe.

05-18-2006, 09:21 PM
I'm not sure if Dreamweaver has a global search and replace. After backing up the files, I would load one set of them into Edit Pad Pro and do a case sensitive global search and replace on all the files to change the case of the folder names, making sure that it would not have any effect on anything else in the files by doing just a search first (at least a limited one) and then including the slash and/or other character(s) in the search/replace if needed. One must always be careful when making global changes not to make unintended changes and to keep backups in case mistakes are made. All a bit involved but, almost always easier than changing each file individually.

05-18-2006, 11:14 PM
Edit>find/replace, then [replace all].

But that IS only for one file at a time, if that's what John meant.

05-19-2006, 06:53 AM
Just in case I didn't make it clear in my previous post, editors like Edit Pad Pro, and many others can globally change all files loaded at one pass. If your editor doesn't do that, find one that will but, be careful as I also indicated in my previous post.

05-19-2006, 07:14 AM
Dreamweaver does have some multi-file functionality, but it's a pain to deal with... probably not worth learning something new just for that.
Might be good to use Edit Pad Pro... I haven't, though.

06-27-2006, 06:09 PM
Hi everyone,

After researching this topic online, I found a way to make one link change the content of two iframes, and in my calendar section, I needed to do this. The code works wonderfully in Netscape and Mozilla Firefox, but always goes dead in IE.

Here's my code:

<A href="#august" target="cal_menu"

The first two pieces of code are evaluated fine. I link to part of a webpage that contains my August calendar and load it into an iframe called cal_menu (cal = calendar). dateinfo is the name of the second iframe and default.htm#no_events is a link to part of a webpage. Essentially, in the second iframe, I'm telling people that no events have been planned yet.

Does anyone know why the code isn't being processed by Internet Explorer? I've been trying to figure this out for the past four days. If you have insight, please share!

- Rachel

06-27-2006, 08:28 PM
why not use frames in a frameset, instead of iframes. Is there any particular reason?

06-28-2006, 06:37 AM
The only thing that comes to mind is the # symbol. Maybe IE is getting confused by that, but it's doubtful... that's used for various functions... should be accepted by all browsers. Check without, and see if that happens to help.
Sometimes, symbols need to be sent a %number, like %20 as a space.
URLs can be weird with symbols in them; use the %20 type thing instead.
Not sure how to look it up for #, though.... :\

06-29-2006, 04:39 PM
I don't want to use regular frames because I'm not working with a menu. Furthermore, the links aren't even text, they are pictures. I'm using a left and right arrow.

When I get home I'll link a page that does not have # in its name, and then I'll let you know how that experiment worked out.

Thanks for responding!

07-02-2006, 01:01 AM
Well, I tried it out. The problem was the # sign. Once I used http://www.yahoo.com instead of the link from before, it worked perfectly in Internet Explorer.

Thanks to everyone who provided me feedback. :)
I really didn't expect # to be the root of the problem.

I don't think it's possible to replace # with an equivalent form, so I'm going to do a little webpage redesigning.

07-02-2006, 01:05 AM
okay! I take it back. I just found this page: http://www.blooberry.com/indexdot/html/topics/urlencoding.htm

# = %23

However, when I replaced: default.htm#no_events with default.htm%23no_events
it didn't work in IE, and stopped working in NS and Mozilla Firefox.