having a div appear on different pages

Question

i have an unusual situation where i need to have the same "permanent" div appear on multiple pages, but not allow the browser reload between page changes. in other words, i need to load in new pages and "slide them underneath" a permanent div. the permanent div needs to be able to be moved around. below is a crude illustration of what i am trying to accomplish:

i can accomplish most of what i need to do using the jq load:

$('div#outerContainer').load('/page-one.html', function()  {
        console.log ('first load performed') ;
});

Is there some way using jQuery to create the unix equivalent of a "symbolic link" - not the link, but rather the way unix lets us do "ln -s" so a file appears in two or more places at once?

I considered making the permanent div invisible and then cloning it, but the div contains an external iframe and i cannot have two identical iframes on the page at the same time. i also considered saving the permanent div into a variable, but that means i have to destroy the permanent div, which would not work either.

Or does anybody have a better way to approach this?

thank you very much.

EDIT

Here is a working example of what i am after. i have a parent.html that first calls child-1.html upon the initial page-load. then child-1.html can request a load of child-2.html, and vise-versa, in this simple example.

div#masterContainer is the div that needs to appear on each page. i discovered i can initially make it zero pixels by zero pixels so its invisible. (better ideas are always welcome and most appreciated)

This is not the ideal solution since i am using window-resize and absolute position values to move the div#masterContainer around. if there is a better solution to anchor the div#masterContainer to the div#childContainer that would be the most optimum answer.

parent.html:

<script type='text/javascript'>
    $( document ).ready(function() {
            nextPage("child-1.html");
            return false;
    });
    nextPage.initialLoad    = true;
    function nextPage(nextPageHtml) {
            if  ( nextPage.initialLoad )    {
                    nextPage.initialLoad = false    ;
                    $('div#masterContainer').css(
                            {       'width'         :       '300px'
                            ,       'height '       :       '200px'
                            ,       'position'      :       'absolute'
                            }
                    );
            }
            $('div#masterPageHolder')
               .empty()
               .load( nextPageHtml
                    , function(responseTxt, statusTxt, xhr) {
                         alignDiv();
                      }
                    );
            $(window).resize(function()     {
                    alignDiv();
            });
    }
    function alignDiv()     {
            var p = $('div#childContainer');
            $('div#masterContainer').css(
                            {       'left'  :       p.position().left
                            ,       'top'   :       p.position().top
                            }
                    );
    }
</script>
<div id='masterPageHolder'></div>
<div id='masterContainer' 
 style='position:  relative  ; 
        height:    0px       ;  
        width:     0px       ; 
        overflow:  none      ; 
        border:    2px dotted red;'>
            this is the masterContainer 
            surrounded by a 2px dotted red border
</div>

child-1.html:

<div style='height: 40%;'>
<a href='#' onClick='javascript:nextPage("child-2.html");'>child-2.html</a>
</div>
<div style='margin-left: 50%'>
        <div id='childContainer' style='width: 300px; height: 250px;' />
</div>
this is the child-1.html webpage

child-2.html:

<div style='height: 20%;'>
<a href='#' onClick='javascript:nextPage("child-1.html");'>child-1.html</a>
</div>
<div style='margin-left: 20%;'>
        <div id='childContainer' style='width: 300px; height: 250px;' />
</div>
this is the child-2.html webpage

any other suggestions are most appreciated.

Answer 1

"I considered making the permanent div invisible and then cloning it, but the div contains an external iframe and i cannot have two identical iframes on the page at the same time"

var newDiv = $('.permanent-div').clone().find('iframe').remove();

Perhaps that will fix your problem, but if not you'll need to make the result you're hoping for clearer, perhaps by adding your code to your question.