The JavaScript style names are `WebkitTransformOrigin` and [`WebkitTransform`][1]

    element.style.webkitTransform = &quot;rotate(-2deg)&quot;;

Check the DOM extension reference for WebKit [here][2].

  [1]: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariJSRef/WebKitCSSTransformValue/WebKitCSSTransformValue.html
  [2]: https://developer.apple.com/documentation/webkitjs


Here are the JavaScript notations for most common vendors:

    webkitProperty
    MozProperty
    msProperty
    OProperty
    property

I reset inline transform styles like:

    element.style.webkitTransform = &quot;&quot;;
    element.style.MozTransform = &quot;&quot;;
    element.style.msTransform = &quot;&quot;;
    element.style.OTransform = &quot;&quot;;
    element.style.transform = &quot;&quot;;

And like this using jQuery:

    $(element).css({
        &quot;webkitTransform&quot;:&quot;&quot;,
        &quot;MozTransform&quot;:&quot;&quot;,
        &quot;msTransform&quot;:&quot;&quot;,
        &quot;OTransform&quot;:&quot;&quot;,
        &quot;transform&quot;:&quot;&quot;
    });

See blog post *[Coding Vendor Prefixes with JavaScript][1]* (2012-03-21).

  [1]: http://www.developerdrive.com/2012/03/coding-vendor-prefixes-with-javascript/


Try using

    img.style.webkitTransform = &quot;rotate(60deg)&quot;

