You can simply use the [zoom][1] property:

    #myContainer{
        zoom: 0.5;
        -moz-transform: scale(0.5);
    }

Where myContainer contains all the elements you&#39;re editing. This is supported in all major browsers.


  [1]: https://stackoverflow.com/q/10278783/1348195

This cross-browser lib seems safer - just zoom and moz-transform won&#39;t cover as many browsers as jquery.transform2d&#39;s scale().

http://louisremi.github.io/jquery.transform.js/

For example

    $(&#39;#div&#39;).css({ transform: &#39;scale(.5)&#39; });

#Update

OK - I see people are voting this down without an explanation. The other answer here won&#39;t work in old Safari (people running Tiger), and it won&#39;t work consistently in some older browsers - that is, it does scale things but it does so in a way that&#39;s either very pixellated or shifts the position of the element in a way that doesn&#39;t match other browsers.

http://www.browsersupport.net/CSS/zoom

Or just look at this question, which this one is likely just a dupe of:

https://stackoverflow.com/questions/13393588/complete-styles-for-cross-browser-css-zoom

When I run the following script in IDLE

    import os
    print(os.getcwd())

I get output as

    D:\testtool

but when I run from cmd prompt, I get

    c:\Python33&gt;python D:\testtool\current_dir.py
    c:\Python33

How do I get same result which I got using IDLE ?

How to get the current working directory using python 3?

What is the difference between Deferred and Promise other than the jQuery versions?

What should I use for my need?  I only want to call the `fooExecute()`.  I only need the `fooStart()` and `fooEnd()` to toggle the html div status for example.

    //I&#39;m using jQuery v2.0.0
    function fooStart() { /* Start Notification */ }
    function fooEnd() { /* End Notification */ }
    function fooExecute() { /* Execute the scripts */ }

    $(&#39;#button1&#39;).on(&#39;click&#39;, function() {
        var deferred1 = $.Deferred();
        var promise1 = $.Promise();

        deferred1.???

        promise1.???
    });

Deferred versus promise

Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).

I&#39;d like to pull the actual contents in from the database and build out the &quot;page&quot;, but have it display at 50% scale.

I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.

I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.

Scale the contents of a div by a percentage?

Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).
I'd like to pull the actual contents in from the database and build out the "page", but have it display at 50% scale.
I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.
I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.

Moment version: 2.0.0

