Hello, I tried to get this to work right... Have the first
three(stactic)div's working right. You can drag, resize and close...
but the fourth one is not working... can anyone spot why... ?? The
end goal is to have all this be created on the fly; the boxes and the
ajax content inside the boxes... thank you for the help... Have a
great one
jeremyBass
$(function(){
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("body").append('<div class="resizable" style="background-
color:#FFFFFF;"><div class="drag-handle"><span style="float:left; line-
height:25px;">WindX</span><img src="../../close.png" class="close"
style="float:right;" alt="Close" width="24" height="24"/></div><div
class="boxCONTENTS" id="test"></div><br/>'),
$("#test").append(html);
}
});
});
$(function(){
var globalIndex = 1;
$(".resizable").resizable({start: function() { $(this).css("z-index", +
+globalIndex); }, handles: "all", autoHide: true, transparent: true,
helper: "proxy" , ghost: true }).click(function() { $(this).css("z-
index", ++globalIndex); }).draggable({start: function() { $
(this).css("z-index", ++globalIndex); }, handle: ".drag-
handle" }).hover( function () { $(this).addClass('scalefx');},
function () { $(this).removeClass('scalefx');} );
$(".close").click(function() { $(".scalefx").toggle("scale", {},
200); }).hover( function () { $(this).css("cursor", "pointer");},
function () { $(this).css("cursor", "default"); });
$AJAXCONTENT='<h1>Test</h1><h1>Test</h1><h1>Test</h1><h1>Test</
h1><h1>Test</h1>';
$("#replaceME").append('<div style="width:100%; height:100%;">'+
$AJAXCONTENT+'</div>');
});
and a link for the test page...
http://www.sjrmc.org/Scripts/jquery.ui-1.6b/demos/functional/Untitled-1.html
