Use [Attribute Equals Selector](https://api.jquery.com/attribute-equals-selector/)

    $(&#39;.slide-link[data-slide=&quot;0&quot;]&#39;).addClass(&#39;active&#39;);

&lt;kbd&gt;[**Fiddle Demo**](http://jsfiddle.net/cse_tushar/NT7jf/)&lt;/kbd&gt;

[.find()](http://api.jquery.com/find/)

it works down the tree

&gt;Get the descendants of each element
 in the current set of matched elements, filtered by a selector, jQuery object, or element.

You can also use [.filter()][1]

    $(&#39;.slide-link&#39;).filter(&#39;[data-slide=&quot;0&quot;]&#39;).addClass(&#39;active&#39;);


  [1]: http://api.jquery.com/filter/

I searched for a the same solution with a variable instead of the String.&lt;br&gt;I hope i can help someone with my solution :)
    
    var numb = &quot;3&quot;;
    $(`#myid[data-tab-id=${numb}]`);

you can also use `andSelf()` method to get wrapper DOM contain then `find()` can be work around as your idea

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(function() {
      $(&#39;.slide-link&#39;).andSelf().find(&#39;[data-slide=&quot;0&quot;]&#39;).addClass(&#39;active&#39;);
    })

&lt;!-- language: lang-css --&gt;

    .active {
      background: green;
    }

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;0&quot;&gt;1&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;2&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;3&lt;/a&gt;

&lt;!-- end snippet --&gt;



I&#39;m not very familiar with javascript, and stunning, because i can&#39;t add new property, to object, that fetched from database using ORM names Sequelize.js.

To avoid this, i use this hack:

    db.Sensors.findAll({
        where: {
            nodeid: node.nodeid
        }
    }).success(function (sensors) {
            var nodedata = JSON.parse(JSON.stringify(node)); // this is my trick
            nodedata.sensors = sensors;
            nodesensors.push(nodedata);
            response.json(nodesensors);
    });

So, what normally way to add new properties to object.

If it can help, i use sequelize-postgres version 2.0.x.

**upd. console.log(node):**

    { dataValues: 
       { nodeid: &#39;NodeId&#39;,
         name: &#39;NameHere&#39;,
         altname: &#39;Test9&#39;,
         longname: &#39;&#39;,
         latitude: 30,
         longitude: -10,
         networkid: &#39;NetworkId&#39;,
         farmid: &#39;5&#39;,
         lastheard: Mon Dec 09 2013 04:04:40 GMT+0300 (FET),
         id: 9,
         createdAt: Tue Dec 03 2013 01:29:09 GMT+0300 (FET),
         updatedAt: Sun Feb 23 2014 01:07:14 GMT+0300 (FET) },
      __options: 
       { timestamps: true,
         createdAt: &#39;createdAt&#39;,
         updatedAt: &#39;updatedAt&#39;,
         deletedAt: &#39;deletedAt&#39;,
         touchedAt: &#39;touchedAt&#39;,
         instanceMethods: {},
         classMethods: {},
         validate: {},
         freezeTableName: false,
         underscored: false,
         syncOnAssociation: true,
         paranoid: false,
         whereCollection: { farmid: 5, networkid: &#39;NetworkId&#39; },
         schema: null,
         schemaDelimiter: &#39;&#39;,
         language: &#39;en&#39;,
         defaultScope: null,
         scopes: null,
         hooks: { beforeCreate: [], afterCreate: [] },
         omitNull: false,
         hasPrimaryKeys: false },
      hasPrimaryKeys: false,
      selectedValues: 
       { nodeid: &#39;NodeId&#39;,
         name: &#39;NameHere&#39;,
         longname: &#39;&#39;,
         latitude: 30,
         longitude: -110,
         networkid: &#39;NetworkId&#39;,
         farmid: &#39;5&#39;,
         lastheard: Mon Dec 09 2013 04:04:40 GMT+0300 (FET),
         id: 9,
         createdAt: Tue Dec 03 2013 01:29:09 GMT+0300 (FET),
         updatedAt: Sun Feb 23 2014 01:07:14 GMT+0300 (FET),
         altname: &#39;Test9&#39; },
      __eagerlyLoadedAssociations: [],
      isDirty: false,
      isNewRecord: false,
      daoFactoryName: &#39;Nodes&#39;,
      daoFactory: 
       { options: 
          { timestamps: true,
            createdAt: &#39;createdAt&#39;,
            updatedAt: &#39;updatedAt&#39;,
            deletedAt: &#39;deletedAt&#39;,
            touchedAt: &#39;touchedAt&#39;,
            instanceMethods: {},
            classMethods: {},
            validate: {},
            freezeTableName: false,
            underscored: false,
            syncOnAssociation: true,
            paranoid: false,
            whereCollection: [Object],
            schema: null,
            schemaDelimiter: &#39;&#39;,
            language: &#39;en&#39;,
            defaultScope: null,
            scopes: null,
            hooks: [Object],
            omitNull: false,
            hasPrimaryKeys: false },
         name: &#39;Nodes&#39;,
         tableName: &#39;Nodes&#39;,
         rawAttributes: 
          { nodeid: [Object],
            name: [Object],
            altname: [Object],
            longname: [Object],
            latitude: [Object],
            longitude: [Object],
            networkid: [Object],
            farmid: [Object],
            lastheard: [Object],
            id: [Object],
            createdAt: [Object],
            updatedAt: [Object] },
         daoFactoryManager: { daos: [Object], sequelize: [Object] },
         associations: {},
         scopeObj: {},
         primaryKeys: {},
         primaryKeyCount: 0,
         hasPrimaryKeys: false,
         autoIncrementField: &#39;id&#39;,
         DAO: { [Function] super_: [Function] } } }

I think next, what you think will be: &quot;Ok, that is easy, just add your property to dataValues.&quot;

    node.selectedValues.sensors = sensors;
    node.dataValues.sensors = sensors;

I add this lines, and this don&#39;t work

Sequelize, convert entity to plain object

    MacBook-Pro:~ skbc$ pod setup --verbose
    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/universal-darwin13/rbconfig.rb:212: warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777
    
    Setting up CocoaPods master repo
    
    Cloning spec repo `master` from `https://github.com/CocoaPods/Specs.git` (branch `master`)
      $ /usr/bin/git clone &#39;https://github.com/CocoaPods/Specs.git&#39; master
      Cloning into &#39;master&#39;...

Have gone through resources provided by Cocoapods website, SO and few video tutorials. Nothing happening even after waiting for a couple of hours, however still trying to figure out what may be the problem is? 

I would very much appreciate your comments and suggestions.



Cocoapods setup stuck on pod setup command on terminal

I have a few elements like below:

    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;0&quot;&gt;1&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;2&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;3&lt;/a&gt;

How can I add a class to the element which has a `data-slide` attribute value of `0` (zero)?

I have tried many different solutions but nothing worked. An example:

    $(&#39;.slide-link&#39;).find(&#39;[data-slide=&quot;0&quot;]&#39;).addClass(&#39;active&#39;);

Any idea?

jQuery find element by data attribute value

I have a few elements like below:
<pre><code class="hljs language-ini">&#x3C;a class="slide-link" href="#" data-slide="0">1&#x3C;/a>
&#x3C;a class="slide-link" href="#" data-slide="1">2&#x3C;/a>
&#x3C;a class="slide-link" href="#" data-slide="2">3&#x3C;/a>
</code></pre>
How can I add a class to the element which has a <code>data-slide</code> attribute value of <code>0</code> (zero)?
I have tried many different solutions but nothing worked. An example:
<pre><code class="hljs language-javascript">$('.slide-link').find('[data-slide="0"]').addClass('active');
</code></pre>
Any idea?

I am working on an internal web application at work. In IE10 the requests work fine, but in Chrome all the AJAX requests (which there are many) are sent using OPTIONS instead of whatever defined method I give it. Technically my requests are &quot;cross domain.&quot; The site is served on localhost:6120 and the service I&#39;m making AJAX requests to is on 57124. [This closed jquery bug][1] defines the issue, but not a real fix.

What can I do to use the proper http method in ajax requests?

Edit:

This is in the document load of every page:

    jQuery.support.cors = true;

And every AJAX is built similarly:

    var url = &#39;http://localhost:57124/My/Rest/Call&#39;;
    $.ajax({
        url: url,
        dataType: &quot;json&quot;,
        data: json,
        async: true,
        cache: false,
        timeout: 30000,
        headers: { &quot;x-li-format&quot;: &quot;json&quot;, &quot;X-UserName&quot;: userName },
        success: function (data) {
            // my success stuff
        },
        error: function (request, status, error) {
            // my error stuff
        },
        type: &quot;POST&quot;
    });

  [1]: http://bugs.jquery.com/ticket/4690

AJAX in Chrome sending OPTIONS instead of GET/POST/PUT/DELETE?

I am trying to insert some content into a &#39;blank&#39; iFrame, however nothing is being inserted.

HTML:

    &lt;iframe id=&quot;iframe&quot;&gt;&lt;/iframe&gt;

JS:

	$(&quot;#iframe&quot;).ready(function() {
		var $doc = $(&quot;#iframe&quot;).contentWindow.document;
		var $body = $(&quot;&lt;body&gt;&quot;).text(&quot;Test&quot;);
		$body.insertAfter($doc);
	});

I am calling the `ready` function so I don&#39;t understand why it is not inserting.

Insert content into iFrame

I try to clone an array of objects with nested objects.

Something like:

    var data = [
        { id: 1, values: { a: &#39;a&#39;, b: &#39;b&#39; } },
        { id: 2, values: { c: &#39;c&#39;, d: &#39;d&#39; } }
    ];

#_.Clone

With the [`_.clone`][1] method and the `isDeep` parameter at `true`:

    var clone = _.clone(data, true);
    
    data[1].values.d = &#39;x&#39;;
    
    console.log( _.isEqual(data, clone) ); // true, clone[1].values.d == &#39;x&#39;

I expected `clone[1].values.d == &#39;d&#39;` :

&gt; If isDeep is true nested objects will also be cloned, otherwise they
&gt; will be assigned by reference.

What is wrong?

#_.CloneDeep

In addition, when I try with the [`_.cloneDeep`][2] method, I get an error:

    var clone = _.cloneDeep(data);
    
    // Uncaught TypeError: Object function u(n){return n instanceof u?n:new o(n)}
    // has no method &#39;cloneDeep&#39;

Why this error?

#$.extend

With [`$.extend`][3] the clone has no reference to the original object as expected:

    var clone = $.extend(true, {}, data);

    console.log( _.isEqual(data, clone) ); // false, clone[1].values.d == &#39;d&#39; 


  [1]: http://lodash.com/docs#clone
  [2]: http://lodash.com/docs#cloneDeep
  [3]: http://api.jquery.com/jquery.extend/

Lodash .clone and .cloneDeep behaviors

Can you please let me know how I can set the active tab in jquery ui with a button click out of the tabs?

I have a button like: 

    &lt;input id=&quot;action&quot; type=&quot;submit&quot; value=&quot;Go to Action&quot;&gt;

and here is the code,

    &lt;script&gt;
    $(function() {
     $( &quot;#tabs&quot; ).tabs();
     $( &quot;#action&quot; ).on(&quot;click&quot;, function(){});
    });
  &lt;/script&gt;

    &lt;div id=&quot;tabs&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Description&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#tabs-3&quot;&gt;Resources&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#tabs-4&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    
    &lt;div id=&quot;tabs-1&quot;&gt;
        &lt;p&gt;Description content&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div id=&quot;tabs-2&quot;&gt;
        &lt;p&gt;Action content&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div id=&quot;tabs-3&quot;&gt;
        &lt;p&gt;Resources content&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div id=&quot;tabs-4&quot;&gt;
        &lt;p&gt;Settings &lt;/p&gt;
    &lt;/div&gt;
    
    &lt;/div&gt;

How to Set Active Tab in jQuery Ui

I am using Bootstrap 3.1.1 for my project. Each cell in my table contains data like `000` or `111`. On hover, I want to display this data as a tooltip. So far, this works. However, when I hover over a `&lt;td&gt;`, all adjacent cells shift to the right.

&lt;a href=&quot;http://jsfiddle.net/uEqF2/&quot;&gt;Here&#39;s my JSFiddle&lt;/a&gt;

    &lt;table class=&quot;table&quot;&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th class=&quot;matrisHeader&quot;&gt;
                    &amp;nbsp;
                &lt;/th&gt;
                &lt;th data-original-title=&quot;111&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    P&#199;1
                &lt;/th&gt;
                &lt;th data-original-title=&quot;222&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    P&#199;2
                &lt;/th&gt;
                &lt;th data-original-title=&quot;333&quot; data-toggle=&quot;tooltip&quot;
                    data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    P&#199;3
                &lt;/th&gt;
                &lt;th data-original-title=&quot;444&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot;title=&quot;&quot;&gt;
                    P&#199;4
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;th data-original-title=&quot;555&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot;
                     title=&quot;&quot;&gt;
                    &#214;&#199;1
                &lt;/th&gt;
                &lt;td data-original-title=&quot;666&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;777&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;888&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;999&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th data-original-title=&quot;000&quot; data-toggle=&quot;tooltip&quot;
                    data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &#214;&#199;2
                &lt;/th&gt;
                &lt;td data-original-title=&quot;aaa&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;bbb&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;ccc&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;ddd&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th data-original-title=&quot;eee&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot;
                    title=&quot;&quot;&gt;
                    &#214;&#199;3
                &lt;/th&gt;
                &lt;td data-original-title=&quot;fff&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;ggg&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;hhh&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
                &lt;td data-original-title=&quot;iii&quot;
                    data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot;&gt;
                    &amp;nbsp;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

Bootstrap&#39;s tooltip moves table cells to right a bit on hover

How can I create a Text field that has a transparent or no background, no top,left and right border? 

I am only using CSS and HTML.

Textfield with only bottom border

I&#39;m trying to style a file upload button to my personal preferences, but I couldn&#39;t find any really solid ways to do this without JS. I did find [two](https://stackoverflow.com/q/3226167/1256925) [other](https://stackoverflow.com/q/3606876/1256925) questions about this subject, but the answers there either involved JavaScript, or suggested [Quirksmode&#39;s approach](http://www.quirksmode.org/dom/inputfile.html).

My major issue with this Quirksmode&#39;s approach is that the file button will still have the browser-defined dimensions, so it won&#39;t automatically adjust to whatever&#39;s used as button that&#39;s placed below it. I&#39;ve made some code, based on it, but it will just take up the space the file button would normally take up, so it won&#39;t at all fill the parent div like I want it to.

**HTML:**

    &lt;div class=&quot;myLabel&quot;&gt;
        &lt;input type=&quot;file&quot;/&gt;
        &lt;span&gt;My Label&lt;/span&gt;
    &lt;/div&gt;

**CSS:**

    .myLabel {
        position: relative;
    }
    .myLabel input {
        position: absolute;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 100%;
    }

[**This fiddle**](http://jsfiddle.net/KY42f/1/) demonstrates how this approach is quite flawed. In Chrome, clicking the `!!` below the second demo button will open the file dialog anyway, but also in all other browsers, the file button doesn&#39;t take up the correct areas of the button.

Is there any more solid way to style the file upload button, without any JavaScript, and preferably using as little &#39;hacky&#39; coding as possible (since hacking usually brings other problems along with it, such as the ones in the fiddle)?

Cross-browser custom styling for file upload button

I want my nginx make display all url&#39;s clean. 

  - http://www.mydomain.com/indexhtml.html as http://www.mydomain.com/indexhtml 
  - http://www.mydomain.com/indexphp.php as http://www.mydomain.com/indexphp

With some research I&#39;ve made the first case to work. It`s done by following configuration:

    location / {
        root   html;
        index  index.html index.htm index.php;
        try_files $uri.html $uri/ =404;	
    }

It works for indexhtml.html displaying as indexhtml, but nothing happens with .php. If I change $uri.html to $uri.php, it works neither for .html, neither .php. I`ve tried to put something similar in php location but without any success.

Any advices?

How to remove both .php and .html extensions from url using NGINX?

I&#39;m really stuck trying to understand the best way to stream real time output of ffmpeg to a HTML5 client using node.js, as there are a number of variables at play and I don&#39;t have a lot of experience in this space, having spent many hours trying different combinations.

My use case is:

1) IP video camera RTSP H.264 stream is picked up by FFMPEG and remuxed into a mp4 container using the following FFMPEG settings in node, output to STDOUT. This is only run on the initial client connection, so that partial content requests don&#39;t try to spawn FFMPEG again.

    liveFFMPEG = child_process.spawn(&quot;ffmpeg&quot;, [
                    &quot;-i&quot;, &quot;rtsp://admin:12345@192.168.1.234:554&quot; , &quot;-vcodec&quot;, &quot;copy&quot;, &quot;-f&quot;,
                    &quot;mp4&quot;, &quot;-reset_timestamps&quot;, &quot;1&quot;, &quot;-movflags&quot;, &quot;frag_keyframe+empty_moov&quot;, 
                    &quot;-&quot;   // output to stdout
                    ],  {detached: false});

2) I use the node http server to capture the STDOUT and stream that back to the client upon a client request. When the client first connects I spawn the above FFMPEG command line then pipe the STDOUT stream to the HTTP response.

    liveFFMPEG.stdout.pipe(resp);

I have also used the stream event to write the FFMPEG data to the HTTP response but makes no difference

    xliveFFMPEG.stdout.on(&quot;data&quot;,function(data) {
            resp.write(data);
    }

I use the following HTTP header (which is also used and working when streaming pre-recorded files)

    var total = 999999999         // fake a large file
    var partialstart = 0
    var partialend = total - 1

    if (range !== undefined) {
        var parts = range.replace(/bytes=/, &quot;&quot;).split(&quot;-&quot;); 
        var partialstart = parts[0]; 
        var partialend = parts[1];
    } 

    var start = parseInt(partialstart, 10); 
    var end = partialend ? parseInt(partialend, 10) : total;   // fake a large file if no range reques 

    var chunksize = (end-start)+1; 

    resp.writeHead(206, {
                      &#39;Transfer-Encoding&#39;: &#39;chunked&#39;
                     , &#39;Content-Type&#39;: &#39;video/mp4&#39;
                     , &#39;Content-Length&#39;: chunksize // large size to fake a file
                     , &#39;Accept-Ranges&#39;: &#39;bytes &#39; + start + &quot;-&quot; + end + &quot;/&quot; + total
    });


3) The client has to use HTML5 video tags.

I have no problems with streaming playback (using fs.createReadStream with 206 HTTP partial content) to the HTML5 client a video file previously recorded with the above FFMPEG command line (but saved to a file instead of STDOUT), so I know the FFMPEG stream is correct, and I can even correctly see the video live streaming in VLC when connecting to the HTTP node server.

However trying to stream live from FFMPEG via node HTTP seems to be a lot harder as the client will display one frame then stop. I suspect the problem is that I am not setting up the HTTP connection to be compatible with the HTML5 video client. I have tried a variety of things like using HTTP 206 (partial content) and 200 responses, putting the data into a buffer then streaming with no luck, so I need to go back to first principles to ensure I&#39;m setting this up the right way.

Here is my understanding of how this should work, please correct me if I&#39;m wrong:

1) FFMPEG should be setup to fragment the output and use an empty moov (FFMPEG frag_keyframe and empty_moov mov flags). This means the client does not use the moov atom which is typically at the end of the file which isn&#39;t relevant when streaming (no end of file), but means no seeking possible which is fine for my use case.

2) Even though I use MP4 fragments and empty MOOV, I still have to use HTTP partial content, as the HTML5 player will wait until the entire stream is downloaded before playing, which with a live stream never ends so is unworkable.

3) I don&#39;t understand why piping the STDOUT stream to the HTTP response doesn&#39;t work when streaming live yet if I save to a file I can stream this file easily to HTML5 clients using similar code. Maybe it&#39;s a timing issue as it takes a second for the FFMPEG spawn to start, connect to the IP camera and send chunks to node, and the node data events are irregular as well. However the bytestream should be exactly the same as saving to a file, and HTTP should be able to cater for delays.

4) When checking the network log from the HTTP client when streaming a MP4 file created by FFMPEG from the camera, I see there are 3 client requests: A general GET request for the video, which the HTTP server returns about 40Kb, then a partial content request with a byte range for the last 10K of the file, then a final request for the bits in the middle not loaded. Maybe the HTML5 client once it receives the first response is asking for the last part of the file to load the MP4 MOOV atom? If this is the case it won&#39;t work for streaming as there is no MOOV file and no end of the file.

5) When checking the network log when trying to stream live, I get an aborted initial request with only about 200 bytes received, then a re-request again aborted with 200 bytes and a third request which is only 2K long. I don&#39;t understand why the HTML5 client would abort the request as the bytestream is exactly the same as I can successfully use when streaming from a recorded file. It also seems node isn&#39;t sending the rest of the FFMPEG stream to the client, yet I can see the FFMPEG data in the .on event routine so it is getting to the FFMPEG node HTTP server.

6) Although I think piping the STDOUT stream to the HTTP response buffer should work, do I have to build an intermediate buffer and stream that will allow the HTTP partial content client requests to properly work like it does when it (successfully) reads a file? I think this is the main reason for my problems however I&#39;m not exactly sure in Node how to best set that up. And I don&#39;t know how to handle a client request for the data at the end of the file as there is no end of file.

7) Am I on the wrong track with trying to handle 206 partial content requests, and should this work with normal 200 HTTP responses? HTTP 200 responses works fine for VLC so I suspect the HTML5 video client will only work with partial content requests?

As I&#39;m still learning this stuff its difficult to work through the various layers of this problem (FFMPEG, node, streaming, HTTP, HTML5 video) so any pointers will be greatly appreciated. I have spent hours researching on this site and the net, and I have not come across anyone who has been able to do real time streaming in node but I can&#39;t be the first, and I think this should be able to work (somehow!).

Best approach to real time http streaming to HTML5 video client

Is is possible to use `:not()` with  `nth-child` ? 

I tried something like this without any luck :


    td:not(:nth-child(4n)){
      text-align:center;
    }

However this seems to work :

    td:not(:first-child){
      text-align:center;
    }


What I am trying is to center align all table columns except 2nd and 4th column. The columns are dynamically generated to add a custom class to these column .

CSS how to use pseudo-class :not with :nth-child

I have a div set with a background image:

    &lt;div&gt;Play Video&lt;/div&gt;

with the following CSS:

    div {
	background-image: url(&#39;icon.png&#39;);
	background-image: url(&#39;icon.svg&#39;), none;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 90% 50%;
	padding: 20px;
	width: 150px;
    }


The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.

Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?

Background-size with SVG squished in IE9-10

Using Bootstrap, I have a grid column class=&quot;col-lg-3&quot; that I want to place it in position:fixed while the other .col-lg-9 is normal position (scroll-able through the page).

    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-3&quot;&gt;
            Fixed content
        &lt;/div&gt;
        &lt;div class=&quot;col-lg-9&quot;&gt;
            Normal scrollable content
        &lt;/div&gt;
    
    &lt;/div&gt;

Just the same way like the left column in [LifeHacker.com](http://lifehacker.com)
You will see that the left part is fixed however I scroll though the page.

I use bootstrap v3.1.1

Make column fixed position in bootstrap

In my html I have a `span` element:

    &lt;span class=&quot;field&quot; data-fullText=&quot;This is a span element&quot;&gt;This is a&lt;/span&gt;

And I want to get the `data-fullText` attribute. I tried these two ways, but they didn&#39;t work (the both return `undefined`):

    $(&#39;.field&#39;).hover(function () {
        console.log(&#39;using prop(): &#39; + $(this).prop(&#39;data-fullText&#39;));
        console.log(&#39;using data(): &#39; + $(this).data(&#39;fullText&#39;));
    });

Then I searched and found these questions: https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute-using-jquery and https://stackoverflow.com/questions/17351282/jquery-cant-get-data-attribute-value.  
The both&#39;s answers are `&quot;Use .attr(&#39;data-sth&#39;) or .data(&#39;sth&#39;)&quot;`.  
I know that `.attr()` is deprecated (in jquery-1.11.0, which I use), but, however, I tried it.  
And it workded!

Can someone explain why?

jQuery: get data attribute

I am reading some values in data attribute fields. I have seen two easy ways to read the data as shown below:

    var webappData = document.getElementById(&#39;web-app-data&#39;),
        rating = webappData.dataset.rating;

OR

    var effectData = $(&#39;.effects-list li&#39;),
        creative = effectData.filter(&#39;[data-creative]&#39;).data(&quot;creative&quot;);

My question is which of these has better performance or do they really differ?

I have a page with many data attributes that I am accessing and I would like to use the method that has the best performance. 

Any guidance on understanding the difference between the two would be appreciated. While I am looking at performance specifically if there are other reasons to use one over the other I would like to know this as well. 

dataset vs .data - Difference?

Recently I was coding away, and I ran into a weird issue.  I was attempting to assign a data attribute to a new element I had created (via jQuery), only to discover it wouldn&#39;t actually assign the attribute.    See the link below for an example, the code is listed below:

http://jsfiddle.net/y95p100c/1/

Any idea why this is happening?  I&#39;ve never stumbled into this...

    var div = $(&quot;&lt;div /&gt;&quot;)
    $(div).data(&quot;foo&quot;, &quot;bar&quot;)
    console.log($(div)[0].outerHTML) // prints &lt;div&gt;&lt;/div&gt;

JQuery .data() not working?

I have next html:

```html
&lt;span data-typeId=&quot;123&quot; data-type=&quot;topic&quot; data-points=&quot;-1&quot; data-important=&quot;true&quot; id=&quot;the-span&quot;&gt;&lt;/span&gt;
```

Is it possible to get the attributes that beginning with `data-`, and use it in the **JavaScript** code like code below? For now I get `null` as result.

```js
document.getElementById(&quot;the-span&quot;).addEventListener(&quot;click&quot;, function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: &quot;H. Pauwelyn&quot;
    });
});
```

Content Type	Original Author	Original Content on Stackoverflow
Question	MrUpsidown	View Question on Stackoverflow
Solution 1 - Jquery	Tushar Gupta - curioustushar	View Answer on Stackoverflow
Solution 2 - Jquery	Anton	View Answer on Stackoverflow
Solution 3 - Jquery	Aleshanee	View Answer on Stackoverflow
Solution 4 - Jquery	Girish	View Answer on Stackoverflow

jQuery find element by data attribute value

Jquery Problem Overview

Jquery Solutions

Solution 1 - Jquery

Solution 2 - Jquery

Solution 3 - Jquery

Solution 4 - Jquery

Cocoapods setup stuck on pod setup command on terminal

Sequelize, convert entity to plain object

Attributions