Juiste uitbreiding van een HTML-widget

HTML- en CSS-lay-out blijft voor mij een beetje een zwarte kunst, dus ik zou elke hulp waarderen die ik probeer te bereiken.

Ik ben bezig met het maken van een JavaScript-API voor de "widget" van ons bedrijf, zodat mensen het op hun websites kunnen opnemen. Als de gebruiker op een knop in die widget drukt, wil ik de widget vergroten, bijvoorbeeld van 300x200 tot 600x400. Tot zover goed, een klein beetje JS en ik ben gelukkig. Maar er zijn twee beperkingen:

(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.

4

2 antwoord

Ik denk dat de eigenschap van de Z-Index van CSS is waarnaar je op zoek bent. Gewoon de hele div naar een hogere Z-index slepen, kan je probleem oplossen. Je kunt ook de ruimte achter de widget reserveren. Gebruik een lege div als deze:

<!-- 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;"> </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

3
toegevoegd
Ik denk dat de placeholder <div> met zijn eigenschap float-eigenschap, plus de 'position: absolute' in mijn doel <div> het meeste is waar ik naar zocht, op minst met betrekking tot # 1. Bedankt!
toegevoegd de auteur Ken Smith, de bron

2) Gebruik JavaScript - bereken de positie op het scherm en pas klassen toe op basis van die positie. Heb 4 verschillende CSS-klassen die elk de widget in verschillende richtingen uitvouwen en deze gewoon op uw widget toepassen.

1
toegevoegd
Goed idee om de vier verschillende CSS-klassen te hebben. Bedankt.
toegevoegd de auteur Ken Smith, de bron