I am writing a grid to show task durations.
I have a set of divs in a display:block and when document is ready I use javascript and jqueryui to: 1) add child divs to the block divs 2) make the child divs draggable and resizable This works fine. I would also like to preset the divs width (the task duration), but there is a strange behavior: the divs do not resize after the document is loaded. However as soon as I click on the div border to resize it, the width "pops" to the value I used in the script.
Here is the simplified HTML
<div id="gridcontainer">
<div id="railing_1" class="railing"></div>
<div id="railing_2" class="railing"></div>
</div>
And here is the JS on the head of the html doc:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
var displayRange = { "slots": "24", "unit":"h","start":"0" };
var taskList = {
"tasks": [
{ "id":"1" , "line":"1", "start":"0","duration":"72" },
{ "id":"2" , "line":"1", "start":"73","duration":"48" },
{ "id":"3" , "line":"2", "start":"0","duration":"120" }
]
};
</script>
<script type="text/javascript">
$().ready(function(){
var railingId;
var taskId;
var jTaskId;
var oNewP;
var oText;
var displayRange = { "slots": "24", "unit":"h","start":"0" };
var taskList = {
"tasks": [
{ "id":"1" , "line":"1", "start":"0","duration":"72" },
{ "id":"2" , "line":"1", "start":"73","duration":"48" },
{ "id":"3" , "line":"2", "start":"0","duration":"120" }
]
};
//get the task list and create/append the children to each line
for(var i = 0; i<taskList.tasks.length; i++){
//alert(taskList.tasks[i].duration);
railingId = "railing_" + taskList.tasks[i].line;
taskId = "task_" + taskList.tasks[i].id;
oNewP = document.createElement("div");
oText = document.createTextNode(taskList.tasks[i].id);
oNewP.setAttribute("id",taskId);
oNewP.setAttribute("class","taskbar");
oNewP.appendChild(oText);
document.getElementById(railingId).appendChild(oNewP);
jTaskId = "#" + taskId;
$(jTaskId)
.draggable({
grid: [ 24, 44 ],
containment: "#gridcontainer",
axis: "x, y"
})
.resizable({
grid: [ 24, 0 ],
handles: "e, w",
containment: "#gridcontainer"
});
}
});
/*
Here is where I try to preset one of the tasks as an example; I've also
tried using $('#task_2').width("100");
but didn't work
*/
$('#task_2').css("width","100px");
</script>
I've set a Jsfiddle with the problem:
http://jsfiddle.net/tPUpN/
You'll notice that if you try to resize number 2, it pops 100px, then it is able to resize according to the resizable grid (24px)
Of course, I would like task 2 to be preset as 100...
Any ideas?
Apologies for the messy code.
EDIT This doesn't seem to have anything to do with Jquery -- I've tried simply using Javascript width and setAttribute methods, without caring about JQ -- but the result is no resize. The interesing part about JQ is that when I click to resize, the div pops to the attempted size -- which seems to indicate the document is not "reloading" properly (??) and when I click the div, some magic happens.