CODEWITHSUNDEEP
htmlcsscss-float
Ken Smith
Ken Smith

Reputation: 20445

Correctly expanding an HTML widget

HTML and CSS layout remains a bit of a black art to me, so I'd appreciate any help in what I'm trying to accomplish.

I'm in the process of creating a JavaScript API for our company's "widget", so that folks can include it on their websites. If the user presses a button within that widget, I want to increase the size of the widget, say from 300x200 to 600x400. So far so good, a little bit of JS and I'm happy. But there are two constraints:

(1) I want to "overflow" anything larger than 300x200 onto the page, i.e., I don't just increase the size of the host <div> tag so that other elements on the page move out of the way; I actually want to cover over other elements in the page.

(2) I want to do this intelligently, so that if the widget is on the left-hand side of the page, it will expand to the right; if it's on the right-hand side of the page, it should expand to the left; if it's on the top, it should expand towards, the bottom; and if it's on the bottom, it should expand upwards towards the top.

I presume that some appropriate combination of position/display/float CSS properties is what I'll need - but I haven't yet been able to wrap my head around the precise combination required.

Thanks in advance.

EDIT 12/8/11 -

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

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

Effectively, I create a new placeholder image that's the same size as the original, unexpanded widget (engageHost), hide the original widget, and then position my new connectHost to the appropriate corner of the original parent element.

Upvotes: 4

Views: 678

Answers (2)

Chris Seltzer
Chris Seltzer

Reputation: 171

I think the Z-Index property of CSS is what you're looking for. Just pulling the entire div to a higher Z-Index may solve your problem. Alternatively you may want to reserve the space behind the widget. Use an empty div like this:

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

Upvotes: 3

bobek
bobek

Reputation: 8020

2) Use javascript - calculate the position on the screen and apply classes based on that position. Have 4 different CSS classes each will expand the widget in different direction and just apply them to you widget.

Upvotes: 0

Related Questions