I found out how.

You use the contentEditable property of the DOMElement, like so

    &lt;div onClick=&quot;this.contentEditable=&#39;true&#39;;&quot;&gt;
        lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
    &lt;/div&gt;

You can do this in pure HTML

    &lt;div class=&quot;editable&quot; contenteditable=&quot;true&quot;&gt;
        Editable text...
    &lt;/div&gt;

Hope this helps!


Set [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable) property of the element to `&quot;true&quot;`:

    element.contentEditable = &quot;true&quot;;


See also:

- [Content Editable MDN docs](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable)
- [Browser support on caniuse.com](http://caniuse.com/#feat=contenteditable)

    How about his: 
Make a hidden &quot;textArea&quot; , and upon selecting(clicking or Hover) the div , hide the Div and  Show the textArea .

How can i use the server.mappath method in a C# class library class ,which acts as my BusinessLayer for My ASP.NET WEbsite

Server.Mappath in C# classlibrary

As title, any convenient way?

I especially need it for some cvs/git commit or sendmail to load a template comment. I think it is a vi environment, not Vim.

How to load another file&#39;s content to the current file in Vim?

Do you know how to make a `&lt;div&gt;` editable with JavaScript? I&#39;m looking for cross-browser solution.

Something similar to a rich text area, but that uses an editable `&lt;iframe&gt;`. I need something similar for a `&lt;div&gt;`.   
*I don&#39;t want to use a replacement textbox.*

How to make an HTML &lt;div&gt; element editable cross-browser?

Do you know how to make a <code>&#x3C;div></code> editable with JavaScript? I'm looking for cross-browser solution.
Something similar to a rich text area, but that uses an editable <code>&#x3C;iframe></code>. I need something similar for a <code>&#x3C;div></code>. 
I don't want to use a replacement textbox.

I have a pageLoad function that sets some CSS on a .ascx control that I cannot change. On page load everything is fine, but when an update panel updates the control, my CSS is no longer applied. How can I rerun my function after the page updates?

     $(function() {
            $(&quot;textarea&quot;).attr(&quot;cols&quot;, &quot;30&quot;);
            $(&quot;input.tbMarker&quot;).css({ &quot;width&quot;: &quot;100px&quot; }).attr(&quot;cols&quot;,&quot;25&quot;);
        });

This obviously only runs on the initial page load. How can I run it after an update?


How can I run some javascript after an update panel refreshes?

I have some JavaScript code that looks like:

    function statechangedPostQuestion()
    {
      //alert(&quot;statechangedPostQuestion&quot;);
      if (xmlhttp.readyState==4)
      {
        var topicId = xmlhttp.responseText;
    	setTimeout(&quot;postinsql(topicId)&quot;,4000);
      }
    }

    function postinsql(topicId)
    {
      //alert(topicId);
    }

I get an error that `topicId` is not defined
Everything was working before I used the `setTimeout()` function.

I want my `postinsql(topicId)` function to be called after some time.
What should I do?

How can I pass a parameter to a setTimeout() callback?

I have a `select` form field that I want to mark as &quot;readonly&quot;, as in the user cannot modify the value, but the value is still submitted with the form.  Using the `disabled` attribute prevents the user from changing the value, but does not submit the value with the form.

The `readonly` attribute is only available for `input` and `textarea` fields, but that&#39;s basically what I want.  Is there any way to get that working?

Two possibilities I&#39;m considering include:

* Instead of disabling the `select`, disable all of the `option`s and use CSS to gray out the select so it looks like its disabled.
* Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.

How to ensure a &lt;select&gt; form field is submitted when it is disabled?

I dynamically load an iframe with JavaScript. After it&#39;s loaded, how can I make it scroll down a specific number of pixels (ie. after the page in the iframe has loaded, how can I make the iframe scroll by itself to the a specified region of the page?)

Scrolling an iframe with JavaScript?

JavaScript code I&#39;m starting with:  

    function doSomething(url) {  
       $.ajax({
          type: &quot;GET&quot;,  
          url: url,  
          dataType: &quot;xml&quot;,  
	      success: rssToTarget  
       });  
    }    

Pattern I would like to use:

    //where elem is the target that should receive new items via DOM (appendChild)
    function doSomething(url, elem) {
       $.ajax({
          type: &quot;GET&quot;,
          url: url,
          dataType: &quot;xml&quot;,
	      success: rssToTarget(elem)
       });
    }  

I don&#39;t think I can get the callback to work this way, right? What is the proper pattern? I don&#39;t want to use global variables necessarily to temporarily hold the `elem` or elem name.

jQuery / Ajax - $.ajax() Passing Parameters to Callback - Good Pattern to Use?

I would like to use dynamic text as background of certain elements in my tag. Because of this, I can use images (dynamic text). How do I do it with just CSS or JavaScript?

Is there a way to use use text as the background with CSS?

I tried to load some scripts into a page using `innerHTML` on a `&lt;div&gt;`. It appears that the script loads into the DOM, but it is never executed (at least in Firefox and Chrome). Is there a way to have scripts execute when inserting them with `innerHTML`?

Sample code:

    

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;body onload=&quot;document.getElementById(&#39;loader&#39;).innerHTML = &#39;&lt;script&gt;alert(\&#39;hi\&#39;)&lt;\/script&gt;&#39;&quot;&gt;
        Shouldn&#39;t an alert saying &#39;hi&#39; appear?
        &lt;div id=&quot;loader&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;



Can scripts be inserted with innerHTML?

What CSS is required to make the browser&#39;s vertical scrollbar remain visible when a user visits a web page (when the page hasn&#39;t enough content to trigger the scrollbar&#39;s activation)?

Making the main scrollbar always visible

I have a little peculiar problem that I currently solve using a `table`, see below.  Basically, I want to have two divs take up 100% of the available width, but only take up as much vertical space as needed (which isn&#39;t really that obvious from the picture).  The two should at all times have the exact same height with a little line between them, as shown.

[![alt text][1]][1]  
&lt;sub&gt;(source: [pici.se](http://pici.se/pictures/qJRMtoLPv.png))&lt;/sub&gt;  


  [1]: https://i.stack.imgur.com/kNr6b.png

This is all very easy to do using `table`, which I&#39;m currently doing. However, I&#39;m not too keen on the solution, as semantically this is not actually a table.

HTML/CSS: Making two floating divs the same height

I&#39;m re-asking [this question][1] because its answers didn&#39;t work in my case.

In my stylesheet for printed media I want to append the url after every link using the `:after` pseudo-class.

    a:after {
        content: &quot; &lt;&quot; attr(href) &quot;&gt;&quot;;
        text-decoration: none;
        color: #000000;
    }

In Firefox (and probably Chrome but not IE8), `text-decoration: none` is ignored, and the underline stretches unattractively across the bottom of the url. The `color` however is correctly set to black for the url. Is there a way to make the `text-decoration` work?

The [original question][1] appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I&#39;m still looking for a solution when the content is variable width text.


  [1]: https://stackoverflow.com/questions/1180910/text-decoration-and-the-after-pseudo-element

“text-decoration” and the “:after” pseudo-element, revisited

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:

[![][1]][1]


  [1]: http://i.stack.imgur.com/zYrB7.jpg

How to get the browser viewport dimensions?

I have some JavaScript code that works in IE containing the following:

    myElement.innerText = &quot;foo&quot;;

However, it seems that the &#39;innerText&#39; property does not work in Firefox.  Is there some Firefox equivalent?  Or is there a more generic, cross browser property that can be used?

&#39;innerText&#39; works in IE, but not in Firefox

On IE I can do this with the (terribly non-standard, but working) jQuery

    if ($.browser.msie)
        $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

But is it possible to do in a way which works on Firefox, or in a cross-browser way for a bonus?

For the record:

    $(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

does nothing.

    $(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

solves the problem, but renders the backspace key unusable on the page, which is even worse than the original behaviour.

EDIT:
The reason I do this is that I&#39;m not creating a simple web page but a large application. It is incredibly annoying to lose 10 minutes of work just because you pressed backspace in the wrong place. The ratio of preventing mistakes vs. annoying users should be way above 1000/1 by preventing the backspace key from navigating back.

EDIT2: I&#39;m **not** trying to prevent history navigation, just accidents.

EDIT3: @brentonstrines comment (moved here since the question is so popular): This is a long-term &#39;fix&#39;, but you could throw your support behind the [Chromium bug to change this behavior in webkit][1]


  [1]: http://code.google.com/p/chromium/issues/detail?id=144832

How can I prevent the backspace key from navigating back?

If you have worked with JavaScript at any length you are aware that Internet&amp;nbsp;Explorer does not implement the ECMAScript function for Array.prototype.indexOf() [including Internet&amp;nbsp;Explorer&amp;nbsp;8]. It is not a huge problem, because you can extend the functionality on your page with the following code.

    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i &lt; j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }

When should I implement this?

Should I wrap it on all my pages with the following check, which checks if the prototype function exists and if not, go ahead and extend the Array prototype?

    if (!Array.prototype.indexOf) {

        // Implement function here

    }

Or do browser check and if it is Internet&amp;nbsp;Explorer then just implement it?

    //Pseudo-code

    if (browser == IE Style Browser) {

         // Implement function here

    }


How to fix Array indexOf() in JavaScript for Internet Explorer browsers

I want to run a function when a user edits the content of a `div` with `contenteditable` attribute. What&#39;s the equivalent of an `onchange` event?

I&#39;m using jQuery so any solutions that uses jQuery is preferred. Thanks!

contenteditable change events

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?

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() { 
        // ... ? 
    });

Content Type	Original Author	Original Content on Stackoverflow
Question	Cristian Toma	View Question on Stackoverflow
Solution 1 - Javascript	Cristian Toma	View Answer on Stackoverflow
Solution 2 - Javascript	André Figueira	View Answer on Stackoverflow
Solution 3 - Javascript	Michał Perłakowski	View Answer on Stackoverflow
Solution 4 - Javascript	Posto	View Answer on Stackoverflow

How to make an HTML <div> element editable cross-browser?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

How to load another file's content to the current file in Vim?

Server.Mappath in C# classlibrary

Attributions