Your first attempt failed because it was a CSS property and not an attribute (part of the `style` attribute). 

Your second attempt failed because for some off reason, when making this API `casing-like-this` gets converted to `camelCasingLikeThis` . This is _likely_ because the folks who built JavaScript and the folks who built CSS weren&#39;t very well coordinated.

The following should work:

    document.getElementById(&quot;div&quot;).style.pointerEvents = &quot;none&quot;;

You can access style properties via [Bracket notation][1] like this:

    document.getElementById(&quot;div&quot;).style[&#39;pointer-events&#39;] = &#39;auto&#39;;

No need in camel case modification in this case. 


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation

There is an [example][1] in a [book][2] which uses `element.setAttributeNS(null, &quot;pointer-events&quot;, &quot;none&quot;);` instead of using `element.style.pointer-events = &quot;none&quot;;`.


  [1]: http://granite.sru.edu/~ddailey/svg/B/bbox2.3.svg
  [2]: https://www.safaribooksonline.com/library/view/building-web-applications/9780735675742/

I have a matrix in R like this:

    |1|2|3|
    |1|2|3|
    |1|2|3|

Is there an easy way to rotate the entire matrix by 90 degrees clockwise to get these results?

    |1|1|1|
    |2|2|2|
    |3|3|3|

and again rotating 90 degrees:

    |3|2|1|
    |3|2|1|
    |3|2|1|

?

Rotate a Matrix in R by 90 degrees clockwise

    &lt;html ng-app=&quot;app&quot;&gt;
    &lt;head&gt;
    ...
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;header&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;notification&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
With the given structure of the app (derived from angular-app):

* header: Here the site navigation, login/out toolbar etc comes in. This is dynamic and has it&#39;s own Controller
* notification: Global notification container. 
* container: This used to be my `&lt;ng-view&gt;`. So this is where all other modules loads in.
* footer: Global footer.

How do the state hierarchy looks like? I&#39;ve gone through the example which shows a single module (contacts) but typically an app would have a global (root) state and inside the root state other module states are rendered.

What I&#39;m thinking is my `app` module probably  have the `root` state and then each module should have it&#39;s own state and I have to *inherit* from `root` state. Am I right?

Also from `ui-state` example, they have used both `$routeProvider` and `$urlRouterProvider` as well as `$stateProvider` has url defined. My understand was `$stateProvide` also handles routing. If I&#39;m wrong, which provider should I use for routing?

**EDIT**: http://plnkr.co/edit/wqKsKwFq1nxRQ3H667LU?p=preview

Thanks!

angularjs ui-router - how to build master state which is global across app

I am trying to set `pointer-events: none` for a div through JavaScript, however the property is not being applied.

I have tried:

    document.getElementById(&quot;div&quot;).setAttribute(&quot;pointer-events&quot;, &quot;none&quot;);

And:

    document.getElementById(&quot;div&quot;).style.pointer-events = &quot;none&quot;;

But neither worked, **any ideas?**

JavaScript setting pointer-events

I am trying to set <code>pointer-events: none</code> for a div through JavaScript, however the property is not being applied.
I have tried:
<pre><code class="hljs language-javascript">document.getElementById("div").setAttribute("pointer-events", "none");
</code></pre>
And:
<pre><code class="hljs language-ini">document.getElementById("div").style.pointer-events = "none";
</code></pre>
But neither worked, any ideas?

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?

Chrome Dev Tools - Modify javascript and reload

If you prefer to see the question in working code, start here: http://jsbin.com/ayigub/2/edit

Consider this almost equivalent ways to write a simple direcive:
    
    app.directive(&quot;drinkShortcut&quot;, function() {
      return {
        scope: { flavor: &#39;@&#39;},
        template: &#39;&lt;div&gt;{{flavor}}&lt;/div&gt;&#39;
      };
    });

    app.directive(&quot;drinkLonghand&quot;, function() {
      return {
        scope: {},
        template: &#39;&lt;div&gt;{{flavor}}&lt;/div&gt;&#39;,
        link: function(scope, element, attrs) {
          scope.flavor = attrs.flavor;
        }
      };
    });

When used by themselves, the two directives work and behave identically:
      
      &lt;!-- This works --&gt;
      &lt;div drink-shortcut flavor=&quot;blueberry&quot;&gt;&lt;/div&gt;
      &lt;hr/&gt;

      &lt;!-- This works --&gt;
      &lt;div drink-longhand flavor=&quot;strawberry&quot;&gt;&lt;/div&gt;
      &lt;hr/&gt;

However, when used within an ng-repeat, only the shortcut version works:

      &lt;!-- Using the shortcut inside a repeat also works --&gt;
      &lt;div ng-repeat=&quot;flav in [&#39;cherry&#39;, &#39;grape&#39;]&quot;&gt;
        &lt;div drink-shortcut flavor=&quot;{{flav}}&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;hr/&gt;
      
      &lt;!-- HOWEVER: using the longhand inside a repeat DOESN&#39;T WORK --&gt;      
      &lt;div ng-repeat=&quot;flav in [&#39;cherry&#39;, &#39;grape&#39;]&quot;&gt;
        &lt;div drink-longhand flavor=&quot;{{flav}}&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      
My questions are:

1. Why does the longhand version not work inside an ng-repeat?
2. How could you make the longhand version work inside an ng-repeat?

Using a directive inside an ng-repeat, and a mysterious power of scope &#39;@&#39;

In my Stackoverflow folder, I have `stackoverflow.ico` and 2 bellow files. When importing it to Chrome, it shows the icon in address bar, but when I click on it, Chrome doesn&#39;t open any new tab. What am I doing wrong?

**manifest.json**

    {
      &quot;name&quot;: &quot;Stackoverflow&quot;,
      &quot;version&quot;: &quot;1&quot;,
      &quot;browser_action&quot;:
      {
        &quot;default_icon&quot;: &quot;stackoverflow.ico&quot;
      },
      &quot;background&quot;:
      {
        &quot;page&quot;: &quot;index.html&quot;
      },
      &quot;permissions&quot;: [&quot;tabs&quot;],
      &quot;manifest_version&quot;: 2
    }
**index.html**

    &lt;html&gt;
      &lt;head&gt;
        &lt;script&gt;
          chrome.browserAction.onClicked.addListener(function(activeTab)
          {
            var newURL = &quot;http://stackoverflow.com/&quot;;
            chrome.tabs.create({ url: newURL });
          });
        &lt;/script&gt;
      &lt;/head&gt;
    &lt;/html&gt;

Chrome extension: How to open a link in new tab?

I want to upload a csv file and process the data inside that file. What is the best method to do so? I prefer not to use php script. I did the following steps. But this method only returns the file name instead of file path.So i didnt get the desired output. 

    &lt;form id=&#39;importPfForm&#39;&gt;
    &lt;input type=&#39;file&#39; name=&#39;datafile&#39; size=&#39;20&#39;&gt;
    &lt;input type=&#39;button&#39; value=&#39;IMPORT&#39; onclick=&#39;importPortfolioFunction()&#39;/&gt;
    &lt;/form&gt;
    
    function importPortfolioFunction( arg ) {
        var f = document.getElementById( &#39;importPfForm&#39; );
        var fileName= f.datafile.value;   
    }

So how can i get the data inside that file?

get the data of uploaded file in javascript

How can I use modulo operator (%) in calculation of numbers for JavaScript projects?

How can I use modulo operator (%) in JavaScript?

I&#39;ve got this html:

    &lt;p&gt;
        &lt;span class=&quot;fancify&quot;&gt;Parting is such sweet sorrow!&lt;/span&gt;&lt;span&gt; - Bill Rattleandrollspeer&lt;/span&gt;
    &lt;/p&gt;

...and this css (added to the bottom of Site.css):

    .fancify {
        font-size: 1.5em;
        font-weight: 800;
        font-family: Consolas, &quot;Segoe UI&quot;, Calibri, sans-serif;
        font-style: italic;
    }

So, I would expect the quote (&quot;Parting is such sweet sorrow!&quot;) to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class &quot;fancify&quot; attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.

What rookie mistake am I making now?

UPDATE
------

I thought maybe the problem was that I had added the new class in Site.css following this section in that file:

    /********************
    *   Mobile Styles   *
    ********************/
    @media only screen and (max-width: 850px) {

...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.

I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...

UPDATE 2
--------

Here&#39;s how the HTML is coming down:

    &lt;p&gt;
    	&lt;span&gt;
    		&lt;label class=&quot;fancify&quot;&gt;Parting is such sweet sorrow!&lt;/label&gt;

...and here&#39;s my css rule in Site.css:

    p span label .fancify {
            font-size: 1.5em;
            font-weight: 800;
            font-family: Consolas, &quot;Segoe UI&quot;, Calibri, sans-serif;
            font-style: italic;
            display: inline;
        }

...but it&#39;s not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.

Why is my CSS style not being applied?

So, it is possible to have reverse animation on mouse out such as:

    .class{
       transform: rotate(0deg);
    
    }
    .class:hover{
       transform: rotate(360deg);
    }

but, when using @keyframes animation, I couldn&#39;t get it to work, e.g:

    .class{
       animation-name: out;
       animation-duration:2s;
    
    }
    .class:hover{
       animation-name: in;
       animation-duration:5s;
       animation-iteration-count:infinite;
    
    }
    @keyframe in{
        to {transform: rotate(360deg);}
    }
    
    @keyframe out{
        to {transform: rotate(0deg);}
    }

What is the optimal solution, knowing that I&#39;d need iterations and animation itself?

http://jsfiddle.net/khalednabil/eWzBm/

How to reverse an animation on mouse out after hover

I am using Select2 3.3.2

I have very very long options in the select.
Example:


    &lt;select id=&quot;e1&quot;&gt;
    &lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;very long long long text&lt;/option&gt;
    &lt;option value=&quot;WY&quot;&gt;very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text&lt;/option&gt;
    &lt;/select&gt;

The purpose is to avoid wrapping of the options when the dropdown opens up.

I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).

But to keep the input with short width when the dropdown is closed (for example 300px).

I followed this [&quot;Add option to set dropdown width&quot;](https://github.com/ivaynberg/select2/issues/328) issue of select2.

But I couldn&#39;t get it to work, the width of the options/dropdown is the same as the input&#39;s width and the options as wrapped to multiple lines.

Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/

Thank you all in advance for helping.



select2 - Setting different width to input and dropdown

Is there any way to make an expression for something like [`ng-class`][1] to be a conditional?

For example, I have tried the following:

    &lt;span ng-class=&quot;{test: &#39;obj.value1 == \&#39;someothervalue\&#39;&#39;}&quot;&gt;test&lt;/span&gt;

The issue with this code is that no matter what `obj.value1` is, the class test is always applied to the element. Doing this:

    &lt;span ng-class=&quot;{test: obj.value2}&quot;&gt;test&lt;/span&gt;

As long as `obj.value2` does not equal a truthy value, the class in not applied.  Now I can work around the issue in the first example by doing this:

    &lt;span ng-class=&quot;{test: checkValue1()}&quot;&gt;test&lt;/span&gt;

Where the `checkValue1` function looks like this:

    $scope.checkValue1 = function() {
      return $scope.obj.value === &#39;somevalue&#39;;
    }

I am just wondering if this is how `ng-class` is supposed to work.  I am also building a custom directive where I would like to do something similar to this. However, I can&#39;t find a way to watch an expression (and maybe that is impossible and the reason why it works like this).

Here is a [plnkr][2] to show what I mean.


  [1]: https://docs.angularjs.org/api/ng/directive/ngClass
  [2]: http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

AngularJS ngClass conditional

I&#39;m trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the `position:absolute` for the second level of the navigation, I don&#39;t get the width of the first level. Removing the position:absolute will move all following elements on hover...

How can I solve this?

Here is the code:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .level_1 &gt; li {
      float: left;
      width: 45%;
      background-color: #2FA4CF;
      margin-right: 6px;
    }

    .level_1 &gt; li:hover ul {
      display: block;
    }

    .level_2 {
      display: none;
      position: absolute;
      width: 45%;
    }

    .level_2 li {
      background-color: #535B68;
    }

&lt;!-- language: lang-html --&gt;

    &lt;ul class=&quot;level_1&quot;&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;Level one (1)&lt;/a&gt;
        &lt;ul class=&quot;level_2&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level two (1)&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level one (2)&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;p&gt;Paragraph&lt;/p&gt;

&lt;!-- end snippet --&gt;

See the result here: http://jsfiddle.net/5uf2Y/
Hover &quot;Level one (1)&quot; and you will see, that the second level is not the same size like the first level...



Content Type	Original Author	Original Content on Stackoverflow
Question	user1334130	View Question on Stackoverflow
Solution 1 - Javascript	Benjamin Gruenbaum	View Answer on Stackoverflow
Solution 2 - Javascript	aleha	View Answer on Stackoverflow
Solution 3 - Javascript	Behnood	View Answer on Stackoverflow

JavaScript setting pointer-events

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

angularjs ui-router - how to build master state which is global across app

Rotate a Matrix in R by 90 degrees clockwise

Attributions