Attributes are defined by HTML. Properties (on DOM elements) are defined by DOM (and also HTML 5 which blurs the boundary between markup and DOM). 

Some HTML attributes have 1:1 mapping onto properties. `id` is one example of such. 

Sometimes the names are different. The `class` attribute maps onto the `className` property, and the `value` attribute maps on to the `defaultValue` property (while the `value` property has no corresponding attribute).

When I originally wrote this answer, I thought there were attributes without a 1:1 mapping to a property. With this update, I can no longer think of any (and have made corrections for the above examples).

Yes, attr is meant for html attributes as they are strictly defined.  prop is for properties.  

So for instance, say you have a node elem with class &quot;something&quot; (raw element not jQuery object).  elem.className is the property, but &lt;div class=&quot;something&quot;&gt;&lt;/div&gt; is where the attribute resides.  Changing the class attribute also changes the property automatically and vise versa. 

Currently, attr is jumbled and confusing because it has tried to the job of both functions and there are many bugs because of that.  The introduction of jQuery.fn.prop will solve several blockers, separate code as it should have been separated from the beginning, and give developers faster functions to do what they expect them to do. 

Let me make up a percentage for a sec and say that from my experience in the support IRC and reading other&#39;s code, 95% of the use cases for attr will not have to switch to prop.

**[See More][1]**


  [1]: https://stackoverflow.com/questions/16051491/difference-between-prop-and-attr-in-jquery-and-when-to-use-attr-and-prop

In my Graphviz graph (written in DOT), I want each node to have a label, but in addition to that, I want some nodes to have a small caption denoting some other unique value for that node. For example, if this were for a history diagram, a node&#39;s label might be something like &quot;Birth of George Washington&quot; and the caption might read &quot;See also: American Revolution.&quot;

This is fairly flexible, so the caption doesn&#39;t necessarily need to be inside the node, but I do need some other way of putting text that clearly isn&#39;t part of the label (e.g. is a different size, possibly a different color) and is in a different location but is still clearly a part of the node.

Is there any way to do this?

Graphviz: Putting a Caption on a Node In Addition to a Label

I am transitioning from R to Python. I just began using Pandas. I have an R code that subsets nicely:

    k1 &lt;- subset(data, Product = p.id &amp; Month &lt; mn &amp; Year == yr, select = c(Time, Product))


