jquery - скользящий iframe, скрывающий div

Question

Моя страница имеет левое боковое меню и правое содержимое со ссылками.Когда по ссылкам в контенте щелкают, тогда мне нужен iframe, загружающий контент в ссылке, и он подходит так, чтобы он охватывал правую часть div, содержащую контент.

Этот iframe должен быть свернут, когда не нужен, и долженбыть видимым, как полоса внизу, всегда плавающая, а когда достигнет нижней части страницы, она должна быть видна над полосой нижнего колонтитула.

Может кто-нибудь подсказать мне, как это сделать.Если приведен пример, это будет намного лучше.

Спасибо, Сандип

Я прилагаю демонстрационный макет того, что я хотел.

Answer 1

Если вы структурируете свой правый контент с помощью содержащего div, и внутри этого div создаете вложенный div, который содержит ваш обычный контент и iframe;затем вы можете настроить обработчики кликов для вашей ссылки, которая будет скрывать вложенный div и показывать 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 ----

Что касается прикрепленной плавающей строкивнизу страницы:

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

И если вы хотите скрыть этот «плавающий div» при отображении iframe, просто добавьте следующее в код javascript (справа с другим кодом slideUp / slideDown):

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