jquery - sliding iframe hiding a div

Question

My page is having left side menu and right side content with links. When the links in the content are clicked then i need an iframe loading the content in the link and come up so that it covers the right side div having the content.

This iframe should be minimized when not needed and should be visible like a bar at the bottom always floating and when reached bottom of page it should be visible above the footer bar.

Can anyone suggest me how to do this. If example is provided that will be much better.

Thanks, Sandeep

Im attaching a demo layout of what i wanted.

Answer 1

If you structure your right side content with a containing div, and within that div make a nested div that holds your regular content and an iframe; then you can setup click handlers for your link that will hide the nested div and show the iframe:

$(document).ready(function() {
    $('#inner_div > a').live('click', function() {
        $('#inner_div').slideUp();//just an example animation, you can set whatever attributes you would like with jquery, like just change the height with .css({height: '0px'})
        $('#iframe_id').slideDown();
    });
});
<div id="outer_div">
    <div id="inner_div">
        <a href="some_link.html" target="iframe_id">Link Text</a>
    </div>
    <iframe id="iframe_id" style="display:none;"></iframe>
</div>

----EDIT----

As for the floating bar attached to the bottom of the page:

<div id="floating_footer" style="position: absolute; bottom: 0px; right: 0px; width: 90%; height: 50px; background-color:#069;"></div>

And if you want to hide this "floating div" when the iframe shows up, just add the following to the javascript code (right with the other slideUp/slideDown code):

$('#floating_footer').slideUp();