Now, I want to do similar stuff in Python. this is what I have got so far:

    import pandas as pd
    data = pd.read_csv(&quot;../data/monthly_prod_sales.csv&quot;)


    #first, index the dataset by Product. And, get all that matches a given &#39;p.id&#39; and time.
     data.set_index(&#39;Product&#39;)
     k = data.ix[[p.id, &#39;Time&#39;]]
    
    # then, index this subset with Time and do more subsetting..

I am beginning to feel that I am doing this the wrong way. perhaps, there is an elegant solution. Can anyone help? I need to extract month and year from the timestamp I have and do subsetting. Perhaps there is a one-liner that will accomplish all this:

    k1 &lt;- subset(data, Product = p.id &amp; Time &gt;= start_time &amp; Time &lt; end_time, select = c(Time, Product))



thanks.

 

subsetting a Python DataFrame

Is `id` an attribute or property of HTML?

should I do `$(&#39;#selector&#39;).attr(&#39;id&#39;);` or `$(&#39;#selector&#39;).prop(&#39;id&#39;);`

I&#39;ve read many articles and am still confused.

Could someone please explain to me what the differences between attributes &amp; properties in HTML/JS are in very simple language?

HTML - attributes vs properties

Is <code>id</code> an attribute or property of HTML?
should I do <code>$('#selector').attr('id');</code> or <code>$('#selector').prop('id');</code>
I've read many articles and am still confused.
Could someone please explain to me what the differences between attributes &#x26; properties in HTML/JS are in very simple language?

I need to search inside a json list of countries. The json is like:

    [ 
    {&quot;name&quot;: &quot;Afghanistan&quot;, &quot;code&quot;: &quot;AF&quot;}, 
    {&quot;name&quot;: &quot;&#197;land Islands&quot;, &quot;code&quot;: &quot;AX&quot;}, 
    {&quot;name&quot;: &quot;Albania&quot;, &quot;code&quot;: &quot;AL&quot;}, 
    {&quot;name&quot;: &quot;Algeria&quot;, &quot;code&quot;: &quot;DZ&quot;}
    ]


I get from database only the code and would output the entire name. So if I get &quot;AL&quot; I would like to retrieve from json &quot;Albania&quot;

Javascript find json value

I&#39;m trying to resize some images with canvas but I&#39;m clueless on how to smoothen them.
On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don&#39;t know if these are built into canvas or not.

Here&#39;s my fiddle: http://jsfiddle.net/EWupT/

    var canvas = document.createElement(&#39;canvas&#39;);
    var ctx = canvas.getContext(&#39;2d&#39;);
    canvas.width=300
    canvas.height=234
    ctx.drawImage(img, 0, 0, 300, 234);
    document.body.appendChild(canvas);

The first one is a normal resized image tag, and the second one is canvas. Notice how the canvas one is not as smooth. How can I achieve &#39;smoothness&#39;?

Resize image with javascript canvas (smoothly)

I&#39;m having trouble dealing with facebook&#39;s ReactJS. Whenever I do ajax and want to display an html data, ReactJS displays it as text. (See figure below)


![ReactJS render string][1]

The data is displayed through the success callback function of the jquery Ajax.

    $.ajax({
       url: url here,
       dataType: &quot;json&quot;,
       success: function(data) {
          this.setState({
               action: data.action
          })
       }.bind(this)
    });

![enter image description here][2]

Is there any easy way to convert this into html? How should I do it using ReactJS?


  [1]: http://i.stack.imgur.com/GK2ve.png
  [2]: http://i.stack.imgur.com/52Tq1.png

ReactJS convert HTML string to JSX

I am working on &#39;how to access elements randomly from an array in javascript&#39;. I found many links regarding this. Like:
https://stackoverflow.com/questions/5915096/get-random-item-from-array-with-jquery

    var item = items[Math.floor(Math.random()*items.length)];

But in this, we can choose only one item from the array. If we want more than one elements then how can we achieve this? How can we get more than one element from an array?


How to get a number of random elements from an array?

When I compare undefined and null against Boolean false, the statement returns false:

    undefined == false;
    null == false;

It return false. Why?

Why does &quot;undefined equals false&quot; return false?

i&#39;m using the modal example from the bootstrap 3 docs. the modal works. however i need to access the show.bs.modal event when it fires. for now i&#39;m just trying: 

    $(&#39;#myModal&#39;).on(&#39;show.bs.modal&#39;, function () {
       alert(&#39;hi&#39;)
    })

Nothing happens, the event does not fire. What am I doing wrong??? This doesn&#39;t make sense to me. 

bootstrap jquery show.bs.modal event won&#39;t fire

I am using Twitter Bootstrap on a project.  As well as the default bootstrap styles I have also added some of my own

    //My styles
    @media (max-width: 767px)
    {
        //CSS here
    }

I am also using jQuery to change the order of certain elements on the page when the width of the viewport is less that 767px.  

    $(document).load($(window).bind(&quot;resize&quot;, checkPosition));

    function checkPosition()
    {
        if($(window).width() &lt; 767)
        {
            $(&quot;#body-container .main-content&quot;).remove().insertBefore($(&quot;#body-container .left-sidebar&quot;));
        } else {
            $(&quot;#body-container .main-content&quot;).remove().insertAfter($(&quot;#body-container .left-sidebar&quot;));
        }
    }

The problem I am having is that the width calculated by `$(window).width()` and the width calculated by the CSS doesn&#39;t seem to be the same.  When `$(window).width()` returns 767 the css calculates it the viewport width as 751 so there seems to be a 16px different. 

Does anyone know what is causing this and how I could solve the problem? People have suggested that the width of the scrollbar isn&#39;t being taken into considering and using `$(window).innerWidth() &lt; 751` is the way to go.  However ideally I want to find a solution that calculates the width of the scrollbar and that is consistent with my media query (e.g where both conditions are checking against the value 767).  Because surely not all browsers will have a scrollbar width of 16px?

$(window).width() not the same as media query

I need that the overlay shows above the first modal, not in the back.

[![Modal overlay behind][1]][1]

&lt;!-- begin snippet: js hide: true console: false babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(&#39;#openBtn&#39;).click(function(){
    	$(&#39;#myModal&#39;).modal({show:true})
    });

&lt;!-- language: lang-html --&gt;

    &lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;btn btn-primary&quot;&gt;Launch modal&lt;/a&gt;

    &lt;div class=&quot;modal&quot; id=&quot;myModal&quot;&gt;
    	&lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&#215;&lt;/button&gt;
              &lt;h4 class=&quot;modal-title&quot;&gt;Modal title&lt;/h4&gt;
            &lt;/div&gt;&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              Content for the dialog / modal goes here.
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal2&quot; class=&quot;btn btn-primary&quot;&gt;Launch modal&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;a href=&quot;#&quot; data-dismiss=&quot;modal&quot; class=&quot;btn&quot;&gt;Close&lt;/a&gt;
              &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal&quot; id=&quot;myModal2&quot; data-backdrop=&quot;static&quot;&gt;
    	&lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&#215;&lt;/button&gt;
              &lt;h4 class=&quot;modal-title&quot;&gt;Second Modal title&lt;/h4&gt;
            &lt;/div&gt;&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;modal-body&quot;&gt;
              Content for the dialog / modal goes here.
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
              &lt;a href=&quot;#&quot; data-dismiss=&quot;modal&quot; class=&quot;btn&quot;&gt;Close&lt;/a&gt;
              &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css&quot; /&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;


I tried to change the `z-index` of `.modal-backdrop`, but it becomes a mess.

In some cases I have more than two modals on the same page. 


  [1]: https://i.stack.imgur.com/LqXsY.png

Multiple modals overlay

Within a `&lt;ul&gt;` element, clearly the vertical spacing between lines can be formatted with the line-height attribute.

My question is, within a `&lt;ul&gt;` element, how do I set the vertical spacing between the list items?

How do I set vertical space between list items?

I am trying to insert a user icon inside username input field. 

I&#39;ve tried one of the solution from the [similar question](https://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css) 
knowing that `background-image` property won&#39;t work since [Font Awesome](http://fortawesome.github.io/Font-Awesome/) is a font.

The following is my approach and I can&#39;t get the icon display.

    .wrapper input[type=&quot;text&quot;] {
        position: relative;
    }
    
    .wrapper input[type=&quot;text&quot;]:before {
        font-family: &#39;FontAwesome&#39;;
        position: absolute;
        top: 0px;
        left: -5px;
        content: &quot;\f007&quot;;
    }


I have font face declared in the default font awesome css so I wasn&#39;t sure if adding font-family above was the right approach.

   

     @font-face {
         font-family: &#39;FontAwesome&#39;;
         src: url(&#39;../Font/fontawesome-webfont.eot?v=3.2.1&#39;);
         src: url(&#39;../Font/fontawesome-webfont.eot?#iefix&amp;v=3.2.1&#39;) format(&#39;embedded-opentype&#39;), url(&#39;../Font/fontawesome-webfont.woff?v=3.2.1&#39;) format(&#39;woff&#39;), url(&#39;../Font/fontawesome-webfont.ttf?v=3.2.1&#39;) format(&#39;truetype&#39;), url(&#39;../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1&#39;) format(&#39;svg&#39;);
     }

Font Awesome icon inside text input element

Is there a pure JavaScript function for inserting HTML before another element?
In jQuery it can be accomplished like this:

    $(&quot;#my_id&quot;).before(&#39;&lt;span class=&quot;asterisk&quot;&gt;*&lt;/span&gt;&#39;);

If there isn&#39;t any equivalent JavaScript function how can I achieve the described functionality?

Content Type	Original Author	Original Content on Stackoverflow
Question	JS-	View Question on Stackoverflow
Solution 1 - Javascript	Quentin	View Answer on Stackoverflow
Solution 2 - Javascript	Anand Jha	View Answer on Stackoverflow

HTML - attributes vs properties

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

subsetting a Python DataFrame

Graphviz: Putting a Caption on a Node In Addition to a Label

Attributions