Trying to work w/ Iframes

DrewAlderfer · September 22nd, 2012, 03:02 PM

Hi, I am trying to add some functionality to my website, and simplify the aesthetic a bit. I learned some simple Javascript when I first put it up in order to switch out images and layers, but now what I'm trying to do is a bit more complicated. I have been working on it for a while and am at a dead end. I have a book and have been reading a lot. I've tried hard to solve this problem on my own and can't quite get a handle on it. I really appreciate any help I can get.

Here's what I have and what I want to do:

My current site is here. (the page this is relevant to is just the Illustration page)

This is a "wire-frame" breakdown:
Image
So, Iframe#1 points at a "menu.html" file and iframe#2 is the "target" for <a>'s in iframe#1. This works. I was surprised, but maybe I shouldn't have been.

I am trying to set it up so that the menu <a>'s in Iframe#1 will change class depending on what .html page is being displayed in Iframe#2. Basically so that the "buttons" to change images will change color to signify which one is being displayed currently.

I think I know how I should do it, but I don't know the syntax or how to actually write it, so here's my idea.

have a function (in the "menu.html"?) that gets and array of all the <a>'s href locations and compare those to what location is being displayed in the "displayframe". This lets me (I think) write a function that just runs through each <a> element and the array comparing two variables: the location that the link points to (let's say "x") and the location in the "displayframe"(and "y"). Then its just an if statement, so:

if x==y then the class of the element =active

and

if x!=y then the class of the element ="inactive"

The problem I'm having is that I have no idea if that is possible, or if it makes sense. I've been reading and trying things out but I can't figure it out. Does anybody have suggestions? I hope that all made sense.

Note:
I understand that the way I have my page set up currently (multiple Iframes) might possibly be a bit dumb. BUT this is the solution I came up with to make it easy to update. Instead of having a separate page for every piece in my portfolio, now if I want to add/remove something I just slap it on its own page and add a link in the "menu.html" file. Easy. I've come up with plenty of ways to solve this by getting rid of the two iframes but I want to see if it's possible to get this to work.

Imar · September 23rd, 2012, 09:59 AM

Hi there,

You can call some code from iframe2 that sets the selected menu item in iframe1. For that to work, the iframe with the menu needs a name attribute (which is Menu in this example):

Code:

<script type="text/javascript">
  parent.frames['Menu'].document.getElementById('Page2').className = 'active';
</script>

This assigns the class "active" to a menu with an ID of Page2. The code in the Menu iframe could look like this:

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    .active 
    {
      color: green;
    }
  </style>
</head>
<body>
  <a id="Page1" href="Page 1">Page 1</a>
  <a id="Page2" href="Page 2">Page 2</a>
</body>
</html>

If I were you, I'd look at server side includes using web technology such as PHP or ASP.NET. That makes stuff like this a lot easier to work with.

Cheers,

Imar

DrewAlderfer · September 23rd, 2012, 01:39 PM

Thank you Imar! That is a huge help. I wasn't aware of the "parent.frames" to let me manipulate things from frame to frame. I got the class to change using an "onload" to trigger a function with basically the code you gave me.

There is only one more hurtle (I think) I need to overcome which is figuring out how to return the url of a link by it's id. Is this even possible? I'm going through it now trying to figure it out.

