As per the [MDN documentation][1], the [Initial value][2] is `none`.

**You can reset the transformation using:**

&lt;!-- language: lang-css --&gt;

    div.someclass {
        transform: none;
    }


----------


**Using vendor prefix:**

&lt;!-- language: lang-css --&gt;

    div.someclass {
        -webkit-transform: none; /* Safari and Chrome */
           -moz-transform: none; /* Firefox */
            -ms-transform: none; /* IE 9 */
             -o-transform: none; /* Opera */
                transform: none;
    }


  [1]: https://developer.mozilla.org/en-US/docs/CSS/transform
  [2]: https://developer.mozilla.org/en-US/docs/CSS/initial_value

Safari iOS 10.3, 11.0 and Safari 11 on macOS didn&#39;t actually reset the transformation properly with `-webkit-transform: none;` or `transform: none;`
I had to instead reset all the values I changed with the transform property so  essentially I think the first option

    translate(0, 0); / translate3d(0, 0, 0);

is the way to go for browser compatibility for now.
So this SHOULD work:

    -webkit-transform: translate(0, 0) translate3d(0, 0, 0);
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: translate(0, 0) translate3d(0, 0, 0);

iOS 5 released web designers a new property `-webkit-overflow-scrolling:touch` that uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div.

When implemented on our site in development it does work but not well. I believe there may be a CSS issue hence I ask here.

The following [fiddle][1] will show you it working perfectly 

If you pop over to our site in development you will find the same panel under facilities tab but on iOS although the scrolling is perfect the overflowed section is not shown with pictures literarily chopped in two.

http://www.golfbrowser.com/courses/mill-ride/

I have no idea how to fix this
![enter image description here][2]


  [1]: http://jsfiddle.net/B94w9/1/
  [2]: http://www.golfbrowser.com/photo.PNG

CSS3 property webkit-overflow-scrolling:touch ERROR

I have recently been messing around with jQuery on my website, and I have a fairly limited knowledge of Javascript. I am beginning to like the jQuery ability to pass variables to a jQuery function inside the curly braces, like so:

    $(somediv).animate({thisisone: 1, thisistwo: 2}, thisisavar);

What I was wondering is how I can write a Javascript function that I can pass items to inside the curly braces? I know you can write functions like this:

    function someName(var1, var2, var3...) {
    
    }

but that doesn&#39;t support the braces? I also know that you can add no arguments and do this:

    function accident() {
    	for( var i = 0; i &lt; arguments.length; i++ ) {
    		alert(&quot;This accident was caused by &quot; + arguments[i]);
    	}
    }
    accident(&quot;me&quot;,&quot;a car&quot;,&quot;alcohol&quot;,&quot;a tree that had no right to be in the path of my driving&quot;);

but I also want to pass outside variables instead of just a whole line of strings, if that makes sense?

Basically, I want a function that I can pass variables to, like so:

    function myFunction(neededcodehere){
        //Some code here...
    }
    
    myFunction (var1, {&quot;Option 1&quot;, &quot;Option 2&quot;, &quot;Option 3&quot;}, anothervar);


Pass object to javascript function

How can I reset CSS `transform` properties CSS `translate` value?

### Say I have:

&lt;!-- language: lang-css --&gt;

    div.someclass {
        -webkit-transform: translate3d(0, -50%, 0);
           -moz-transform: translate(0, -50%);
            -ms-transform: translate(0,- 50%);
             -o-transform: translate(0, -50%);
                transform: translate3d(0, -50%, 0);
    }

Then how do I clear all transformations/translations?


----------


**Should I use:** `translate(0, 0);` / `translate3d(0, 0, 0);` **or** `transform:auto;` ?

How to reset CSS3 *-transform: translate(…)?

How can I reset CSS <code>transform</code> properties CSS <code>translate</code> value?
<h5 id="say-i-have"><a aria-hidden="true" tabindex="-1" href="#say-i-have"></a>Say I have:</h5>

<pre><code class="hljs language-css">div.someclass {
 -webkit-transform: translate3d(0, -50%, 0);
 -moz-transform: translate(0, -50%);
 -ms-transform: translate(0,- 50%);
 -o-transform: translate(0, -50%);
 transform: translate3d(0, -50%, 0);
}
</code></pre>
Then how do I clear all transformations/translations?
<hr>
Should I use: <code>translate(0, 0);</code> / <code>translate3d(0, 0, 0);</code> or <code>transform:auto;</code> ?

Lets say you have an array that is rendered in a `ul` with an `li` for each element and a property on the controller called `selectedIndex`. What would be the best way to add a class to the `li` with the index `selectedIndex` in AngularJS?

I am currently duplicating (by hand) the `li` code and adding the class to one of the `li` tags and using `ng-show` and `ng-hide` to show only one `li` per index.

What is the best way to conditionally apply a class?

I want my container div to get the height of max of its children&#39;s height. without knowing what height the child `div`s are going to have. I was trying out on [JSFiddle](http://jsfiddle.net/gtdfY/2/). The container `div` is on red. which is not showing up. Why?

CSS container div not getting height

I am switching to use Maven for my Spring web app projects and I am running into a simple issue. I am not sure where to put the CSS and JS files in the new project structure.

**Traditional Web App Structure**

