Set the [**`outline` property**][1] to `0px solid transparent;`. You might have to set it on the `:focus` state as well, for example:

    [contenteditable]:focus {
        outline: 0px solid transparent;
    }


  [1]: http://w3schools.com/cssref/pr_outline.asp

You can also add the `:read-write` pseudo-class to style elements that are editable.

For instance *([jsFiddle][1])*:

    .element:read-write:focus {
         outline: none;
    }


Read more [here on codrops][2].

&gt; The `:read-write` pseudo-class selector is supported in Chrome, Safari, and Opera 14+, and on iOS.
It is supported with the `-moz-` prefix in Firefox in the form `:-moz-read-write`.
The `:read-write` selector is not supported in Internet Explorer and on Android.


  [1]: http://jsfiddle.net/morkro/o5f25psf/
  [2]: http://tympanus.net/codrops/css_reference/read-write/

I want to populate my dropdowns with enum possible values from a DB automatically. Is this possible in MySQL?

How can I get enum possible values in a MySQL database?

In my android application I want the standard/basic title bar to change color.

To change the text color you have `setTitleColor(int color)`, is there a way to change the background color of the bar?

Set title background color

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn&#39;t look very nice. The border isn&#39;t there when focus is somewhere else.  
How do I remove that border?

Thanks

How do I remove the border around a focused contenteditable pre?

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else. 
How do I remove that border?
Thanks

How can you detect that a user swiped his finger in some direction over a web page with JavaScript?

I was wondering if there was one solution that would work for websites on both the iPhone and an Android phone.

Detect a finger swipe through JavaScript on the iPhone and Android

