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")

http://api.jquery.com/data

the same mistake made several times throughout code, such .data("pos-width")


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -