iFrame / Changing Src From Outside iFrame Options

[Devon]

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:

CODE

<table>

<tr>
       <td>Link #1<br>Link #2</td>
       <td>iframe</td>
</tr>
</table>

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)

This post has been edited by Devon: Mar 23 2008, 11:42 AM

[pandy]

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.

[Devon]

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

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.

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.

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.

This post has been edited by Devon: Mar 23 2008, 03:33 PM

[pandy]

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.

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

CODE

<a href="album_page.html" target="the_name_of_your_iframe">New album!</a>

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.)

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

[Devon]

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?

CODE

<a href="http://www.wishtv.com" target="datamain">New album!</a>
        <a href="http://www.nightswithalicecooper.com" target="datamain">New album!</a>

<iframe id="datamain" scrolling="yes" src="http://www.alicecooper.com" width="100%" height="387" name="datamain"></iframe>

Those links were just what I was testing with.

[pandy]

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?

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?

[Devon]

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.

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.

This post has been edited by Devon: Mar 24 2008, 11:25 AM

[Darin McGrew]

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.

[pandy]

Will it open it in a new window though?

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

[Darin McGrew]

Will it open it in a new window though?

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.

[pandy]

Opera?

[Darin McGrew]

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.

[pandy]

Could it be the effect of a frame breaking script?

[Darin McGrew]

Maybe.

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

[Devon]

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

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.

[Devon]

Maybe.

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

Sure, just need a few here.

[Devon]

Okay try this

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

Perhaps I should try it with local files next?

[pandy]

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

CODE

<script LANGUAGE="JavaScript">
<!-- //FrameBuster
     if (self != top) top.location.replace(self.location);
//-->
</SCRIPT>

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.

CODE

<meta http-equiv="refresh" content="0;URL=gen3/index.htm">

Nothing you can do about that.

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

[ralphd89]

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.