jquery - why aren't these divs in the same position? -
so i've created image tagger saves coordinates database, has been implemented on page designated tagging images. call these images erb block on main page iterate through respected coordinates , use jquery display div (.tagged) @ said location. when tags displayed on main page, not in location in when tagged them on connections page. coordinates same, positions not. have ideas why is? appreciated.
jsfiddle of tagger (includes css)
erb block iterates through images. in particular case there 4 images.
<% if @new_manual.present? %> <% n = 0 %> <% @new_manual.steps.each |step| %> <% n += 1 %> <% i_connection = contact.find(step.input_contact) %> <span class="i_contact i_contact<%= n %>" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>" data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span> <% o_connection = contact.find(step.output_contact) %> <span class="o_contact o_contact<%= n %>" data-pos-x="<%= o_connection.pos_x %>" data-pos-y="<%= o_connection.pos_y %>" data-pos-width="<%= o_connection.pos_width %>" data-pos-height="<%= o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span> <% cord = cordtype.find(step.contact_item) %> <div class="main_panel"> <div style='margin: auto; width: 600px;'> <div id="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> <%= image_tag(i_connection.image.image.url(:large)) %> <div class="i_tagmap<%= n %>"></div> </div> </div> </div> <div class="main_panel"> <div style='margin: auto; width: 600px;'> <div id="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> <%= image_tag(o_connection.image.image.url(:large)) %> <div class="o_tagmap<%= n %>"></div> </div> </div> </div> <% end %> <% end %> jquery (how tags displayed on main page)
<script type="text/javascript"> $(document).ready(function(){ $('span.i_contact').each(function() { var pos_width = $(this).data('pos-width'); var pos_height = $(this).data('pos-height'); var xpos = $(this).data('pos-x'); var ypos = $(this).data('pos-y'); var taggednode = $('<div class="tagged" />') taggednode.css({ "border":"5px solid red", "width":pos_width, "height":pos_height, "left":xpos, "top":ypos }); var n = $(this).data('index') $('.i_tagmap' + n).append(taggednode) console.log(taggednode.position()) }); $("span.o_contact").each(function() { var pos_width = $(this).data('pos-width'); var pos_height = $(this).data('pos-height'); var xpos = $(this).data('pos-x'); var ypos = $(this).data('pos-y'); var taggednode = $('<div class="tagged" />') taggednode.css({ "border":"5px solid red", "width":pos_width, "height":pos_height, "left":xpos, "top":ypos }); var n = $(this).data('index') $('.o_tagmap' + n).append(taggednode) }); }); </script> this kind've difficult thing me explain, if there leaving out beneficial, happy add in well.
Comments
Post a Comment