JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.min.css">
    <div class="row">
    <h1>jQuery <em>attr()</em> method returns calculated width/height</h1>
        <blockquote class="span7">I was suspecting jQuery for having a bug with the <code>attr()</code> method, but I discovered that the bug related to an old jQuery version (1.3.2). <span class="img">this indicates an image</span>. However I discovered that the <code>img</code> tag in Firefox ignore the <code>width</code> and <code>height</code> attribute of an <code>img</code> tag.</blockquote>
    </div>
        <div class="row">
<img width="450" height="240" border="0" alt="Grand Cru Soft Fade &amp; skåle" src="http://www.rosendahl.dk/Files/Billeder/Auto/450x240/FS_GCS.jpg" id="test"/>
    <h2>The returned attr</h2>
<div class="input-prepend">
  <span class="add-on">width</span><input class="span2" id="attrWidth" size="16" type="text">
</div>
    </div>
<div class="input-prepend">
  <span class="add-on">height</span><input class="span2" id="attrHeight" size="16" type="text">
</div>
</div>

CSS

body {padding: 0px 40px;}
img, .img {outline: dotted yellow 1px;}
blockquote {line-height: 2em;}

JavaScript

var img = jQuery('#test');
jQuery('#attrWidth').val(img.attr('width'));
jQuery('#attrHeight').val(img.attr('height'));