I have figured out how to return the URL a frame is displaying, which is huge (and thanks to Imar's help) but I need to be able to compare that to the href of each link in the menu, and then by id, set their class depending on whether they are == or !=. The reason is that as the code you displayed is now, the color of the links in the menu stay changed even after clicking on another, since the menu doesn't reload each time I click, just the display frame. So the className stays "active" even after clicking another link.

I can change each one independently by their id's like above, so for on "Page 1" it would be:

Code:

 <script>
parent.frames['menu'].document.getElementByID('page1').className="active" ;
parent.frames['menu'].document.getElementByID('page2').className="inactive";

<script/>

but the problem here again is that I'm looking for something that will allow me to add/remove pages and all the pieces still fit together, without having to go in and change lines of code on every page, each time I update.

So I don't know if what I want is possible. I know I can get the URL of a document, even one in another iframe. I think I can get the href of a link, although I'm not sure I've gotten that to work yet. I don't know how to get the href of a specific link by id.

Can I put an "onload" event in the <iframe> tag in the illustration.html page to force the "menu" frame to reload every time the display frame loads a new page? If so I think that would solve the problem.

DrewAlderfer · September 23rd, 2012, 02:10 PM

nope. Reloading the "menu" frame every time the display frame reloads doesn't work because it resets the colors of all the links including the one that's supposed to change. So the script in the display page changes the link in the menu page and then it gets changed back immediately when the "menu" frame reloads.

What I'm trying to get is a single function that can either sit in the menu page, or each page that is linked from the menu (and is displayed in the display frame) but it has to be a single function that doesn't need to be changed if the order/number of pages linked from the menu change. I can just tack it in a page and it will function properly.

Maybe this isn't possible? I don't know. I feel like it should be based on what I've learned so far, but I don't know how to do it. Maybe it's not practical, but it seems like it should be possible. Maybe it just requires a complex set of variable relationships which is why I can't get a handle on what I need. I think the biggest problem I'm having is not understanding well enough how the different objects relate in Javascript. I don't know the order or the nesting so figuring out what the relationships need to be or whether it's even possible is beyond me at the moment. I really appreciate any help.

DrewAlderfer · September 23rd, 2012, 06:36 PM

Okay. I'm trying to build a function that will return the href's for all the links in an iframe. This is the code I'm working with:

Code:

function test () {
	var a= parent.window.frames['iframe'].document.links ; 
	
	var x;
	x= parent.window.frames['iframe'].document.links.length ;
	var y="", i; 
	for (i=0; i<= x-1; i++) {
	  y=y + a[i].href + "<br />" ;
	}
	document.getElementById('url').innerHTML= y;
}

This doesn't work and my question is: is there a way to use a variable the way I'm trying to use "i" in the for statement above? The idea was supposed to be that the "for" statement counts through the array of links in the 'iframe' and writes out each link's href into a <div> layer. All I'm trying to do with this is figure out how I can set up a function to return info on a dynamic number of links.

Once I figure this part out I still need to figure out how to compare the links href to the url of the other iframe. But even then I need some way to identify each link by it's id and change it's class depending on whether or not it's href matches up with the document.URL of the display frame.

Another option I've considered is:

If there is a way to reset the style of every link in a page using script then I can put a function in each page that goes into the display frame that would set the className of every link in the menu frame to "inactive" and then a line later in the script that would change the class of a specific link through it's id to "active". This may be a better bet than what I'm trying to do above. But I'm not sure yet how to set a specific style attribute for every link on a page using a function. This might not work though.

DrewAlderfer · September 23rd, 2012, 08:00 PM

Lest you think I'm not working on this (at the expense of probably more important work) here is where I am now:

Code:

function test () {
	var a= parent.window.frames['iframe'].document.links ; 
	
	var x, tar;
	tar= window.frames['frame_dis'].document.URL;
	x= parent.window.frames['iframe'].document.links.length ;
	var y="", i; 
	for (i=0; i<= x-1; i++) {
	  if (a[i].href == tar) { var b= window.frames['iframe'].document.links[i].id;
	  parent.window.frames['iframe'].document.getElementById(b).className="active";
			}
	else {
	 parent.window.frames['iframe'].document.getElemnetById(b).className="inactive";	
	}
	}
	document.getElementById('url').innerHTML= x;
}

the last code I posted actually did work. Or I changed something and didn't notice and now it works. But after discovering that I did this, which definitely doesn't work. I'm testing individual pieces but I'm not sure of the syntax everywhere in there and maybe I made stupid mistakes but to me it seems like this should work.

It's a function that sits on the same page as the two iframes which it's drawing data from. The For Statement is probably the problem. I'm really not sure exactly what it's doing (I know what I want it to do). I'm not sure I wrote it right or am using it correctly but I did the best I could...

DrewAlderfer · September 23rd, 2012, 08:35 PM

Ahahaha. And the winning code is:

Code:

function test3 () {
	var a, x, tar, i, y="";
	a= window.frames['iframe'].document.links;
	x= window.frames['iframe'].document.links.length;
	tar= window.frames['frame_dis'].document.URL;
	
	for (i=0; i<= x-1; i++) 	{
		
		var b= window.frames['iframe'].document.links[i].id;
		
		if ( a[i].href == tar) {
		window.frames['iframe'].document.getElementById(b).className="active";
		}
		if ( a[i].href != tar) {
		window.frames['iframe'].document.getElementById(b).className="inactive"; 	
		}
	}
	 
}

Thank you again Imar for your help. It was huge. After spending all day on this I got it. Maybe pretty lame for you programmer types, but I'm an artist and have no clue. I'm ecstatic right now. Problem solving is a lot of fun and this was like one big mysterious puzzle a day and a half ago.

Just so you know, dear phantom reader, this code sits on the page with both Iframes (the illustration.html page on my site) and will be triggered by an onload event in the display frame. So every time the display frame loads a new page with work on it the script compares the document.URL of the display frame with each link in the "menu" frame ('iframe' above) and changes the class depending on whether they match up.

It didn't end up being too complicated. But I'm really happy. This is why I love writing my own site (besides saving money). It's so much fun to win. Take care.

DrewAlderfer · September 23rd, 2012, 11:05 PM

This is what it looks like:
http://www.drewalderfer.com/illustration.html