Правильно разворачивать HTML-виджет

Question

HTML и CSS макет для меня остаются черным искусством, поэтому я был бы признателен за любую помощь в том, что я пытаюсь достичь.

Я нахожусь в процессе создания JavaScript API для «виджета» нашей компании, чтобы люди могли включать его на своих сайтах. Если пользователь нажимает кнопку в этом виджете, я хочу увеличить размер виджета, скажем, с 300x200 до 600x400. Пока все хорошо, немного JS, и я счастлив. Но есть два ограничения:

(1) Я хочу «переполнить» все, что больше, чем 300x200, на страницу, то есть я не просто увеличиваю размер тега хоста <div>, чтобы другие элементы на странице удалялись; Я действительно хочу покрыть другие элементы на странице.

(2) Я хочу сделать это разумно, чтобы, если виджет находился в левой части страницы, он расширялся вправо; если он находится на правой стороне страницы, он должен расширяться влево; если он сверху, он должен расширяться вниз; и если он находится внизу, он должен расширяться вверх к вершине.

Я предполагаю, что мне понадобится какая-то подходящая комбинация CSS-свойств position / display / float, но я пока не смог обернуть голову вокруг требуемой точной комбинации.

Заранее спасибо.

РЕДАКТИРОВАТЬ 12/8/11 -

Просто для дальнейшего использования, я использовал перегрузку пользовательского интерфейса jquery position () , чтобы помочь мне с позиционированием. Это код, который я использовал в итоге:

// Create a placeholder object and then hide the engage display element.
var host = engageObject.getHost();
var engageHost = engageObject.getEngageHost();
var parent = engageObject.getParentElement();
this.mPlaceholder = document.createElement('div');
$(this.mPlaceholder)
    .width($(engageHost).width())
    .height($(engageHost).height())
    .css('float', 'left');
parent.insertBefore(this.mPlaceholder, host);
$(engageHost).hide();

// Update the host's layout
this.mOriginalHostPositioning = $(host).css('position');
this.mOriginalHostWidth = $(host).width();
this.mOriginalHostHeight = $(host).height();
$(host).width($(this.mConnectHost).width());
$(host).height($(this.mConnectHost).height());
$(host).css('position', 'absolute');

// If we would otherwise spill out of the window on the right or the bottom,
// make sure we expand in the correct direction.
var topLeft = $(parent).offset();
var right = topLeft.left + $(this.mConnectHost).width();
var bottom = topLeft.top + $(this.mConnectHost).height();
var posStr;
if (right > $(window).width()) {
    posStr = "right ";
} else {
    posStr = "left ";
}
if (bottom > $(window).height()) {
    posStr += "bottom";
} else {
    posStr += "top";
}
$(host).position({ my: posStr, at: posStr, of: parent });

По сути, я создаю новое placeholder изображение того же размера, что и исходный, нерасширенный виджет (engageHost), скрываю исходный виджет и затем помещаю свой новый connectHost в соответствующий угол исходного родителя. элемент.

Answer 1

Я думаю, что свойство Z-Index в CSS - это то, что вы ищете. Простое приведение всего div к более высокому Z-индексу может решить вашу проблему. В качестве альтернативы вы можете зарезервировать место за виджетом. Используйте пустой div, как это:

<!-- The following div takes up the space behind the floating applet.  In your case 300x200 or 600x400 ect -->
<div style="width:300; height:200; float:left;">&nbsp;</div>

<!-- The following div is where your widget goes (floating above the rest of the page) -->
<div style="position:absolute; left:0px; top:0px; z-index:2;"> 
    Your widget code here
</div>


<div style="clear:both">
    Other code on the website here.
</div>

Соответствующие школы W3: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

2) Использовать javascript - рассчитать позицию на экране и применить классы на основе этой позиции.Имейте 4 разных CSS класса, каждый из которых будет расширять виджет в разных направлениях и просто применять их к вашему виджету.