Technical Articles => Web =>  Web design

Turn browser into notepad with one line of code

Source : sonic0002    Date : 2013-01-30 04:20:54  

This is the code shared by Jose on codewall. When you type data:text/html,   into the address bar of the browser and press enter, the browser will turn into a notepad which you can edit.

Why it works?

This uses Data URI’s format and it tells the browser to render HTML. But contenteditable is a property of HTML5, so this can only work in the web browser which supports this property.

Here are some interesting contents.

Some people make some changes to the code encouraged by the idea of Jose.

  • jakeonrails wrote one line of code which supports Ruby code highlighting. Here is the code:

data:text/html,

 

  • slawdan reminds that if we change ace/mode/ruby  to ace/mode/python. Then the editor will highlight Python codes.You can do similar things for other languages.
  • You can use textarea and make it “invisible” if you want autofocus.

data:text/html, <textareastyle="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none"autofocus />

  • The following code will change the background color when editing, when stopping editing, the background color will be white.

data:text/html, <html><head><linkhref='http://fonts.googleapis.com/css?family=Open+Sans'rel='stylesheet'type='text/css'><styletype="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}script>head><bodycontenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

 

Source : http://blog.jobbole.com/32823/

Save as PDF Mark as read Mark as important
By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags:HTML5, Browser editor   Read(1145) Comment(0)

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Digg  Share on Tumblr    Delicious 

 Previous : CSS DIV position analysis
 Next : 52.4 million tablet shipments in Q4 globally

  ::Related Articles

  ::Comment Zone

No comment for this article.

  ::Comment

Nickname  
Email 
Comment

:: Other versions

No other versions available yet.

:: Recent articles

:: Most read

:: Most commented

:: Contribute

Want to share with the world your understanding about technology? Want to record the process you solve a technical problem? Want to make the world benefit from your understanding and solution? Write them down. You make the world better, the world makes us better.

 Write article

:: Find us

Back to top