In a traditional Java web app structure (In Eclipse, created as a Dynamic Web Project) I put the CSS, Javascript and Images files under the following structure

    WebContent
    |__css/myStyles.css
    |__js/myjs.js
    |__images/myImage.gif
    |__WEB-INF

Then in my jsp if I want to reference a CSS file I do as follows:

    &lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;%=request.getContextPath()%&gt;/css/myStyles.css&quot;&gt;

This works fine. 
     
**Maven Web App Structure**

In a Maven project I have put the css files in these locations:

First Attempt
-------------

Under the **webapp** folder at the same level as WEB-INF just like in a traditional dynamic web project. But when I do the following

    mvn clean tomcat:run

I get the following error from the Spring Framework:

    org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/appname/css/myStyles.css] in DispatcherServlet

 
Second Attempt
--------------

Placed my css folder under **src/main/resources** But when I do the following:

    mvn clean tomcat:run

I get the following error from the Spring Framework:

    org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/appname/css/myStyles.css] in DispatcherServlet

Third Attempt
-------------

Placed my css folder **src/main/resources**

Results: Same as above



I am sure it&#39;s something simple but I am stuck, maybe I am overlooking something. Thanks in advance

**UPDATE**: Adding pom.xml to see if it can help troubleshoot the issue:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;project xmlns=&quot;http://maven.apache.org/POM/4.0.0&quot; xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
	xsi:schemaLocation=&quot;http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd&quot;&gt;
	&lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;
	&lt;groupId&gt;com.dariopardo&lt;/groupId&gt;
	&lt;artifactId&gt;jfreechartdemo&lt;/artifactId&gt;
	&lt;name&gt;abc&lt;/name&gt;
	&lt;packaging&gt;war&lt;/packaging&gt;
	&lt;version&gt;1.0.0-BUILD-SNAPSHOT&lt;/version&gt;
	&lt;properties&gt;
		&lt;java-version&gt;1.6&lt;/java-version&gt;
		&lt;org.springframework-version&gt;3.0.6.RELEASE&lt;/org.springframework-version&gt;
		&lt;org.aspectj-version&gt;1.6.9&lt;/org.aspectj-version&gt;
		&lt;org.slf4j-version&gt;1.5.10&lt;/org.slf4j-version&gt;
	&lt;/properties&gt;
	&lt;repositories&gt;
		&lt;repository&gt;
			&lt;id&gt;spring-maven-release&lt;/id&gt;
			&lt;name&gt;Spring Maven Release Repository&lt;/name&gt;
			&lt;url&gt;http://maven.springframework.org/release&lt;/url&gt;
		&lt;/repository&gt;
		&lt;repository&gt;
			&lt;id&gt;spring-maven-milestone&lt;/id&gt;
			&lt;name&gt;Spring Maven Milestone Repository&lt;/name&gt;
			&lt;url&gt;http://maven.springframework.org/milestone&lt;/url&gt;
		&lt;/repository&gt;
		&lt;repository&gt;
			&lt;id&gt;spring-roo-repository&lt;/id&gt;
			&lt;name&gt;Spring Roo Repository&lt;/name&gt;
			&lt;url&gt;http://spring-roo-repository.springsource.org/release&lt;/url&gt;
		&lt;/repository&gt;
		&lt;repository&gt;
			&lt;id&gt;JBoss Repo&lt;/id&gt;
			&lt;url&gt;https://repository.jboss.org/nexus/content/repositories/releases&lt;/url&gt;
			&lt;name&gt;JBoss Repo&lt;/name&gt;
		&lt;/repository&gt;
	&lt;/repositories&gt;
	&lt;pluginRepositories&gt;
		&lt;pluginRepository&gt;
			&lt;id&gt;spring-maven-release&lt;/id&gt;
			&lt;name&gt;Spring Maven Release Repository&lt;/name&gt;
			&lt;url&gt;http://maven.springframework.org/release&lt;/url&gt;
		&lt;/pluginRepository&gt;
		&lt;pluginRepository&gt;
			&lt;id&gt;spring-maven-milestone&lt;/id&gt;
			&lt;name&gt;Spring Maven Milestone Repository&lt;/name&gt;
			&lt;url&gt;http://maven.springframework.org/milestone&lt;/url&gt;
		&lt;/pluginRepository&gt;
		&lt;pluginRepository&gt;
			&lt;id&gt;spring-roo-repository&lt;/id&gt;
			&lt;name&gt;Spring Roo Repository&lt;/name&gt;
			&lt;url&gt;http://spring-roo-repository.springsource.org/release&lt;/url&gt;
		&lt;/pluginRepository&gt;
	&lt;/pluginRepositories&gt;
	&lt;dependencies&gt;
		&lt;!-- Spring --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-context&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;exclusions&gt;
				&lt;!-- Exclude Commons Logging in favor of SLF4j --&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				 &lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-core&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-test&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;scope&gt;test&lt;/scope&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-aop&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-aspects&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-tx&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-jdbc&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-orm&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;commons-pool&lt;/groupId&gt;
			&lt;artifactId&gt;commons-pool&lt;/artifactId&gt;
			&lt;version&gt;1.5.4&lt;/version&gt;
			&lt;classifier /&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;commons-dbcp&lt;/groupId&gt;
			&lt;artifactId&gt;commons-dbcp&lt;/artifactId&gt;
			&lt;version&gt;1.3&lt;/version&gt;
			&lt;classifier /&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-pool&lt;/groupId&gt;
					&lt;artifactId&gt;commons-pool&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;xerces&lt;/groupId&gt;
					&lt;artifactId&gt;xerces&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;xerces&lt;/groupId&gt;
					&lt;artifactId&gt;xercesImpl&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;xml-apis&lt;/groupId&gt;
					&lt;artifactId&gt;xml-apis&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-web&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
			&lt;classifier /&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;commons-logging&lt;/groupId&gt;
					&lt;artifactId&gt;commons-logging&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.springframework&lt;/groupId&gt;
			&lt;artifactId&gt;spring-webmvc&lt;/artifactId&gt;
			&lt;version&gt;${org.springframework-version}&lt;/version&gt;
		&lt;/dependency&gt;
				
		&lt;!-- AspectJ --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.aspectj&lt;/groupId&gt;
			&lt;artifactId&gt;aspectjrt&lt;/artifactId&gt;
			&lt;version&gt;${org.aspectj-version}&lt;/version&gt;
		&lt;/dependency&gt;	
		
		&lt;!-- Hibernate --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.hibernate&lt;/groupId&gt;
			&lt;artifactId&gt;hibernate-core&lt;/artifactId&gt;
			&lt;version&gt;3.6.4.Final&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.hibernate&lt;/groupId&gt;
			&lt;artifactId&gt;hibernate-entitymanager&lt;/artifactId&gt;
			&lt;version&gt;3.6.4.Final&lt;/version&gt;
			&lt;classifier /&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;cglib&lt;/groupId&gt;
					&lt;artifactId&gt;cglib&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;dom4j&lt;/groupId&gt;
					&lt;artifactId&gt;dom4j&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.hibernate.javax.persistence&lt;/groupId&gt;
			&lt;artifactId&gt;hibernate-jpa-2.0-api&lt;/artifactId&gt;
			&lt;version&gt;1.0.0.Final&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.hibernate&lt;/groupId&gt;
			&lt;artifactId&gt;hibernate-validator&lt;/artifactId&gt;
			&lt;version&gt;4.1.0.Final&lt;/version&gt;
			&lt;classifier /&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;javax.xml.bind&lt;/groupId&gt;
					&lt;artifactId&gt;jaxb-api&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;com.sun.xml.bind&lt;/groupId&gt;
					&lt;artifactId&gt;jaxb-impl&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.validation&lt;/groupId&gt;
			&lt;artifactId&gt;validation-api&lt;/artifactId&gt;
			&lt;version&gt;1.0.0.GA&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;cglib&lt;/groupId&gt;
			&lt;artifactId&gt;cglib-nodep&lt;/artifactId&gt;
			&lt;version&gt;2.2&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.transaction&lt;/groupId&gt;
			&lt;artifactId&gt;jta&lt;/artifactId&gt;
			&lt;version&gt;1.1&lt;/version&gt;
			&lt;classifier /&gt;
		&lt;/dependency&gt;
		
		&lt;!-- Logging --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.slf4j&lt;/groupId&gt;
			&lt;artifactId&gt;slf4j-api&lt;/artifactId&gt;
			&lt;version&gt;${org.slf4j-version}&lt;/version&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.slf4j&lt;/groupId&gt;
			&lt;artifactId&gt;jcl-over-slf4j&lt;/artifactId&gt;
			&lt;version&gt;${org.slf4j-version}&lt;/version&gt;
			&lt;scope&gt;runtime&lt;/scope&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;org.slf4j&lt;/groupId&gt;
			&lt;artifactId&gt;slf4j-log4j12&lt;/artifactId&gt;
			&lt;version&gt;${org.slf4j-version}&lt;/version&gt;
			&lt;scope&gt;runtime&lt;/scope&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;log4j&lt;/groupId&gt;
			&lt;artifactId&gt;log4j&lt;/artifactId&gt;
			&lt;version&gt;1.2.15&lt;/version&gt;
			&lt;exclusions&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;javax.mail&lt;/groupId&gt;
					&lt;artifactId&gt;mail&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;javax.jms&lt;/groupId&gt;
					&lt;artifactId&gt;jms&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;com.sun.jdmk&lt;/groupId&gt;
					&lt;artifactId&gt;jmxtools&lt;/artifactId&gt;
				&lt;/exclusion&gt;
				&lt;exclusion&gt;
					&lt;groupId&gt;com.sun.jmx&lt;/groupId&gt;
					&lt;artifactId&gt;jmxri&lt;/artifactId&gt;
				&lt;/exclusion&gt;
			&lt;/exclusions&gt;
			&lt;scope&gt;runtime&lt;/scope&gt;
		&lt;/dependency&gt;

		&lt;!-- @Inject --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.inject&lt;/groupId&gt;
			&lt;artifactId&gt;javax.inject&lt;/artifactId&gt;
			&lt;version&gt;1&lt;/version&gt;
		&lt;/dependency&gt;
				
		&lt;!-- Servlet --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.servlet&lt;/groupId&gt;
			&lt;artifactId&gt;servlet-api&lt;/artifactId&gt;
			&lt;version&gt;2.5&lt;/version&gt;
			&lt;scope&gt;provided&lt;/scope&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.servlet.jsp&lt;/groupId&gt;
			&lt;artifactId&gt;jsp-api&lt;/artifactId&gt;
			&lt;version&gt;2.1&lt;/version&gt;
			&lt;scope&gt;provided&lt;/scope&gt;
		&lt;/dependency&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;javax.servlet&lt;/groupId&gt;
			&lt;artifactId&gt;jstl&lt;/artifactId&gt;
			&lt;version&gt;1.2&lt;/version&gt;
		&lt;/dependency&gt;
	
		&lt;!-- Test --&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;junit&lt;/groupId&gt;
			&lt;artifactId&gt;junit&lt;/artifactId&gt;
			&lt;version&gt;4.7&lt;/version&gt;
			&lt;scope&gt;test&lt;/scope&gt;
		&lt;/dependency&gt;       
		
		&lt;!-- To bring jfree chart in, iText &amp; Apache POI --&gt;
		&lt;dependency&gt;
            &lt;groupId&gt;net.sf.jasperreports&lt;/groupId&gt;
            &lt;artifactId&gt;jasperreports&lt;/artifactId&gt;
            &lt;version&gt;4.1.2&lt;/version&gt;
        &lt;/dependency&gt; 
        
        &lt;dependency&gt;
			&lt;groupId&gt;org.codehaus.groovy&lt;/groupId&gt;
			&lt;artifactId&gt;groovy-all&lt;/artifactId&gt;
			&lt;version&gt;1.5.5&lt;/version&gt;
		&lt;/dependency&gt;
        
        &lt;!-- Oracle jdbc drivers --&gt;
        &lt;dependency&gt;
			&lt;groupId&gt;com.oracle&lt;/groupId&gt;
			&lt;artifactId&gt;oracle&lt;/artifactId&gt;
			&lt;version&gt;10.2.0.1.0&lt;/version&gt;
		&lt;/dependency&gt;
		
	&lt;/dependencies&gt;
	&lt;build&gt;
		&lt;plugins&gt;
			&lt;plugin&gt;
				&lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
				&lt;artifactId&gt;maven-compiler-plugin&lt;/artifactId&gt;
				&lt;configuration&gt;
					&lt;source&gt;${java-version}&lt;/source&gt;
					&lt;target&gt;${java-version}&lt;/target&gt;
				&lt;/configuration&gt;
			&lt;/plugin&gt;
			&lt;plugin&gt;
				&lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
				&lt;artifactId&gt;maven-war-plugin&lt;/artifactId&gt;
				&lt;configuration&gt;
					&lt;warName&gt;abc&lt;/warName&gt;
				&lt;/configuration&gt;							
			&lt;/plugin&gt;
			&lt;plugin&gt;
				&lt;groupId&gt;org.apache.maven.plugins&lt;/groupId&gt;
				&lt;artifactId&gt;maven-dependency-plugin&lt;/artifactId&gt;
				&lt;executions&gt;
					&lt;execution&gt;
						&lt;id&gt;install&lt;/id&gt;
						&lt;phase&gt;install&lt;/phase&gt;
						&lt;goals&gt;
							&lt;goal&gt;sources&lt;/goal&gt;
						&lt;/goals&gt;
					&lt;/execution&gt;
				&lt;/executions&gt;
			&lt;/plugin&gt;			
		&lt;/plugins&gt;
	&lt;/build&gt;
