How to position a DIV on DOM ready after it has been created

Question

Hi,

I am trying to create a page where I can attach sticky notes at runtime exactly as explained in this tutorial.

I have converted the sample in ASP.NET MVC 2 (which is the technology I am using) and everything works fine.

So I have a DIV in my view

<!-- Contains all the notes and limits their movement -->
<div id="notesDesktop" style="margin: 0 auto; position:relative;">
</div>

and, on DOM ready, I am setting his size to make it occupying all the space available respect to its container with this code

$("#notesDesktop").width($("#sectionContent").width());
$("#notesDesktop").height($("#sectionContent").height() - $("#actionArea").height());

The only problem I am facing is that when I load the notes from database and create the related DIVs inside the "notesDesktop" they're not positioning correctly. The code is this one

<div id="notesDesktop" style="margin: 0 auto; position:relative;">
   <% List<ContactNoteModel> list = (List<ContactNoteModel>)ViewData["noteList"];
        foreach (ContactNoteModel cnm in list) { 
            string[] pos = cnm.Position.Split(new string[] {"x"}, StringSplitOptions.RemoveEmptyEntries);
    %>
    <div class="note <%=cnm.Color%>" style="left:<%=pos[0]%>;top:<%=pos[1]%>;z-index:<%=pos[2]%>;">
       <div class="body"><%=cnm.NoteText%></div>
       <div class="author"><%=HttpContext.Current.User.Identity.Name %></div>
       <span class="data"><%=cnm.ContactNoteID%></span>
    </div>
   <%  } %>
</div>

that produces something like this

<div class="note yellow ui-draggable" style="left:43;top:269;z-index:4;">
   <div class="body">This is a note!</div>
   <div class="author">admin</div>
    <span class="data">2</span>
</div>

As you can see the created DIV have absolute positioning values and its CSS class states that it should be positioned absolutely within its container. Anyway, despite this fact he's positioning to top=0 and left=0 :(

I suspect that this happens because when the notes DIV are created dinamically the container DIV still has'nt fixed height and width (which will be set on DOM ready of course) and so the elements can not be absolute positioned inside it.

Of course I could change my view to create dinamically the notes div on DOM ready but before going to change all the code I was wondering if i can have some code to make them respect the positions they have meant to be to.

My english is not perfect so I hope to stated clearly my problem. Any suggestion on this?

thanks in advance for helping

Answer 1

I think you need to add the 'px' at the end of your pixel values. You need to pass in the unit of the value you want to assign to a css property.