Home/ Questions/Q 6914073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:18:03+00:00

HTML and CSS layout remains a bit of a black art to me, so

  • 0

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 300×200 to 600×400. 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 300×200 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0