&lt;/project&gt;
    
**UPDATE: Adding Web.xml**

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
    &lt;web-app version=&quot;2.5&quot; xmlns=&quot;http://java.sun.com/xml/ns/javaee&quot;
	xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
	xsi:schemaLocation=&quot;http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd&quot;&gt;

	&lt;!-- The definition of the Root Spring Container shared by all Servlets and Filters --&gt;
	&lt;context-param&gt;
		&lt;param-name&gt;contextConfigLocation&lt;/param-name&gt;
		&lt;param-value&gt;/WEB-INF/spring/root-context.xml
                     classpath*:META-INF/spring/applicationContext*.xml				     
		&lt;/param-value&gt;
	&lt;/context-param&gt;
	
	&lt;!-- Creates the Spring Container shared by all Servlets and Filters --&gt;
	&lt;listener&gt;
		&lt;listener-class&gt;org.springframework.web.context.ContextLoaderListener&lt;/listener-class&gt;
	&lt;/listener&gt;

	&lt;!-- Processes application requests --&gt;
	&lt;servlet&gt;
		&lt;servlet-name&gt;appServlet&lt;/servlet-name&gt;
		&lt;servlet-class&gt;org.springframework.web.servlet.DispatcherServlet&lt;/servlet-class&gt;
		&lt;init-param&gt;
			&lt;param-name&gt;contextConfigLocation&lt;/param-name&gt;
			&lt;param-value&gt;/WEB-INF/spring/appServlet/servlet-context.xml&lt;/param-value&gt;
		&lt;/init-param&gt;
		&lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
	&lt;/servlet&gt;
		
	&lt;servlet-mapping&gt;
		&lt;servlet-name&gt;appServlet&lt;/servlet-name&gt;
		&lt;url-pattern&gt;/&lt;/url-pattern&gt;
	&lt;/servlet-mapping&gt;