If you want to do it via `setAttribute` you would change the `style` attribute like so:

    element.setAttribute(&#39;style&#39;,&#39;transform:rotate(90deg); -webkit-transform: rotate(90deg)&#39;) //etc

This would be helpful if you want to reset all other inline style and only set your needed style properties&#39; values again, BUT in most cases you may not want that. That&#39;s why everybody advised to use this:

    element.style.transform = &#39;rotate(90deg)&#39;;
    element.style.webkitTransform = &#39;rotate(90deg)&#39;;

The above is equivalent to

    element.style[&#39;transform&#39;] = &#39;rotate(90deg)&#39;;
    element.style[&#39;-webkit-transform&#39;] = &#39;rotate(90deg)&#39;;

**To animate your 3D object, use the code:**  

    &lt;script&gt;
    
    $(document).ready(function(){
	
		var x = 100;
		var y = 0;
	setInterval(function(){
		x += 1;
		y += 1;
		var element = document.getElementById(&#39;cube&#39;);
		element.style.webkitTransform = &quot;translateZ(-100px) rotateY(&quot;+x+&quot;deg) rotateX(&quot;+y+&quot;deg)&quot;; //for safari and chrome
		element.style.MozTransform = &quot;translateZ(-100px) rotateY(&quot;+x+&quot;deg) rotateX(&quot;+y+&quot;deg)&quot;; //for firefox
	},50);
	//for other browsers use:   &quot;msTransform&quot;,    &quot;OTransform&quot;,    &quot;transform&quot;

    });

    &lt;/script&gt;

I hope that in this post, I can get people&#39;s opinions on best practices for the interface between JSF pages and backing beans.

One thing that I never can settle on is the structure of my backing beans. Furthermore, I have never found a good article on the subject.

What properties belong on which backing beans? When is it appropriate to add more properties to a given bean as opposed to creating a new bean and adding the properties onto it? For simple applications, does it make sense to just have a single backing bean for the whole page, considering the complexity involved with injecting one bean into another? Should the backing bean contain any actual business logic, or should it strictly contain data? 

Feel free to answer these questions and any others that may come up.

&lt;hr /&gt;

As for reducing coupling between the JSF page and the backing bean, I never allow the JSF page to access any backing bean property&#39;s properties. For example, I never allow something such as:

    &lt;h:outputText value=&quot;#{myBean.anObject.anObjectProperty}&quot; /&gt;

I always require something like:

    &lt;h:outputText value=&quot;#{myBean.theObjectProperty}&quot; /&gt;
with a backing bean value of:

    public String getTheObjectProperty()
    {
        return anObject.getAnObjectProperty();
    }

When I loop over a collection, I use a wrapper class to avoid drilling down into an object in a data table, for instance. 

In general, this approach feels &quot;right&quot; to me. It avoids any coupling between the view and the data. Please correct me if I&#39;m wrong.

JSF backing bean structure (best practices)

    int fn();
    
    void whatever()
    {
        (void) fn();
    }

Is there any reason for casting an unused return value to void, or am I right in thinking it&#39;s a complete waste of time?



Why cast unused return values to void?

I want to change the `-webkit-transform: rotate()` property using JavaScript dynamically, but the commonly used `setAttribute` is not working:

    img.setAttribute(&#39;-webkit-transform&#39;, &#39;rotate(60deg)&#39;);

The `.style` is not working either...

How can I set this dynamically in JavaScript?

How to set the style -webkit-transform dynamically using JavaScript?

I want to change the <code>-webkit-transform: rotate()</code> property using JavaScript dynamically, but the commonly used <code>setAttribute</code> is not working:
<pre><code class="hljs language-css">img.setAttribute('-webkit-transform', 'rotate(60deg)');
</code></pre>
The <code>.style</code> is not working either...
How can I set this dynamically in JavaScript?

I&#39;m trying to find a way that will add / update attribute using JavaScript.  I know I can do it with `setAttribute()` function but that doesn&#39;t work in IE.

How to add/update an attribute to an HTML element using JavaScript?

I&#39;m trying to figure out what&#39;s gone wrong with my json serializing, have the current version of my app with and old one and am finding some surprising differences in the way JSON.stringify() works (Using the JSON library from json.org).

In the old version of my app:

     JSON.stringify({&quot;a&quot;:[1,2]})

gives me this;

    &quot;{\&quot;a\&quot;:[1,2]}&quot;

in the new version, 

     JSON.stringify({&quot;a&quot;:[1,2]})

gives me this;

    &quot;{\&quot;a\&quot;:\&quot;[1, 2]\&quot;}&quot;

any idea what could have changed to make the same library put quotes around the array brackets in the new version?

JSON.stringify() array bizarreness with Prototype.js

I have a site that has an IE8-only problem:

The code is: 

    var w = window.open(urlstring, wname, wfeatures, &#39;false&#39;);

The error is:

&gt; Message: Invalid argument.  
&gt; Line: 419 
&gt; Char: 5  
&gt; Code: 0  
&gt; URI: http://HOSTNAME/js_context.js

I have confirmed the line number of the code (the &quot;Line&quot; and &quot;URI&quot; are correct), and I understand in later versions of IE8, this is considered accurate.

I have checked all the incoming parameters in the call by dumping alerts, and they all look valid.

This problem does not happen on FF (probably 3).

UPDATE:

The problem appears to be in using assigning the result of window.open() when doing &quot;var w&quot;. When I split the line into two statements it works in IE8.

UPDATE2: 

Based on: 

http://javascript.crockford.com/code.html

&gt; When a function is to be invoked
&gt; immediately, the entire invocation
&gt; expression should be wrapped in parens
&gt; so that it is clear that the value
&gt; being produced is the result of the
&gt; function and not the function itself.

This is not exactly what is going on here, but I found that applying the principle solved the problem, in IE8&#39;s compatability mode.

    var w = (window.open(urlstring, wname, wfeatures, false));



ie8 var w= window.open() - &quot;Message: Invalid argument.&quot;

I&#39;m pretty sure the answer is no, but thought I&#39;d ask anyway.

If my site references a scripted named &quot;whatever.js&quot;, is it possible to get &quot;whatever.js&quot; from within that script? Like:

    var scriptName = ???
    
    if (typeof jQuery !== &quot;function&quot;) {
    	throw new Error(
    		&quot;jQuery&#39;s script needs to be loaded before &quot; + 
    		scriptName + &quot;. Check the &lt;script&gt; tag order.&quot;);
    }

Probably more trouble than it&#39;s worth for dependency checking, but what the hell.

How might I get the script filename from within that script?

i feel like im trying to do something super simple, but just being stupid about it.

all i want to do is see if a variable has been set previously, and if it has NOT, set it with a default value....here is a sample:

    if(!embed_BackgroundColor) {
        var embed_BackgroundColor;
        embed_BackgroundColor = &quot;#F4F4F4&quot;;
    }

so, once you stop laughing at my code....WHY is it overwriting the variable no matter what?

please save my nerves;)

javascript: define a variable if it doesn&#39;t exist

I downloaded [Chromium](https://github.com/chromium/chromium)&#39;s code base and ran across the [WTF namespace](https://github.com/chromium/chromium/tree/master/third_party/blink/renderer/platform/wtf).

    namespace WTF {
        /*
         * C++&#39;s idea of a reinterpret_cast lacks sufficient cojones.
         */
        template&lt;typename TO, typename FROM&gt;
        TO bitwise_cast(FROM in)
        {
            COMPILE_ASSERT(sizeof(TO) == sizeof(FROM), WTF_wtf_reinterpret_cast_sizeof_types_is_equal);
            union {
                FROM from;
                TO to;
            } u;
            u.from = in;
            return u.to;
        }
    } // namespace WTF

Does this mean what I think it means? Could be so, the `bitwise_cast` implementation specified here will not compile if either `TO` or `FROM` is not a [POD](http://en.wikipedia.org/wiki/Plain_Old_Data_Structures) and is not (AFAIK) more powerful than C++ built in `reinterpret_cast`.

The only point of light I see here is the nobody seems to be using `bitwise_cast` in the Chromium project.


WTF does WTF represent in the WebKit code base?

I have some elements in my iPhone website that don&#39;t have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting. 

I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier? 

Disable the text-highlighting magnifier on touch-hold on Mobile Safari / Webkit

I&#39;m trying to simulate a keyboard event in Safari using JavaScript.

I have tried this:

    var event = document.createEvent(&quot;KeyboardEvent&quot;);
    event.initKeyboardEvent(&quot;keypress&quot;, true, true, null, false, false, false, false, 115, 0);

...and also this:

    var event = document.createEvent(&quot;UIEvents&quot;);
    event.initUIEvent(&quot;keypress&quot;, true, true, window, 1);
    event.keyCode = 115;

After trying both approaches, however, I have the same problem: after the code has been executed, the `keyCode`/`which` properties of the event object are set to `0`, not `115`.

Does anyone know how to reliably create and dispatch a keyboard event in Safari? (I&#39;d prefer to achieve it in plain JavaScript if possible.)


Firing a Keyboard Event in Safari, using JavaScript

I&#39;m aware of [this question][1], but none of the answers work in Safari, Chrome, etc.

The accepted strategy ([as demonstrated here][2]) is to set the tbody height and overflow properties like so:

    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;&lt;th&gt;This is the header and doesn&#39;t scroll&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody style=&quot;height:100px; overflow:auto;&quot;&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;content that scrolls&lt;/td&gt;&lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;

Unfortunately, this does not work in any webkit browsers.  There is a [bug report][3] about it that doesn&#39;t seem to be a high priority (reported June 05).

So my question is: are there alternate strategies that do actually work?  I&#39;ve tried the two-table approach, but it&#39;s impossible to guarantee that the header will line up with the content.  Do I just have to wait for Webkit to fix it?


  [1]: https://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put
  [2]: http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html
  [3]: https://bugs.webkit.org/show_bug.cgi?id=3239

Make TBODY scrollable in Webkit browsers

When an HTML element is &#39;focused&#39; (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.

For the layout I am working on, this is distracting and does not look right.

    &lt;input type=&quot;text&quot; name=&quot;user&quot; class=&quot;middle&quot; id=&quot;user&quot; tabindex=&quot;1&quot; /&gt;

Firefox does not seem to do this, or at least, will let me control it with:

    border: x;

If someone can tell me how IE performs, I would be curious. 

Getting Safari to remove this little bit of flare would be nice.

Content Type	Original Author	Original Content on Stackoverflow
Question	rymn	View Question on Stackoverflow
Solution 1 - Javascript	Ólafur Waage	View Answer on Stackoverflow
Solution 2 - Javascript	Armel Larcier	View Answer on Stackoverflow
Solution 3 - Javascript	Andrei Serdeliuc ॐ	View Answer on Stackoverflow
Solution 4 - Javascript	thednp	View Answer on Stackoverflow
Solution 5 - Javascript	Dhruv Dholakia	View Answer on Stackoverflow

How to set the style -webkit-transform dynamically using JavaScript?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Why cast unused return values to void?

JSF backing bean structure (best practices)

Attributions