замена двух элементов DIV? (предварительный просмотр одного, в то время как другой занимает всю страницу) - EDITED: замена DIV и IFRAME

У меня есть HTML-страница, содержащая два элемента DIV. Я хочу расположить эти два элемента таким образом, чтобы один из них занимал всю страницу, а другой отображался в виде небольшого окна предварительного просмотра в правом верхнем углу браузера. когда пользователь нажимает на предварительный просмотр, содержимое этого DIV заменяется DIV, занимающим страницу.

Элементы div — это виджеты Google. (Аннотированная временная шкала, диаграмма движения и т. Д.).

РЕДАКТИРОВАТЬ: я использую метод, предоставленный wdm для достижения заданного выше вопроса. Теперь проблема в том, что у меня есть IFRAME, который я хочу поменять местами с элементом DIV. Я поместил IFRAME внутри тега DIV следующим образом

  <div class="b small">
    <iframe src="http://somerandomsite.com" name="framename" id="frameid"> </iframe> 
  </div>

iframe неправильно изменяет размер. Я предполагаю, что это потому, что форматирование CSS не работает с элементом iframe должным образом.

Любые идеи, как я могу изменить размер iframe, чтобы он менял размер при нажатии?


javascript html iframe swap
person jay    schedule 26.05.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Пожалуйста, посмотрите демо и нажмите на маленькое поле. По сути, я просто меняю классы между двумя элементами div через jQuery.

Демонстрация: http://jsfiddle.net/wdm954/dRzaU/1/

РЕДАКТИРОВАТЬ: Демонстрация с изображениями: http://jsfiddle.net/wdm954/dRzaU/4/

jQuery...

$('.small').live('click', function() {
    $('.big').addClass('small').removeClass('big');
    $(this).removeClass('small').addClass('big');
});

HTML...

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>

CSS (см. демонстрацию)

person wdm    schedule 26.05.2011
comment
Спасибо. Всегда хорошо иметь несколько точек зрения. Помогает учиться всем! - person wdm; 26.05.2011
comment
Спасибо, wdm, delan, я попробовал оба метода, используя образцы элементов div, и оба работают хорошо. (метод wdm именно то, что я искал) - person jay; 26.05.2011

arrow_upward
1
arrow_downward

Вы можете сделать это, имея четыре разделов — два полноразмерных и два эскиза. Ваша разметка может выглядеть так:

<div id="thumb1"> ... </div>
<div id="thumb2"> ... </div>
<div id="fullsize1"> ... </div>
<div id="fullsize2"> ... </div>

А затем настройте прослушиватели javascript для переключения между ними. Если бы вы использовали jQuery, они могли бы выглядеть так.

$('#thumb1').click(function() {
    $(this).hide();
    $('#thumb2').show();
    $('#fullsize1').show();
    $('#fullsize2').hide();
});

$('#thumb2').click(function() {
    $('#thumb1').show();
    $(this).hide();
    $('#fullsize1').hide();
    $('#fullsize2').show();
});
person declan    schedule 26.05.2011