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

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

3 голосов
/ 26 мая 2011

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

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

EDIT: Я использую метод, предоставленный wdm для достижения вышеуказанного вопроса. Проблема в том, что у меня есть IFRAME, который я хочу поменять местами с элементом DIV. Я поместил IFRAME внутри тега DIV следующим образом 

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

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

Есть идеи, как изменить размер фрейма так, чтобы он менял размер при клике?

Ответы [ 2 ]

4 голосов
/ 26 мая 2011

Пожалуйста, посмотрите демоверсию и нажмите на маленькую коробочку.По сути, я просто меняю классы между двумя 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 (см. Демонстрацию)

1 голос
/ 26 мая 2011

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

<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();
});
...