Given a simple zero based, numerically indexed array:

    var list = [&#39;Foo&#39;, &#39;Bar&#39;, &#39;Baz&#39;];

Many times, I have noticed that when someone suggests looping through variables in an array like this:

    for(var item in list) { ... }

...there&#39;s almost certainly someone suggesting that that&#39;s bad practice and suggests an alternative approach:

    var count = list.length;
   
    for(var i = 0; i &lt; count; i++) {
        var item = list[i];
        ...
    }

What&#39;s the reasoning for not using the simpler version above and to use the second example instead?

Why is &#39;for(var item in list)&#39; with arrays considered bad practice in JavaScript?

    &lt;script type=&quot;text/javascript&quot;&gt;
        /* ... */
    &lt;/script&gt;

vs.

    &lt;script language=&quot;Javascript&quot;&gt;
        /* ... */
    &lt;/script&gt;

Which should be used and why?

Or, the third alternative: omitting either of these, such as the example code in jQuery&#39;s API reference:

    &lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;

HTML Script tag: type or language (or omit both)?

How does one use [Chrome desktop notifications][1]? I&#39;d like that use that in my own code.

**Update**: Here&#39;s [a blog post][2] explaining webkit notifications with an example.


  [1]: http://techcrunch.com/2009/09/01/chrome-is-gaining-desktop-notifications/
  [2]: http://0xfe.blogspot.com/2010/04/desktop-notifications-with-webkit.html

Chrome desktop notification example

Why does the following work?

    &lt;something&gt;.stop().animate(
        { &#39;top&#39; : 10 }, 10
    );

Whereas this doesn&#39;t work:

    var thetop = &#39;top&#39;;
    &lt;something&gt;.stop().animate(
        { thetop : 10 }, 10
    );

To make it even clearer: At the moment I&#39;m not able to pass a CSS property to the animate function as a variable.


How to use a variable for a key in a JavaScript object literal?

I&#39;m using the following jquery code to show a contextual delete button only for table rows we are hovering with our mouse. This works but not for rows that have been added with js/ajax on the fly...

Is there a way to make this work with live events?

    $(&quot;table tr&quot;).hover(
      function () {},
      function () {}
    );

jquery live hover

I am wondering if there is a way to have &quot;OR&quot; logic in jQuery selectors. For example, I know an element is either a descendant of an element with class classA or classB, and I want to do something like `elem.parents(&#39;.classA or .classB&#39;)`. Does jQuery provide such functionality?

jQuery OR Selector?

This may be a simple answer, but I&#39;m using jQuery&#39;s $.ajax to call a PHP script. What I want to do is basically put that PHP script inside a function and call the PHP function from javascript. 

    &lt;?php 
    if(isset($_POST[&#39;something&#39;] {
        //do something
    }
    ?&gt;

to this

    &lt;?php
    function test() {
        if(isset($_POST[&#39;something&#39;] {
             //do something. 
        }
    }
    ?&gt;

How would i call that function in javascript? Right now i&#39;m just using $.ajax with the PHP file listed. 

using jquery $.ajax to call a PHP function

I can set a radio button to checked fine, but what I want to do is setup a sort of &#39;listener&#39; that activates when a certain radio button is checked. 

**Take, for example the following code:** 

    $(&quot;#element&quot;).click(function()
    { 
        $(&#39;#radio_button&#39;).attr(&quot;checked&quot;, &quot;checked&quot;);
    });

it adds a checked attribute and all is well, but how would I go about
adding an alert. For example, that pops up when the radio button is checked
without the help of the click function?


Find out whether radio button is checked with JQuery?

I have a `&lt;div contenteditable=true&gt;` where I define by a WYSIWYG some elements. For example `&lt;p&gt;`,`&lt;h1&gt;`, etc.  I would like to directly put the focus on one of these elements. 

For example on `&lt;p id=&quot;p_test&quot;&gt;`. But it seems that `focus()` function doesn&#39;t work on `&lt;div&gt;` elements, `&lt;p&gt;` elements... 

Is there another means to define the focus in my case?

Set focus on div contenteditable element

I have a contenteditable div where I need to insert text at the caret position,

This can be easily done in IE by &lt;code&gt; document.selection.createRange().text = &quot;banana&quot; &lt;/code&gt;

Is there a similar way of implementing this in Firefox/Chrome?

(I know a solution exists [here][1] , but it can&#39;t be used in contenteditable div, and looks clumsy)

Thank you!


  [1]: https://stackoverflow.com/questions/1621931/insert-text-on-the-current-place-of-the-cursor-in-the-browser/1884285#1884285

Insert text at cursor in a content editable div

I&#39;m finding tons of good, cross-browser answers on how to _set_ the caret position in a `contentEditable` element, but none on how to _get_ the caret position in the first place.

What I want to do is know the caret position within a div on `keyup`. So, when the user is typing text, I can, at any point, know the caret position within the `contentEditable` element.

    &lt;div id=&quot;contentBox&quot; contentEditable=&quot;true&quot;&gt;&lt;/div&gt;

    $(&#39;#contentbox&#39;).keyup(function() { 
        // ... ? 
    });

Get contentEditable caret position

I have been looking high and low for an answer but failed.

Is there a cross-browser solution to replace selected text in *contenteditable* div? &lt;br&gt;
I simply want users to highlight some text and replace the highlighted text with `xxxxx`.


replace selected text in contenteditable div

output in &lt;strong&gt;Chrome&lt;/strong&gt;:

    &lt;div id=&quot;content&quot; contenteditable=&quot;true&quot; style=&quot;border:1px solid #000;width:500px;height:40px;&quot;&gt;
        hey
        &lt;div&gt;what&#39;s up?&lt;/div&gt;
    &lt;div&gt;
    &lt;button id=&quot;insert_caret&quot;&gt;&lt;/button&gt;

I believe in &lt;strong&gt;FF&lt;/strong&gt; it would look something like this:

    hey
    &lt;br /&gt;
    what&#39;s up?

and in &lt;strong&gt;IE&lt;/strong&gt;:

    hey
    &lt;p&gt;what&#39;s up?&lt;/p&gt;

unfortunately, there is no nice way of making it so that every browser inserts a `&lt;br /&gt;` instead of a div- or p-tag, or at least I couldn&#39;t find anything online.

&lt;hr&gt;

ANYWAY, what I am trying to do now is, when I hit the &lt;strong&gt;button&lt;/strong&gt;, I want the caret to be set at the end of the text, so it should look something like this:

    hey
    what&#39;s up?|

any way to do this so it works in &lt;strong&gt;all browser&lt;/strong&gt;?

example:

    $(document).ready(function()
    {
        $(&#39;#insert_caret&#39;).click(function()
        {
            var ele = $(&#39;#content&#39;);
            var length = ele.html().length;

            ele.focus();

            //set caret -&gt; end pos
         }
     }

Content Type	Original Author	Original Content on Stackoverflow
Question	Christoffer	View Question on Stackoverflow
Solution 1 - Javascript	Marius	View Answer on Stackoverflow
Solution 2 - Javascript	morkro	View Answer on Stackoverflow

How do I remove the border around a focused contenteditable pre?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Set title background color

How can I get enum possible values in a MySQL database?

Attributions