dynamically attach a tag to another tag by id Options

[Bonzay0]

Hi,

I have the following situation:

I have a frameset with two frames in it. The top frame contains a div with content in it. The top frame never changes that's why the div is located there.
The bottom frame is the rest of the website with navigations and pages ect...

I want that whenever a user go into a spesific page with a div with a special ID in it (it doesn't have to be a div)
The div on the top attach itself to the special div on the bottom frame (but the tag itself is still located on the top frame only positioned bellow/inside/above/left/right to the bottom frame div as the user see it).

I'v been searching for a solution but couldn't find one.

Is it even possible to do so? If so, how do I do that?

Thanks in advance.

[Christian J]

Do you want two versions of the top frame DIV visible at the same time (the original and a copy in the bottom frame), or do you want to move the DIV between the frames? In either case it can be done with javascript.

Personally I wouldn't use frames at all, though: http://htmlhelp.com/faq/html/frames.html#frame-problems

[Bonzay0]

Do you want two versions of the top frame DIV visible at the same time (the original and a copy in the bottom frame), or do you want to move the DIV between the frames? In either case it can be done with javascript.

Personally I wouldn't use frames at all, though: http://htmlhelp.com/faq/html/frames.html#frame-problems

Hi,

Thank you for your reply.
I can't remove the frames as they are a must. The div in the top frame is hidden until it sees the (in javascript) the bottom div (in the other frame) and then while still exists in the top frame it being displayed attached into the bottom div.

Thats all I need, if you can give me an example how to do so it will be great.

Thanks.

This post has been edited by Bonzay0: Feb 21 2012, 07:56 AM

[pandy]

Are both documents (the one in the top frame and the one in the bottom frame) on the same domain? What you say make me think they are not and if that is so this isn't possible to do.

[Christian J]

This might work, but only if all pages are from the same domain:

CODE

<script type="text/javascript">
var div1=top.frame1.document.getElementById('div1');
var div2=top.frame2.document.getElementById('div2');
div2.appendChild(div1);
</script>

The two frames are named "frame1" and "frame2" in the frameset, and the DIVs have the IDs "div1" and "div2". Put the script in the page in the bottom frame, after the DIV.

See also http://www.jr.pl/www.quirksmode.org/js/frameintro.html

[pandy]

What's that page you've found? jr.pl?

[Bonzay0]

Hi,

Thanks for replying.

To answer your questions: yes both the frames in the frameset are in the same domain.
And about the example it will be useless after one click in the bottom frame. Why? because when you do an append the first div goes from it's location in the html into the bottom frame and stays there, while that happens if the user change the location in the bottom frame (same domain but a different page) I lose my first div as it was appended into the second div.
Even so how do I tell the div to check if it needs to be moved? the bottom frame is the one changing not the top/frameset itself.
How do I make sure that the div1 gets back to the top frame if user moved a page in the bottom frame?
I can only edit the frames themselfs the page that holds the frameset is not possible for me to edit (don't ask why I just can't)
I can only edit the frames themselfs (what displayed on them and so on...)
I can add javascript to edit the frameset if it is useful...

I'm really stuck as I need to make sure that div1 stays in the top frame hidden until it see that div2 exists and then attach itself to it until user leave the page where div2 is and div1 goes back top.

I really hope you can help me as I really must do it some way or another with those conditions.

Thanks again.

[pandy]

I have to ask why you are doing this at all? Why can't you put the DIV where it should show up in the second document to start with? I don't see what's dynamic from your description.

[Bonzay0]

I have to ask why you are doing this at all? Why can't you put the DIV where it should show up in the second document to start with? I don't see what's dynamic from your description.

I do this because the work I'm in at must have it like that.
I work with a product that generates the frameset and I can control parts of those generated areas (added tags and javascript into them).
The top frame is the header which is the only thing that doesn't get refreshed when you click on something within the system (the web). that's why I put my div1 in there to hold all of the content alive all the time the user is in my system (website).
div2 only appears in spesifc pages (not only 1 page) and every time div2 appears the user need to see the the div1 content where div2 is.
I can't change that and it is the demand of my project to do so. if you interested what is the content of my div1 it is a GIS map that need to be always in session and displayed when entering into div2 pages.

Hopes this clarify my intentions.

[pandy]

Yes, thank you. But if the top document reloads for each click, then Christian's solution should work.

Scrap that. I read sloppily. Where are the links they click to load a new page? In the second document?

[Christian J]

What's that page you've found? jr.pl?

It seems to be a mirror of the old PPK site (since PPK removed some old useful pages). Don't know who maintains it.

[Christian J]

And about the example it will be useless after one click in the bottom frame. Why? because when you do an append the first div goes from it's location in the html into the bottom frame and stays there, while that happens if the user change the location in the bottom frame (same domain but a different page) I lose my first div as it was appended into the second div.

Instead of moving div1 you could make a copy of it and put in the bottom frame:

CODE

<script type="text/javascript">
var div1=top.frame1.document.getElementById('div1').cloneNode(true);
var div2=top.frame2.document.getElementById('div2');
div2.appendChild(div1);
</script>

(I haven't tested this).

[pandy]

I think the problem is that the script needs to be executed each time a new page is loaded in the bottom frame. So question is where the navigation links are so a call to the script or a reload of the top frame can be tagged on. But maybe I still get it wrong.

[Christian J]

I think the problem is that the script needs to be executed each time a new page is loaded in the bottom frame.

When the bottom frame page loads the script on it will execute.

(I did get a silly JS error in Iron/Chrome when I tested from my local file system: "Domains, protocols and ports must match". Could this be due to ports and protocols not being used in the local filesystem? When I tested from my local server it worked, even in Iron.)

So question is where the navigation links are so a call to the script or a reload of the top frame can be tagged on.

Not sure what you mean with "tagged on", but I don't think it matters.

[pandy]

I was under the impression the OP could only edit the page in the top frame.

Verb: tag on
Fix to; attach

[Bonzay0]

Hi,

Thank you two for your replies but I still seem to be unabale to solve the issue.
Maybe I didn't explain it well so I'll write in points what I can do and can't and what I have to do.
1) I have 2 frames a top frame and a bottom frame (if the info is needed: the bottom frame is also a frameset but I need to edit the first frame there as the second frame of the frameset doesn't matter to me at all)
2) I can edit the pages in both frames. Meaning anything there is editable in some way or another but most of the pages get generated from a code in the server side, so I only add my stuff to it and never touch how the server generates the pages I only add my content into it.
3) Bottom frame is the one who changes all the time, it has a navigation bar and buttons for server side events and so on. Top frame never ever change.
4) I have pages in the bottom frame that contains a div I made (lets call it div2) it will be my "anchor" a way to me to identify that I'm in a page that needs the top frame div (lets call him div1) to some how move all of its content only as a display for the user, from the top frame into div2. I prefer if possible not to actually move the content itself from the top frame but make it look like it moved (meaning user see it in the bottom frame but it actually exists in the top frame), why to do that? because it saves the javascript checks for changes in the bottom frame. Meaning checking if we moved from a page with div2 to a page without div2.
If that not possible then I need to know when I move from the page to another (in the bottom frame) but it seems that onunload of the bottom frame doesn't know when he changes the page insides himself. (maybe it is not the right event to register the javascript to move the content if so I'd like to know what event of what element I need to register to know when to move the content)
5) All the pages are in my domain on my server so no worries for permissions between pages/frames.

