Correct HTML widget extension

Question

HTML and CSS layout remain black art for me, so I will be grateful for any help in what I'm trying to accomplish.

I am creating a JavaScript API for our company’s widget so people can enable it on their sites. If the user presses a button inside this widget, I want to increase the size of the widget, say, from 300x200 to 600x400. So far so good, a little JS, and I'm happy. But there are two limitations:

(1) I want to "overflow" anything larger than 300x200 per page, i.e. I’m not just increasing the size of the host <div> tag so that the other elements on the page go astray; I really want to cover other elements on the page.

(2) I want to do this reasonably, so if the widget is on the left side of the page, it will expand to the right; if it is on the right side of the page, it should expand to the left; if it is on top, it should expand to the bottom; and if it is at the bottom, it should expand up to the top.

I assume that some suitable combination of CSS / position / display / float CSS properties is what I need - but I have not yet managed to wrap my head around the required combination.

Thanks in advance.

EDIT 12/8/11 -

Just for reference in the future, I ended up using jQuery UI position () to help me with positioning. This is the code I ended up with:

 // 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 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 }); 

In fact, I create a new placeholder image that will be the same size as the original, engageHost widget ( engageHost ), hide the original widget, and then put my new connectHost in the corresponding corner of the original parent element.

Answer 1

I think the Z-Index CSS property is what you are looking for. Just pulling the entire div into a higher Z-Index can solve your problem. In addition, you can reserve a place for widgets. Use an empty div as follows:

 <!-- 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> 

Relevant W3 schools: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

2) Use javascript - calculate the position on the screen and apply classes based on this position. You have 4 different CSS classes, each of which will expand the widget in a different direction and simply apply them to your widget.