&lt;/web-app&gt;



Where do CSS and JavaScript files go in a Maven web app project?

I&#39;m developing a webapp (not a website with pages of interesting text) with a very different interface for touch (your finger hides the screen when you click) and mouse (relies heavily on hover preview).
How can I detect that my user has no mouse to present him the right interface? I plan to leave a switch for people with both mouse and touch (like some notebooks). 

The touch event capability in the browser doesn&#39;t actually mean the user is using a touch device (for example, Modernizr doesn&#39;t cut it).  The code that correctly answers the question should return false if the device has a mouse, true otherwise. For devices with mouse and touch, it should return false (not touch only)

As a side note, my touch interface might also be suitable for keyboard-only devices, so it&#39;s more the lack of mouse I&#39;m looking to detect.

To make the need more clear, here is the API that I&#39;m looking to implement:
    
    // Level 1


    // The current answers provide a way to do that.
    hasTouch();

    // Returns true if a mouse is expected.
    // Note: as explained by the OP, this is not !hasTouch()
    // I don&#39;t think we have this in the answers already, that why I offer a bounty
    hasMouse();

    // Level 2 (I don&#39;t think it&#39;s possible, but maybe I&#39;m wrong, so why not asking)

    // callback is called when the result of &quot;hasTouch()&quot; changes.
    listenHasTouchChanges(callback);

    // callback is called when the result of &quot;hasMouse()&quot; changes.
    listenHasMouseChanges(callback);