I hope it clarify things up. If you need any other information let me know.

Thanks!

[Bonzay0]

I forgot to add that the content of div1 is an iframe with a GIS silverlight map.
That means that if user change page in the bottom frame we lose that iframe if I haven't moved it back to the top frame (if we use the append child method).
If we clone it none of the changes (edits/moving/scrolling) of the map are being transmited into div1 iframe.

That's why I need a way to save my iframe session while user is still in my website.

[Christian J]

the bottom frame is also a frameset but I need to edit the first frame there as the second frame of the frameset doesn't matter to me at all

In that case maybe my script above should be modified to this:

CODE

<script type="text/javascript">
var div1=top.frame1.document.getElementById('div1').cloneNode(true);
var div2=document.getElementById('div2');
div2.appendChild(div1);
</script>

(there really was no point in using top.frame2.document.getElementById('div2') even before, since the script is already in the same page as div2).

I prefer if possible not to actually move the content itself from the top frame but make it look like it moved (meaning user see it in the bottom frame but it actually exists in the top frame)

Here's an idea: when the div2 page is loaded, a script on it increases the top frame height, so that the map becomes visible. When other bottom frame pages are loaded, the top frame is shrunk. This may not look pretty though. One way to make it prettier might be by using iframes instead of a frameset, since iframes can be moved around with CSS.

why to do that? because it saves the javascript checks for changes in the bottom frame. Meaning checking if we moved from a page with div2 to a page without div2.

I don't know if the top frame can detect changes in the bottom frame, unless the bottom frame sends data to the top frame. You might put a script in every bottom frame page, and let those scripts send data to the top frame (either "I'm the div2 page" or "I'm not the div2 page") --that way you'd detect when non-div2 pages are loaded.

IIRC the onunload event has (intentionally) limited functionality in various browsers.

[Christian J]

I forgot to add that the content of div1 is an iframe with a GIS silverlight map.

This sounds complicated.

If we clone it none of the changes (edits/moving/scrolling) of the map are being transmited into div1 iframe.

Don't think you can do anything about that, unless you are able to do something with Silverlight (which I know nothing about).

[Bonzay0]

I forgot to add that the content of div1 is an iframe with a GIS silverlight map.

This sounds complicated.

If we clone it none of the changes (edits/moving/scrolling) of the map are being transmited into div1 iframe.

Don't think you can do anything about that, unless you are able to do something with Silverlight (which I know nothing about).

Thank you for you help.

I'm still trying to find a solution.
I'm not quite sure what to do right now. I'll keep look into it and update the post if I get any progress done.

Thanks again!