jquery - why is this if/else statement causing a div to not show up? -
i have if/else statement checks see if image displayed in dom smaller 600px wide, , if was, resizes said image different width. however, div class .tagmap not appear. happens when if/else statement present. idea why why happening? i've generated this jsfiddle. first image in step 2 , image in step 4 both supposed have .tagmap appended
jquery if/else statement
$('span.i_contact').each(function() { var imgwidth = $(this).data('img-width'); if (imgwidth < 600) { var newwidth = ((imgwidth / 600)*300); console.log(newwidth); $(this).css({ "width":newwidth }); } else{ var pos_width = ($(this).data('pos-width')) / 2.025; var pos_height = ($(this).data('pos-height')) / 2.025; var xpos = ($(this).data('pos-x')) / 2.025; var ypos = ($(this).data('pos-y')) / 2.025; var taggednode = $('<div class="tagged" />') taggednode.css({ "border":"5px solid orange", "width":pos_width, "height":pos_height, "left":xpos, "top":ypos }); } var n = $(this).data('index'); $('.i_tagmap' + n).append(taggednode); }); $("span.o_contact").each(function() { var imgwidth = $(this).data('img-width'); if (imgwidth < 600) { var newwidth = ((imgwidth / 600)*300); console.log(newwidth); $(this).css({ "width":newwidth }); } else { var pos_width = ($(this).data('pos-width')) / 2.025; var pos_height = ($(this).data('pos-height')) / 2.025; var xpos = ($(this).data('pos-x')) / 2.025; var ypos = ($(this).data('pos-y')) / 2.025; var taggednode = $('<div class="tagged" />') taggednode.css({ "border":"5px solid green", "width":pos_width, "height":pos_height, "left":xpos, "top":ypos }); } var n = $(this).data('index'); $('.o_tagmap' + n).append(taggednode); });
erb (how images generated)
<div class="stepcontainer"> <div class="steptext"> <%= step.instruction %> </div> <div class="modalbutton"> <%= render(step.flags.new) %> </div> <% if step.input_contact.present? %> <span class="i_contact i_contact<%= n %>" data-pos-x="<%= step.i_connection.pos_x %>" data-pos-y="<%= step.i_connection.pos_y %>" data-pos-width="<%= step.i_connection.pos_width %>" data-pos-height="<%= step.i_connection.pos_height %>" ="spanid<%= n %>" data-img-width="<%= step.i_connection.image.dimensions.first %>" data-index="<%= n %>"></span> <div class="productimg"> <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> <%= link_to image_tag(step.i_connection.image.image.url(:medium), class: "iconnection" ), "#{step.i_connection.image.image.url(:large)}", class: "fancybox" %> <div class="i_tagmap<%= n %>"></div> </div> </div> <% if step.i_connection.cord? && !step.o_connection.dongle? %> <div class="cableimg"> <%= image_tag(step.i_connection.cord_type.image.url(:thumb), :class => "orange") %> </div> <% end %> <% end %> <!-- end of step.input_contact.present --> <% if step.o_connection.cord? && !step.o_connection.dongle? %> <div class="cableimg"> <%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %> </div> <% end %> <span class="o_contact o_contact<%= n %>" data-pos-x="<%= step.o_connection.pos_x %>" data-pos-y="<%= step.o_connection.pos_y %>" data-pos-width="<%= step.o_connection.pos_width %>" data-pos-height="<%= step.o_connection.pos_height %>" id="spanid<%= n %>" data-img-width="<%= step.o_connection.image.dimensions.first %>" data-index="<%= n %>"> </span> <div class="productimg"> <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;"> <%= link_to image_tag(step.o_connection.image.image.url(:medium), class: "oconnection"), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %> <div class="o_tagmap<%= n %>"></div> </div> </div>
.data("img-width")
wrong, should .data("imgwidth")
the same mistake made several times throughout code, such .data("pos-width")
Comments
Post a Comment