Detecting that the browser has no mouse and is touch-only

How do I reset a `setInterval` timer back to 0?

    var myTimer = setInterval(function() {
      console.log(&#39;idle&#39;);
    }, 4000);

I tried `clearInterval(myTimer)` but that completely stops the interval. I want it to restart from 0.

How do I reset the setInterval timer?

I&#39;m setting up a new version of my application in a demo server and would love to find a way of resetting the database daily. I guess I can always have a cron job executing drop and create queries but I&#39;m looking for a cleaner approach. I tried using a special persistence unit with drop-create approach but it doesn&#39;t work as the system connects and disconnects from the server frequently (on demand).

Is there a better approach?

Reset Embedded H2 database periodically

What&#39;s the fastest way to reset every value of a `std::vector&lt;int&gt;` to 0 and keeping the vectors initial size ? 

A for loop with the [] operator ? 

Fastest way to reset every value of std::vector&lt;int&gt; to 0

Basically this is my problem/

I have 200+ phones running stock Android that need to be wiped (in the Wipe Data/Factory Reset way) and then a new ROM installed with some additional apks.

Currently I&#39;ve got everything automated except the Wipe Data part. Everything else can be done through a .bat with a set of commands quite happily but I cannot for the life of me work out how to either imitate or force the recovery mode to wipe the data.

Things I&#39;ve currently tried:

 - Wiping the data myself using rm -r * on the folders it&#39;s supposed to do (data,cache,sd-ext etc.). This does wipe but then the ROM doesn&#39;t work properly and gets stuck in a bootloop.
 - Trying to use &quot;adb input keyevent&quot; to mimic the key presses. I have no idea what they are mapped to because they are in a UNIX shell basically and even then there is no &quot;input&quot; because the OS hasn&#39;t been loaded anyway.
 - Trying to find the file/script on the system that actually runs the wipe/reset and then running that manually. This might be the simplest way as it&#39;s already been written for me somewhere but I just cannot see where it is hidden, even in something like CWM.

If anyone has got any method whereby I could do this factory reset through a .bat or through the adb shell I would greatly appreciate it. Been trying to solve this for about 2 days now with little progress.

Wipe data/Factory reset through ADB

Take a look at this example here:

http://denise.brixwork.com/showlisting/1/8297-Valley-Drive-Alpine-Meadows-Whistler-denise-brown-real-estate

And the red tables under &quot;Specifications&quot; is not becoming the full width of the &lt;table&gt; containing it - when inspecting on Firebug, the &lt;tbody&gt; div is not 220 pixels, but rather, just over a 100 pixels based on the content width. 

    &lt;div class=&quot;grid_4 alpha&quot;&gt;
    	&lt;table width=&quot;100%&quot; class=&quot;grid_4 alpha omega&quot;&gt;
            	&lt;tr class=&quot;specrow&quot;&gt;
    			&lt;td class=&quot;specname&quot;&gt;type:&lt;/td&gt;
    			&lt;td class=&quot;specvalue&quot;&gt;House&lt;/td&gt;
    		&lt;/tr&gt;
    		&lt;tr class=&quot;specrow&quot;&gt;
    			&lt;td class=&quot;specname&quot;&gt;year:&lt;/td&gt;
    			&lt;td class=&quot;specvalue&quot;&gt;1986&lt;/td&gt;
    		&lt;/tr&gt;
    	&lt;/table&gt;
    &lt;/div&gt;

The CSS code looks like this:

    #listing_specs table {
    	width: 100%;
    }
    
    #listing_specs table tbody {
    	display: table-row-group;
    	width: 100%;
    }
    
    .specrow {
    	margin:2px 0px;
    	border-bottom:1px dotted #dadada;
    	color: #fff;
    	width: 100%;
    	background-color: #A92229;
    }
    
    .specrow:hover {
    	background-color:#fff;
    	color:#333;
    }
    
    .specname{
    	font-weight: 600;
    	padding:2px 2px 2px 5px;
    	width: 50%;
    	white-space: nowrap;
    }
    
    .specvalue {
    	font-weight:normal;
    	padding:2px 5px 2px 5px;
    	text-align:left;
    	width: 50%;
    }

