bac3
asked on
How to assign element dynamically in a YUI functions (resizable panel)?
the below example only can show div with id "resizablepanel" when button is clicked. i have many div generated by program with different ID lliks div1, div2, div3. Anyways i can pass the div id to the function dynamically.
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(
function() {
// Create a panel Instance, from the 'resizablepanel' DIV standard module markup
var panel = new YAHOO.widget.Panel("resizablepanel", {
draggable: true,
width: "500px",
height: "150px",
autofillheight: "body", // default value, specified here to highlight its use in the example
constraintoviewport:true,
context: ["showbtn", "tl", "bl"]
});
panel.render();
// Create Resize instance, binding it to the 'resizablepanel' DIV
var resize = new YAHOO.util.Resize("resizablepanel", {
handles: ["br"],
autoRatio: false,
minWidth: 300,
minHeight: 100,
status: false
});
// Setup startResize handler, to constrain the resize width/height
// if the constraintoviewport configuration property is enabled.
resize.on("startResize", function(args) {
if (this.cfg.getProperty("constraintoviewport")) {
var D = YAHOO.util.Dom;
var clientRegion = D.getClientRegion();
var elRegion = D.getRegion(this.element);
resize.set("maxWidth", clientRegion.right - elRegion.left - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
resize.set("maxHeight", clientRegion.bottom - elRegion.top - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
} else {
resize.set("maxWidth", null);
resize.set("maxHeight", null);
}
}, panel, true);
// Setup resize handler to update the Panel's 'height' configuration property
// whenever the size of the 'resizablepanel' DIV changes.
// Setting the height configuration property will result in the
// body of the Panel being resized to fill the new height (based on the
// autofillheight property introduced in 2.6.0) and the iframe shim and
// shadow being resized also if required (for IE6 and IE7 quirks mode).
resize.on("resize", function(args) {
var panelHeight = args.height;
this.cfg.setProperty("height", panelHeight + "px");
}, panel, true);
YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true, "div1");
}
);
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.