[After reading the docs][1], I thought this would be straight-forward (Chrome console):

    var timestring1 = &quot;2013-05-09T00:00:00Z&quot;;
    var timestring2 = &quot;2013-05-09T02:00:00Z&quot;;
    var startdate = moment(timestring1);
    var expected_enddate = moment(timestring2);
    var returned_endate = startdate.add(moment.duration(2, &#39;hours&#39;));
    returned_endate == expected_enddate  // false
    returned_endate  // Moment {_i: &quot;2013-05-09T00:00:00Z&quot;, _f: &quot;YYYY-MM-DDTHH:mm:ss Z&quot;, _l: undefined, _isUTC: false, _a: Array[7]…}

This is a trivial example, but I can&#39;t even get it to work. I feel like I&#39;m missing something big here, but I really don&#39;t get it. Even this this doesn&#39;t seem to work:

    startdate.add(2, &#39;hours&#39;)
        // Moment {_i: &quot;2013-05-09T00:00:00Z&quot;, _f: &quot;YYYY-MM-DDTHH:mm:ss Z&quot;, _l: undefined, _isUTC: false, _a: Array[7]…}


  [1]: http://momentjs.com/docs/#/manipulating/add/

Any help would be much appreciated.

**Edit:**
My end goal is to make an binary status chart like the one I&#39;m working on here:
http://bl.ocks.org/phobson/5872894

As you can see, I&#39;m currently using dummy x-values while I work through this issue.



Add a duration to a moment (moment.js)

I&#39;m using Netbeans to add professional-like comments to each function, I write. So I begin each of it with `/**` and then I press `Enter` to let Netbeans fulfill default comment scheme for following function.

Up until now I&#39;ve been using this only for PHP language and in this case Netbeans was always adding `@returns {type}` part in comment scheme only, if following PHP function really included `return` statement. On so called &quot;procedures&quot; (functions that does not return any value) this part was missing.

Today I tried the same thing for Javascript function and Netbeans added `@returns {undefined}` part to comment scheme even though following function does not return anything.

This confused me. Does Netbeans suggests this way, that every Javascript function has to return anything? What should I do? Ignore (or delete) that comment scheme part or follow suggestion (if this is suggestion at all) and add `return false;` in the end of such function, though it is useless for me?

Does every Javascript function have to return a value?

When I try to change the linked reference of a local JavaScript file to a GitHub raw version my test file stops working. The error is: 

&gt; Refused to execute script from ... because its MIME type (`text/plain`) is not executable, and strict MIME type checking is enabled. 

Is there a way to disable this behavior or is there a service that allows linking to GitHub raw files?

Working code:

    &lt;script src=&quot;bootstrap-wysiwyg.js&quot;&gt;&lt;/script&gt;

Non-working code:

    &lt;script src=&quot;https://raw.github.com/mindmup/bootstrap-wysiwyg/master/bootstrap-wysiwyg.js&quot;&gt;&lt;/script&gt;

Link and execute external JavaScript file hosted on GitHub

I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into `$scope`, let `ng-repeat=&quot;&quot;` do its job) works fine, but it freezes the browser for about half of a minute when it starts inserting nodes into DOM. How should I approach this problem?

One option is to append rows to `$scope` incrementally and wait for `ngRepeat` to finish inserting one chunk into DOM before moving to the next one. But AFAIK ngRepeat does not report back when it finishes &quot;repeating&quot;, so it&#39;s going to be ugly.

Other option is to split data on the server into pages and fetch them in multiple requests, but that&#39;s even uglier.

I looked through Angular documentation in search of something like `ng-repeat=&quot;data in dataset&quot; ng-repeat-steps=&quot;500&quot;`, but found nothing. I am fairly new to Angular ways, so it is possible that I am missing the point completely. What are the best practices at this?

How to improve performance of ngRepeat over a huge dataset (angular.js)?

I created an basic bar chart using chartjs and it works fine. Now I want to update the values on a time based interval. My problem is that after I created the chart, I do not know how to update its values correctly...

My code:
 
    var ctx = $(&quot;#myChart&quot;).get(0).getContext(&quot;2d&quot;);

    var dts = [
        {
            fillColor: &quot;rgba(220,220,220,0.5)&quot;,
            strokeColor: &quot;rgba(220,220,220,1)&quot;,
            data: [0, 0, 0, 0, 0]
        }
    ];

    var data = {
        labels: [&quot;Core#1&quot;, &quot;Core#2&quot;, &quot;Core#3&quot;, &quot;Core#4&quot;, &quot;Total&quot;],
        datasets: dts
    };

    var chart = new Chart(ctx);
    chart.Bar(data);
                    
    //test code
    setInterval( function () {                        
        data.datasets[0].data = [random(), random(), random(), random(), random()];
        chart.Bar(data);

    },2000);


in the test code, I am updating the values with `datasets[0].data`- is this the right way to do it? The problem with this is that everytime I call `chart.Bar()`, the values are reset to 0 then animated to the random value (like I am recreating the chart). This way, all animations are always from 0 to value which looks strange. I would expect that if I update a value from 50 to 10 the bar would go down to 10 from 50 and not setted to 0 then animated to 10.

I did not found anything in the docs about this... am I doing something wrong or this is impossible with this library?


Dynamically update values of a chartjs chart

I am trying to set a variable in jQuery. The value is supposed to be set on the click event of the button. The onclick event fires but the x10Device variable remains `undefined`.  

I am on jquery 1.7.1.

jQuery:

     $x10Device = $(this).data(&quot;X10&quot;);

HTML:

    &lt;button class=&quot;toggleStatus&quot; data-X10=&quot;C5&quot;&gt;

I can&#39;t see what&#39;s wrong.

jquery can&#39;t get data attribute value

Is there a better way of figuring out the number of decimals on a number than in my example?

    var nbr = 37.435.45;
    var decimals = (nbr!=Math.floor(nbr))?(nbr.toString()).split(&#39;.&#39;)[1].length:0;

By better I mean faster to execute and/or using a native JavaScript function, ie. something like nbr.getDecimals().

Thanks in advance!

EDIT:

After modifying series0ne answer, the fastest way I could manage is:

    var val = 37.435345;
    var countDecimals = function(value) {
        if (Math.floor(value) !== value)
            return value.toString().split(&quot;.&quot;)[1].length || 0;
        return 0;
    }
    countDecimals(val);

Speed test: http://jsperf.com/checkdecimals


Simplest way of getting the number of decimals in a number in JavaScript

I&#39;ve never heard of an event in jQuery called `input` till I saw this [jsfiddle][1].

Do you know why it&#39;s working? Is it an alias for `keyup` or something?

    $(document).on(&#39;input&#39;, &#39;input:text&#39;, function() {});


  [1]: http://jsfiddle.net/philfreo/MqM76/

jQuery &#39;input&#39; event

Below, how should I select the elements that contain the class `my_class` within the element with `id = &quot;my_id&quot;`? 

Note that the element may also have another class, which I am not selecting for.

    &lt;div id = &quot;my_id&quot;&gt;
        &lt;span class = &quot;my_class hidden&quot;&gt;hi&lt;/span&gt;
        &lt;span class = &quot;my_class&quot;&gt;hello&lt;/span&gt;
    &lt;/div&gt;

was trying

    $(&quot;#my_id [class*=my_class ]&quot;)

jquery, selector for class within id

I have some input text fields in my page and am displaying their values using JavaScript.

I am using `.set(&quot;value&quot;,&quot;&quot;)` function to edit the value, add an extra checkbox field, and to pass a value.

Here I want to check that if `value == 1`, then this checkbox should be checked. Otherwise, it should remain unchecked. 

I did this by using two divs, but I am not feeling comfortable with that, is there any other solution?

    if(value == 1) {
		$(&#39;#uncheck&#39;).hide();
		$(&#39;#check&#39;).show();
	} else{
		$(&#39;#uncheck&#39;).show();
		$(&#39;#check&#39;).hide();
	}

check / uncheck checkbox using jquery?

There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.

But is there a way to show a styled tooltip without using JavaScript? If you just use the `title` attribute, tags are not processed (e.g. `foo&lt;br /&gt;bar` doesn&#39;t produce a line break). I&#39;m looking for a solution that allows one to display styled HTML content without using any JavaScript.

Tooltip with HTML content without JavaScript

What is the different between `.class.class` and `.class .class`?

What is the difference between the selectors &quot;.class.class&quot; and &quot;.class .class&quot;?

# Problem

I have a `&lt;select&gt;` where one of its `&lt;option&gt;`’s text values is very long. I want the `&lt;select&gt;` to resize so it is never wider than its parent, even if it has to cut off its displayed text. `max-width: 100%` should do that.

Before resize:

![the page before resize, showing the whole `select`][1]

What I want after resize:

![my desired page after resize, with the `select` clipping its contents][2]

But if you **[load this jsFiddle example](http://jsfiddle.net/roryokane/g8N87/)** and resize the Result panel’s width to be smaller than that of the `&lt;select&gt;`, you can see that the select inside the `&lt;fieldset&gt;` fails to scale its width down.

What I’m actually seeing after resize:

![my current page after resize, with a scroll bar][3]

However, the [equivalent page with a `&lt;div&gt;` instead of a `&lt;fieldset&gt;`](http://jsfiddle.net/roryokane/2YBcn/) does scale properly. You can see that and [**test your changes more easily**](http://jsfiddle.net/roryokane/hcTZG/) if you have [a `&lt;fieldset&gt;` and a `&lt;div&gt;` next to each other on one page](http://jsfiddle.net/roryokane/hcTZG/). And if you [delete the surrounding `&lt;fieldset&gt;` tags](http://jsfiddle.net/roryokane/D2U5R/), the resizing works. The `&lt;fieldset&gt;` tag is somehow causing horizontal resizing to break.

The `&lt;fieldset&gt;` acts is as if there is a CSS rule `fieldset { min-width: min-content; }`. ([`min-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) means, roughly, the smallest width that doesn’t cause a child to overflow.) If I replace the `&lt;fieldset&gt;` with a [`&lt;div&gt;` with `min-width: min-content`](http://jsfiddle.net/roryokane/2YBcn/), it looks exactly the same. Yet there is no rule with `min-content` in my styles, in the browser default stylesheet, or visible in Firebug’s CSS Inspector. I tried to override every style visible on the `&lt;fieldset&gt;` in Firebug’s CSS Inspector and in Firefox’s default stylesheet [forms.css](http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css), but that didn’t help. Specifically overriding `min-width` and `width` didn’t do anything either.


# Code

HTML of the fieldset:

&lt;!-- language: lang-html --&gt;

    &lt;fieldset&gt;
    	&lt;div class=&quot;wrapper&quot;&gt;
    		&lt;select id=&quot;section&quot; name=&quot;section&quot;&gt;
    			&lt;option value=&quot;-1&quot;&gt;&lt;/option&gt;
    			&lt;option value=&quot;1501&quot; selected=&quot;selected&quot;&gt;Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.&lt;/option&gt;
    			&lt;option value=&quot;1480&quot;&gt;Subcontractor&lt;/option&gt;
    			&lt;option value=&quot;3181&quot;&gt;Valley&lt;/option&gt;
    			&lt;option value=&quot;3180&quot;&gt;Ventura&lt;/option&gt;
    			&lt;option value=&quot;3220&quot;&gt;Very Newest Section&lt;/option&gt;
    			&lt;option value=&quot;1481&quot;&gt;Visitor&lt;/option&gt;
    			&lt;option value=&quot;3200&quot;&gt;N/A&lt;/option&gt;
    		&lt;/select&gt;
    	&lt;/div&gt;
    &lt;/fieldset&gt;

My CSS that should be working but isn’t:

&lt;!-- language: lang-css --&gt;

    fieldset {
    	/* hide fieldset-specific visual features: */
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    select {
    	max-width: 100%;
    }

Resetting the `width` properties to [the defaults](http://dev.w3.org/csswg/css-box/#the-width-and-height-properties) does nothing:

&lt;!-- language: lang-css --&gt;

    fieldset {
    	width: auto;
    	min-width: 0;
    	max-width: none;
    }

Further CSS in which I [try and fail to fix the problem](http://jsfiddle.net/roryokane/bfmsz/):

&lt;!-- language: lang-css --&gt;

    /* try lots of things to fix the width, with no success: */
    fieldset {
    	display: block;
    	min-width: 0;
    	max-width: 100%;
    	width: 100%;
    	text-overflow: clip;
    }
    
    div.wrapper {
    	width: 100%;
    }
    
    select {
    	overflow: hidden;
    }


# More details

The problem also occurs in this [more comprehensive, more complicated jsFiddle example](http://jsfiddle.net/roryokane/XDFuW/), which is more similar to the web page I’m actually trying to fix. You can see from that that the `&lt;select&gt;` is not the problem – an inline-block `div` also fails to resize. Though this example is more complicated, I assume that the fix for the simple case above will also fix this more complicated case.

[Edit: see browser support details below.]

One curious thing about this problem is that [if you set `div.wrapper { width: 50%; }`](http://jsfiddle.net/roryokane/hfa69/), the `&lt;fieldset&gt;` stops resizing itself at the point then the full-size `&lt;select&gt;` would have hit the edge of the viewport. The resizing happens as if the `&lt;select&gt;` has `width: 100%`, even though the `&lt;select&gt;` looks like it has `width: 50%`.

![after resize with 50%-width wrapper div][4]

If you [give the `&lt;select&gt;` itself `width: 50%`](http://jsfiddle.net/roryokane/q3WMF/), that behavior does not occur; the width is simply correctly set.

![after resize with 50%-width select][5]

I don’t understand the reason for that difference. But it may not be relevant.

I also found the very similar question https://stackoverflow.com/q/1716183/578288. The asker couldn’t find a solution and [guesses that there is no solution](https://stackoverflow.com/a/1827502/578288) apart from removing the `&lt;fieldset&gt;`. But I’m wondering, if it really is impossible to make the `&lt;fieldset&gt;` display right, why is that? What in `&lt;fieldset&gt;`’s [spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-fieldset-element) or [default CSS](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/forms.css) ([as of this question](https://hg.mozilla.org/mozilla-central/file/18f85a091e65/layout/style/forms.css)) causes this behavior? This special behavior is probably be documented somewhere, since multiple browsers work like this.


# Background goal and requirements

The reason I’m trying to do this is as part of writing mobile styles for an existing page with a big form. The form has multiple sections, and one part of it is wrapped in a `&lt;fieldset&gt;`. On a smartphone (or if you make your browser window small), the part of the page with the `&lt;fieldset&gt;` is much wider than the rest of the form. Most of the form constrains its width just fine, but the section with the `&lt;fieldset&gt;` does not, forcing the user to zoom out or scroll right to see all of that section.

I’m wary of simply removing the `&lt;fieldset&gt;`, as it is generated on many pages in a big app, and I’m not sure what selectors in CSS or JavaScript might depend on it.

I can use JavaScript if I need to, and a JavaScript solution is better than nothing. But if JavaScript is the only way to do this, I’d be curious to hear an explanation for why this is not possible using only CSS and HTML.

---

# Edit: browser support

On the site, I need to support Internet Explorer 8 and later (we just dropped support for IE7), the latest Firefox, and the latest Chrome. This particular page should also work on iOS and Android smartphones. Slightly degraded but still usable behavior is acceptable for Internet Explorer 8.

I retested [my broken `fieldset` example](http://jsfiddle.net/roryokane/g8N87/) on different browsers. It actually already works in these browsers:

* Internet Explorer 8, 9, and 10
* Chrome
* Chrome for Android

It breaks in these browsers:

* Firefox
* Firefox for Android
* Internet Explorer 7

Thus, the only browser I care about that the current code breaks in is Firefox (on both desktop and mobile). If the code were fixed so it worked in Firefox without breaking it in any other browsers, that would solve my problem.

The site HTML template uses Internet Explorer conditional comments to add classes such `.ie8` and `.oldie` to the `&lt;html&gt;` element. You can use those classes in your CSS if you need to work around styling differences in IE. The classes added are the same as in [this old version of HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/blob/b23de068c5a3cafe2dc642d095221245e578af34/index.html#L2-L7).


  [1]: http://i.stack.imgur.com/RIv8L.png
  [2]: http://i.stack.imgur.com/DJnrc.png
  [3]: http://i.stack.imgur.com/fcGsM.png
  [4]: http://i.stack.imgur.com/ne1lu.png
  [5]: http://i.stack.imgur.com/kcHbr.png

&lt;fieldset&gt; resizes wrong; appears to have unremovable `min-width: min-content`

I want to do this as easily as possible with out any additional libraries.

In my very long table I want to add a scrollbar to the `&lt;tbody&gt;` tag  so that the head is always visible but it wont work. can you please help.

fiddle : [http://jsfiddle.net/Hpx4L/][1]

    &lt;table border=&quot;1&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Month&lt;/th&gt;
          &lt;th&gt;Savings&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td&gt;Sum&lt;/td&gt;
          &lt;td&gt;$180&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
      &lt;tbody style=&quot;overflow-y:scroll; height:100px;&quot;&gt; &lt;!-- wont work --&gt;
        &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
              &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;


  [1]: http://jsfiddle.net/Hpx4L/

add scroll bar to table body

I&#39;m trying to swap two `div`s&#39; locations for responsive design (the site looks different depending on width of the browser/good for mobile).

Right now I have something like this:

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;first_div&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;second_div&quot;&gt;&lt;/div&gt;

But would it be possible to swap their placements to make it look like `second_div` is first, using CSS only? The HTML stays the same. I&#39;ve tried using floats and stuff but it doesn&#39;t seem to work the way I want it to. I don&#39;t want to use absolute positioning because the heights of the `div`s are always changing. Are there any solutions, or is there just no way to do this?

Swap DIV position with CSS only

So I recently discovered this awesome tool, and it says 

&gt; Docker is an open-source project to easily create lightweight,
&gt; portable, self-sufficient containers from any application. The same
&gt; container that a developer builds and tests on a laptop can run at
&gt; scale, in production, on VMs, bare metal, OpenStack clusters, public
&gt; clouds and more.

Let&#39;s say I have a docker image which runs Nginx and a website connects to external database. How do I scale the container in production?

How to scale Docker containers in production

Is there anyway to make the iOS simulator for iPhone 5 in Xcode, be the actual size of the iPhone 5. I&#39;m getting a huge display and things seemed to be scaled.

Adjusting the Xcode iPhone simulator scale and size

I&#39;m trying to understand the definition of `scale` that R provides. I have data (`mydata`) that I want to make a heat map with, and there is a VERY strong positive skew. I&#39;ve created a heatmap with a dendrogram for both `scale(mydata)` and `log(my data)`, and the dendrograms are different for both. Why? What does it mean to scale my data, versus log transform my data? And which would be more appropriate if I want to look at the dendrogram illustrating the relationship between the columns of my data?

Thank you for any help! I&#39;ve read the definitions but they are whooping over my head.  

Understanding `scale` in R

How do I most easily first scale an object, say 2 * times it&#39;s current size and then flip it vertically and horizontally, or both?

As of now, I can either set &quot;scale(2,2)&quot; for it to become 2 times as big as it&#39;s width and height but I can&#39;t flip it at the same with scale(-1, 1) for vertical flip.

I&#39;m creating SVG objects programmatically, as a format to export to.

Scale and mirror SVG object

I was looking for some css properties that I never used and came to know about `zoom` property of **css3**

 - What is the similarities and difference between them?

 - When to use Zoom and when scale? Both do pretty much the same job.

 - Which is more efficient to use and why?

##What have I noticed?

 - both scales the object but default transform-origin for scale its center and for zoom its top-left I think;

 - when we use them for scaling on hover, zoom will scale and again shrinks to the original dimension, while scale will only shrink on hover-out.
 [--&gt;&gt; jsfiddle showing hover effectst][1]** 

&lt;!-- begin snippet: js hide: true --&gt;

&lt;!-- language: lang-css --&gt;

    *
    {
        -webkit-transition-duration: 0.3s;
    	-moz-transition-duration: 0.3s;
    	-ms-transition-duration: 0.3s;
    	-o-transition-duration: 0.3s;
    	transition-duration: 0.3s;
    }

    box, box2
    {
        display: inline-block;
        width: 100px;
        height: 100px;
        
        margin: 20px;
    }

    box
    {
        background: #b00;
    }

    box:hover
    {
        zoom: 1.1;
    }

    box2
    {
        background: #00b;
    }

    box2:hover
    {
        -webkit-transform: scale(1.1);
    	-moz-transform: scale(1.1);
    	-ms-transform: scale(1.1);
    	-o-transform: scale(1.1);
    	transform: scale(1.1);
    }

&lt;!-- language: lang-html --&gt;

    &lt;box&gt;&lt;/box&gt;
    &lt;box2&gt;&lt;/box2&gt;

&lt;!-- end snippet --&gt;

----------

##Some Stackoverflow QA

 - [What Does &#39;zoom&#39; do in CSS?][2]

 - [Zoom versus -transform scale][3]



&lt;!-- begin snippet: js hide: true console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      display: inline-block;
      height: 50px;
      width: 50px;
    }
    .one {
      background: #07a;
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -ms-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2);
      transform-origin: top top;
    }
    .two {
      background: #eee;
      zoom: 200%;
      margin-left:100px;
    }

    .three {
      background: #07a;
      transform-origin: top left;
      transition:all 0.6s ease;
    }

    .three:hover{
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -ms-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2);
    }

    .four {
      background: #eee;
      transition:all 0.6s ease;
    }

    .four:hover{
      zoom: 200%;
    }

&lt;!-- language: lang-html --&gt;

    &lt;h4&gt;Already zoomed and scalled&lt;/h4&gt;
    &lt;div class=&quot;one&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;two&quot;&gt;&lt;/div&gt;
    &lt;hr&gt;
    &lt;h4&gt;Zoomed and Scalled on hover&lt;/h4&gt;
    &lt;div class=&quot;three&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;four&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://jsfiddle.net/KkpyY/
  [2]: https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css
  [3]: https://stackoverflow.com/questions/22279757/zoom-versus-transform-scale

Content Type	Original Author	Original Content on Stackoverflow
Question	Dave	View Question on Stackoverflow
Solution 1 - Javascript	Benjamin Gruenbaum	View Answer on Stackoverflow
Solution 2 - Javascript	Chris Moschini	View Answer on Stackoverflow

Scale the contents of a div by a percentage?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Deferred versus promise

How to get the current working directory using python 3?

Attributions