I know there is a generic CSS resetter, and I think that&#39;s what&#39;s causing the problem. Unfortunately I can&#39;t go and just remove the reference to it because multiple sites refer to it from the same location at this moment, and I can&#39;t just make that change without careful review. So I need a way to override it on the stylesheet itself. The reset CSS being called is: 

    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;http://demo.brixwork.com/master/css/reset.css&quot; /&gt;

tbody width not automatically extending to width of table

Similary to &quot;[css transform, jagged edges in chrome][1]&quot;, same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/ (&lt;- remember: **Firefox**)

This time, `backface-visibility` doesn&#39;t help :(

Any idea?


  [1]: https://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome

3D CSS transform, jagged edges in Firefox

I am moving 10,000 small div elements in a css3 experiment from the top of the browser viewport to the bottom. For this test I use 2 different approaches:

1. With GPU acceleration using `translate3D(x, y, z)` or `translateZ(0)`
2. No GPU acceleration by simply adjusting the `top` property in css

Using **NO** hardware-acceleration runs fairly smooth on Google Chrome.

&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;

If I enable hardware-acceleration performance becomes a lot worse. It&#39;s so bad the boxes aren&#39;t even spread out evenly anymore:

### With GPU/Hardware acceleration:

---
&lt;img src=&quot;https://www.timo-ernst.net/misc/hwtest/video/gpu.gif&quot; alt=&quot;&quot;&gt;

---

### Without GPU/Hardware acceleration:

---
&lt;img src=&quot;https://www.timo-ernst.net/misc/hwtest/video/no-gpu.gif&quot; alt=&quot;&quot;&gt;

---

### Question

Why is that so? Shouldn&#39;t using the GPU improve performance?

### Demo application

https://www.timo-ernst.net/misc/hwtest/

### Source

https://github.com/valnub/hwtest

### My hardware used for test

- Apple Macbook Pro 15&quot; 2015 Model
- CPU 2,8 GHz Intel Core i7
- 16 GB RAM
- macOS Big Sur 11.2

-----------------------

***Update** (2014-11-13): Since this question is still attracting attention I&#39;d like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo **on modern hardware**. Older devices might still see performance issues.*

***Update II** (2021-02-17): The problem still persists but you will have to increase the number of boxes being moved in the demo based on the hardware used. I changed the UI of the demo app so you can now adjust the number of boxes moved to create a stuttering animation for your specific hardware. To replicate the issue I recommend to create enough boxes to see stuttering with GPU/hardware acceleration enabled. Then tick off the box and run the test again without acceleration. The animation should be smoother.

Why does enabling hardware-acceleration in CSS3 slow down performance?

I am applying a CSS transform (and the browser specific -webkit, -o etc):

transform: matrix(0.5 , 0 , 0, 0.5, 0 , 0);

to a div then using jQuery&#39;s draggable() and resizable() plugins on children of said div.

The problem I had was that when dragging or resizing the child elements, the alteration jQuery made were out of &quot;sync&quot; with the mouse by a factor equal to the scale applied.

