Within my project, the initial page includes the following code snippet:
html
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
css
#box {
border-style: solid;
box-shadow: 2px 2px 2px black;
max-width: 66%;
max-height: 80%;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #FFFFFF;
font: 28px arial;
}
#text {
background-color: #E0E0E0;
text-decoration-color: #000000;
font: 24px sans-serif;
overflow: scroll;
}
I have made this element draggable and resizable using the corresponding jquery functions. While the Drag behavior works flawlessly, the Resize function does not.
The jQuery code to adjust this behavior is as follows:
$('document').ready(function(){
$('#box').draggable({
cointainment: "#container"
});
$('#box').resizable({
cointainment: "#container"
});
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
Is there any error in the above code that someone can spot?
ps.: Additionally, I have a question regarding the CSS display mentioned earlier. As you can see, I have defined both max-width and max-height; however, the max-height attribute does not seem to be functioning correctly. Can anyone identify what might be wrong with it?