Okay, I'm working on a band's website.

We're making a discography page.

Now, I'm going to have a Table with Two Columns. Left column will be the albums. Right column will actually be whatever album is clicked on.

I was wondering, is it possible to make an iframe to display the album that is clicked from the left column, and have it to where I can just click on the album name, and it will change what is inside the iframe without having to make multiple pages with a different iframe frame sources? Is that possible? I think it can be done with a drop down form, but I want it to be done just with regular clickable links?

In short:



So can it be done and what script would I need? If possible, could it be shown as a small example rather than the straight simple code (nothing over the top though)

I'm not sure I understand. Do you want to change the value of src="" in the IFRAME tag so the IFRAME displays another page? Sure. that's what (i)frames do. Take a look at the target attribute.
http://htmlhelp.com/reference/html40/special/a.html

If you mean that you don't want to write the HTML pages that should be displayed in the iframe, you can generate them with JavaScript. But it's every bit as much work and then some and it adds to the usability, accessibility and search engine problems the IFRAME already causes. I'd never do that.
http://htmlhelp.com/faq/html/frames.html#frame-problems
In fact, I wouldn't use an IFRAME. I'd create a new page for each album with everything the same except the text about the album.

No, what I mean is I want to click on the album name on the left, and it changes in the iframe. Perhaps a dynamic iframe is a better term? One iframe, many album links, I click the album link on the left and the iFrame source on the right changes.

The best comparison I make is actually here: http://www.mellencamp.com/index.php?page=discs

I know that's Flash, but I want the same idea if possible. Click the album, only the album info on the right changes without an entire page reload (though I know the iframe content would have to load which is fine.)

Maybe there is another way to do this without iframes? I know it would be Javascript.



As a matter of fact this was going to be what I was going to do. Only thing is that if there's a new album coming out or they want something changed in the album list on the left, then I'd have to go through and change it on ALL the albums list to the side, which isw hy I was hoping to accomplish what I wanted to accomplish. We're talking potentially 50 pgs worth of stuff here haha (well for each album, DVD, etc.)

Plus with what I was wanting to do, I was hoping it would only reload the iframe content, instead of the whole page if you know what i mean as I mentioned earlier.

OK, but that is how frames work. You just link to the page you want to show in the frame like so:






Ah, now that makes sense. It's easily done but it has to be done on the server. SSI (Server Side Includes), PHP inludes... If you aren't a programmer, this is nothing to be afraid of. In the case of SSI you just insert a "special tag" where you want for instance the menu to show up. The menu code itself is saved to a separate text file that you can edit when you want to make changes. Do you have anything like that available to you on the server?
http://htmlhelp.com/faq/html/design.html#include-file

I don't know if that's on the server or not. I'm just designing it, they have their own person who kinda does that stuff but he wouldn't know about.

Thanks for that link.

Now, it worked fine to start off, but then it started actually loading the iframe source in another tab on the browser for some reason after a couple of clicks for some reason, which is what I don't want. Any thoughts?



Those links were just what I was testing with.

Yeah, that the value of target in the link doesn't correspond with the name of the iframe and that you have your browser configured to open new tabs instead of new windows.
If the target isn't the name of a frame, the browser will open a new named window with that name. Typo?

You sure? They are all "datamain." The links actually do load in the iframe the first couple of times, and then starts opening up in another tab.

As a security feature, browsers don't let documents from one site manipulate frames owned by a different site. It looks like you linking to multiple sites. Once you load a document from a different site into your frame, the browser may think the frame is owned by the other site and prevent you from updating it.

And the site owner my not appreciate having his site framed by your site.

Will it open it in a new window though?

Devon, can we see the page? That would make this easier.

Yes. I've seen situations where links started opening in a new window/tab with the name of the old frame, after the old frame was "owned" by a framed third-party site.

Opera?

Maybe. It's been a while since I've seen this effect first-hand, and I've been using Firefox more than Opera since last June.

Could it be the effect of a frame breaking script?

Maybe.

Devon, can you provide the URL (address) of a document that demonstrates the problem?

As I mention, they are just there for examples (one of the site's is what I'm working on anyway.) But I don't know why it would work the first time and not the next? Unless the browser doesn't realize what's being framed until it's clicked on, and it's sort of like "Oh no, you're not doing that again mister."

The actual frames themselves will be within the site.

Sure, just need a few here.

Okay try this

http://dtjtest.freehostia.com/frametest.html

Perhaps I should try it with local files next?

http://www.bobandtom.com has this in the source.



Which does the same as this.
http://htmlhelp.com/faq/html/frames.html#stop-framing

Obviously it has time to fire before the redirection to http://www.bobandtom.com/gen3/index.htm takes place.



Nothing you can do about that.

I don't get a new window though. The page opens in the full window.

Hey man, to help you with this I think the other guy maybe misunderstood what you were asking. I just did this very thing here at this site
I think this is what you mean and all you have to do is just have your iframe with an initial src of #. and then use jquery to change the src attribute on click. like this

jquery


html
<html>
<head>
<title>Title of Page</title>
<script type="text/javascript" src="http://www.raphealwebdesign.com/jquery_full.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#albumid').click(function() {
$('#albumid').attr{(src : new_src.html)};
});
});

</script>
</head>
<body style="width: 800px">
<div id="left" style="width: 50%; float:left">
<span id="albumid">Album Name</span>
</div>

<div id="right" style="width: 50%; float: right">
<iframe src="#" width="500" height="400"></iframe>
</div>

</body>
</html>

This should be ready to copy and paste. You should just replicate. And it is simpler. To see a working example visit the link above and view source code, then look at the javascript file linked to it.