I found a solution on stackoverflow (though I stupidly did not bookmark it and now cant find it....) that suggested patching the plugins, and it worked wonderfully. It went along these line:
    
    function monkeyPatch_mouseStart() {
      // don&#39;t really need this, but in case I did, I could store it and chain
      // var oldFn = $.ui.draggable.prototype._mouseStart ;
      $.ui.draggable.prototype._mouseStart = function(event) {

        var o = this.options;

        //Create and append the visible helper
        this.helper = this._createHelper(event);

        //Cache the helper size
        this._cacheHelperProportions();

        //If ddmanager is used for droppables, set the global draggable
        if($.ui.ddmanager)
          $.ui.ddmanager.current = this;

        /*
         * - Position generation -
         * This block generates everything position related - it&#39;s the core of draggables.
         */

        //Cache the margins of the original element
        this._cacheMargins();

        //Store the helper&#39;s css position
        this.cssPosition = this.helper.css(&quot;position&quot;);
        this.scrollParent = this.helper.scrollParent();

        //The element&#39;s absolute position on the page minus margins

        //PATCH CODE
        this.offset = this.positionAbs = getViewOffset(this.element[0]);
        //END

        this.offset = {
          top: this.offset.top - this.margins.top,
          left: this.offset.left - this.margins.left
        };

        $.extend(this.offset, {
          click: { //Where the click happened, relative to the element
            left: event.pageX - this.offset.left,
            top: event.pageY - this.offset.top
          },
          parent: this._getParentOffset(),
          relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
        });

        //Generate the original position
        this.originalPosition = this.position = this._generatePosition(event);
        this.originalPageX = event.pageX;
        this.originalPageY = event.pageY;

        //Adjust the mouse offset relative to the helper if &#39;cursorAt&#39; is supplied
        if(o.cursorAt &amp;&amp; this._adjustOffsetFromHelper(o.cursorAt)){
        }

        //Set a containment if given in the options
        if(o.containment)
          this._setContainment();

        //Trigger event + callbacks
        if(this._trigger(&quot;start&quot;, event) === false) {
          this._clear();
          return false;
        }

        //Recache the helper size
        this._cacheHelperProportions();

        //Prepare the droppable offsets
        if ($.ui.ddmanager &amp;&amp; !o.dropBehaviour)
          $.ui.ddmanager.prepareOffsets(this, event);

        this.helper.addClass(&quot;ui-draggable-dragging&quot;);
        this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position

        //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003)
        if ( $.ui.ddmanager &amp;&amp; $.ui.ddmanager.dragStart) $.ui.ddmanager.dragStart(this, event);

        return true;
      }
     }

    function getViewOffset(node) {
      var x = 0, y = 0, win = node.ownerDocument.defaultView || window;
      if (node) addOffset(node);
      return { left: x, top: y };

      function getStyle(node) {
        return node.currentStyle || // IE
               win.getComputedStyle(node, &#39;&#39;);
      }

      function addOffset(node) {
        var p = node.offsetParent, style, X, Y;
        x += parseInt(node.offsetLeft, 10) || 0;
        y += parseInt(node.offsetTop, 10) || 0;

        if (p) {
          x -= parseInt(p.scrollLeft, 10) || 0;
          y -= parseInt(p.scrollTop, 10) || 0;

          if (p.nodeType == 1) {
            var parentStyle = getStyle(p)
              , localName   = p.localName
              , parent      = node.parentNode;
            if (parentStyle.position != &#39;static&#39;) {
              x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
              y += parseInt(parentStyle.borderTopWidth, 10) || 0;

              if (localName == &#39;TABLE&#39;) {
                x += parseInt(parentStyle.paddingLeft, 10) || 0;
                y += parseInt(parentStyle.paddingTop, 10) || 0;
              }
              else if (localName == &#39;BODY&#39;) {
                style = getStyle(node);
                x += parseInt(style.marginLeft, 10) || 0;
                y += parseInt(style.marginTop, 10) || 0;
              }
            }
            else if (localName == &#39;BODY&#39;) {
              x += parseInt(parentStyle.borderLeftWidth, 10) || 0;
              y += parseInt(parentStyle.borderTopWidth, 10) || 0;
            }

            while (p != parent) {
              x -= parseInt(parent.scrollLeft, 10) || 0;
              y -= parseInt(parent.scrollTop, 10) || 0;
              parent = parent.parentNode;
            }
            addOffset(p);
          }
        }
        else {
          if (node.localName == &#39;BODY&#39;) {
            style = getStyle(node);
            x += parseInt(style.borderLeftWidth, 10) || 0;
            y += parseInt(style.borderTopWidth, 10) || 0;

            var htmlStyle = getStyle(node.parentNode);
            x -= parseInt(htmlStyle.paddingLeft, 10) || 0;
            y -= parseInt(htmlStyle.paddingTop, 10) || 0;
          }

          if ((X = node.scrollLeft)) x += parseInt(X, 10) || 0;
          if ((Y = node.scrollTop))  y += parseInt(Y, 10) || 0;
        }
      }
    }
    var isNumber = function(value) {
      return !isNaN(parseInt(value, 10));
    };

I have made my own changes such as (you can see on the 6-7 lines the multiplication of the movement by a &quot;scale factor&quot;):


     $.ui.draggable.prototype._generatePosition = function(event) {
        var o = this.options, scroll = this.cssPosition == &#39;absolute&#39; &amp;&amp; !(this.scrollParent[0] != document &amp;&amp; $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
        var pageX = event.pageX;
        var pageY = event.pageY;
        //PATCH CODE
        if($(this.element[0]).hasClass(&#39;item&#39;)){
            pageY = this.originalPageY + ((pageY - this.originalPageY)*(1/$.viewbox.foreground.scale));
            pageX = this.originalPageX + ((pageX - this.originalPageX)*(1/$.viewbox.foreground.scale));
        }
        //END
        /*
         * - Position constraining -
         * Constrain the position to a mix of grid, containment.
         */

        if(this.originalPosition) { //If we are not dragging yet, we won&#39;t check for options

          if(this.containment) {
            if(event.pageX - this.offset.click.left &lt; this.containment[0]) pageX = this.containment[0] + this.offset.click.left;
            if(event.pageY - this.offset.click.top &lt; this.containment[1]) pageY = this.containment[1] + this.offset.click.top;
            if(event.pageX - this.offset.click.left &gt; this.containment[2]) pageX = this.containment[2] + this.offset.click.left;
            if(event.pageY - this.offset.click.top &gt; this.containment[3]) pageY = this.containment[3] + this.offset.click.top;
          }

          if(o.grid) {
            var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
            pageY = this.containment ? (!(top - this.offset.click.top &lt; this.containment[1] || top - this.offset.click.top &gt; this.containment[3]) ? top : (!(top - this.offset.click.top &lt; this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;

            var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
            pageX = this.containment ? (!(left - this.offset.click.left &lt; this.containment[0] || left - this.offset.click.left &gt; this.containment[2]) ? left : (!(left - this.offset.click.left &lt; this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
          }
        }
        return {
          top: (
            pageY                               // The absolute mouse position
            - this.offset.click.top                         // Click offset (relative to the element)
            - this.offset.relative.top                        // Only for relative positioned nodes: Relative offset from element to offset parent
            - this.offset.parent.top                        // The offsetParent&#39;s offset without borders (offset + border)
            + ($.browser.safari &amp;&amp; $.browser.version &lt; 526 &amp;&amp; this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
          ),
          left: (
            pageX                               // The absolute mouse position
            - this.offset.click.left                        // Click offset (relative to the element)
            - this.offset.relative.left                       // Only for relative positioned nodes: Relative offset from element to offset parent
            - this.offset.parent.left                       // The offsetParent&#39;s offset without borders (offset + border)
            + ($.browser.safari &amp;&amp; $.browser.version &lt; 526 &amp;&amp; this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
          )
        };

      }

So big thank you to whoever suggested that.

So, my question! Has anyone come across a nice way to have draggable/resizable events inside a scaled element that doesn&#39;t require patching jQuery? I have googled, and this was the best solution I could find. Does anyone know of alternative to jquery that perhaps works under these conditions, with CSS transforms?

Many thanks for any responses.

jQuery Drag/Resize with CSS Transform Scale

Using CSS, how can I apply more than one `transform`?

Example: In the following, only the translation is applied, not the rotation.

    li:nth-child(2) {
        transform: rotate(15deg);
    	transform: translate(-20px,0px);		
    }

How to apply multiple transforms in CSS?

I found this: https://stackoverflow.com/questions/7565542/width-height-after-transform 

and several others, but nothing is not quite what I&#39;m looking for. What I want is to scale something to 50% of it&#39;s size (with nice animated transition of course) and have the page layout re-adjust to the new (visual) size of the element. What seems to happen by default is that the element still retains it&#39;s original size in the layout structure, and is merely drawn with the associated transformations. 

Basically I want the user to click on a block of text (or other content), and then scale that text to 50% (or whatever) of it&#39;s size and stick it in a panel below to indicate that it&#39;s been selected. I don&#39;t want 50% whitespace around the element after I move it. 

I&#39;ve tried re-setting the height/width, but that causes the element iself to undergo a new layout and then the scale is applied to the new layout and this still leaves me with 50% white space after all is finished. My mozilla specific (for simplicity) code looks like this:

    &lt;script type=&quot;text/javascript&quot;&gt;
     function zap(e) {
    
      var height = e.parentNode.offsetHeight/2 + &#39;px&#39;;
      var width = e.parentNode.offsetWidth/2 + &#39;px&#39;;
      e.parentNode.style.MozTransform=&#39;scale(0.0)&#39;; 
      e.parentNode.addEventListener(
        &#39;transitionend&#39;, 
        function() { 
          var selectionsArea = document.getElementById(&quot;selected&quot;);
          selectionsArea.appendChild(e.parentNode);
          e.parentNode.style.MozTransform=&#39;scale(0.5,0.5)&#39;; 
          e.parentNode.style.display = &#39;inline-block&#39;;
          e.parentNode.style.height = height;
          e.parentNode.style.width = width;
        },
        true) 
    }
    &lt;/script&gt;

I&#39;m really hoping I don&#39;t have to go into messing with negative margins or relative positioning to achieve this... 

**Edit:** Since writing this I found a very similar question with neither comments or answers. It differs slightly as I don&#39;t care about it being an html5 specific solution, I suspect the solution either doesn&#39;t exist or lies in CSS/javascript regardless of the html level.

https://stackoverflow.com/questions/10627306/scale-zoom-a-dom-element-and-the-space-it-occupies-using-css3-transform-scale

**Edit 2:** (another non-working attempt)

I&#39;ve also tried this, but the scale and the translate functions seem to interact in a manner that makes the final position impossible to predict... and scale before transform doesn&#39;t appear to be the same as transform then scale. Unfortunately it&#39;s not just a matter of adjusting the translate by the scale factor ...

	function posX(e) {
		return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
	}

	function posY(e) {
		return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
	}

	function placeThumbNail(e, container, x, y, scale) {
		var contX = posX(container);
		var contY = posY(container);
		var eX = posX(e);
		var eY = posY(e);
		var eW = e.offsetWidth;
		var eH = e.offsetHeight;

		var margin = 10;
		var dx = ((contX - eX) + margin + (x * eW * scale));
		var dy = ((contY - eY) + margin + (y * eH * scale));

		// assumes identical objects     
		var trans = &#39;translate(&#39; + dx + &#39;px, &#39; + dy + &#39;px) &#39;;
		var scale = &#39;scale(&#39; + scale + &#39;,&#39; + scale + &#39;) &#39;;
		e.style.MozTransform =  trans + scale ; 
	}

Even if it worked, the above would still require me to first move the element to the bottom of the page before running this code (to get rid of the whitespace), and furthermore I would need to recalculate the transform on re-size... so I wasn&#39;t too happy with this attempt to start with anyway.

Also note that if you use `scale + trans` vs `trans + scale` above the result is drastically different.

**Edit 3:** I figured out the placement issues... the transforms are applied in the order specified, and `scale(0.5,0.5)` essentially changes the size of a pixel to half what it was originally (probably hinting at how they implemented it internally). If I put translate is first, translating slightly less/more to account for the change in the position of the upper left corner caused by scale will do the trick, but managing the location of the objects and adjusting the transforms when the dom changes in a reasonable manner is still eluding me. This sort of feels wrong because I am drifting in the direction of writing my own layout manager in javascript just to get this effect.


Content Type	Original Author	Original Content on Stackoverflow
Question	knittl	View Question on Stackoverflow
Solution 1 - Css	Simone	View Answer on Stackoverflow
Solution 2 - Css	brandito	View Answer on Stackoverflow

How to reset CSS3 *-transform: translate(…)?

Css Problem Overview

Say I have:

Css Solutions

Solution 1 - Css

Solution 2 - Css

Pass object to javascript function

CSS3 property webkit-overflow-scrolling:touch ERROR

Attributions