Code Snippets

[(/iPokemon/)]

Post your favorite little code snippets that save you time and sanity! Specify the coding language also!
Or fun little browser tricks.

I might archive them all in this post.

Here's one!

Katamari In Browser Window - Javascript
javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];
for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);
Stick it in your address bar, hit enter, and follow the instructions!

Content Editable - Javascript
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Stick it in your address bar, hit enter, and edit your content!

Jordan's Post Tabbing

[Cam]

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

[(/iPokemon/)]

Jul 1, 2011 19:43:41 GMT Cam said:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Mind expanding on what these do? I tried it, that's crazy o.o

[Cam]

You can edit any webpage live in your browser.

You put it in the URL address bar, press enter and edit away ^.^

[(/iPokemon/)]

Does it change the source then? Cause that would be awesome to just do that to make a design o.o

[Cam]

No it doesn't change the source.

[(/iPokemon/)]

Darn.. that would be epic

[Cam]

And a bit stupid. You could go around changing people's sites!

[(/iPokemon/)]

Well, no. I mean like it updates your source so you can copy it, but reverts back to the original when refreshing..

[Cam]

Hmm... That does sound cool =/

[Justin]

Jul 6, 2011 22:40:34 GMT (/iPokemon/) said:

Well, no. I mean like it updates your source so you can copy it, but reverts back to the original when refreshing..

You can do that in Opera, just view the source and edit, you click a button and it'll show you what it looks like. But one the page it refreshes it reverts back to the original

[(/iPokemon/)]

You can do this with the firebug addon for firefox.. just tried it, tis awesome lol

[Nick]

Jul 7, 2011 18:39:00 GMT Justin said:

Jul 6, 2011 22:40:34 GMT (/iPokemon/) said:

Well, no. I mean like it updates your source so you can copy it, but reverts back to the original when refreshing..

You can do that in Opera, just view the source and edit, you click a button and it'll show you what it looks like. But one the page it refreshes it reverts back to the original

Opera ftw! Im guessing pm bars dont count hahaha

[Cam]

Jul 8, 2011 4:10:01 GMT Nick said:

Jul 7, 2011 18:39:00 GMT Justin said:

You can do that in Opera, just view the source and edit, you click a button and it'll show you what it looks like. But one the page it refreshes it reverts back to the original

Opera ftw! Im guessing pm bars dont count hahaha

Well the code to get the numbers would count

[Jordan]

Jul 6, 2011 22:40:34 GMT (/iPokemon/) said:

Well, no. I mean like it updates your source so you can copy it, but reverts back to the original when refreshing..

The script allows you to manipulate the DOM so everything in memory is being modified in real time. The HTML sent from the server to your browser isn't going to change cause it's just text that gets sent over once, it doesn't mean anything to a computer. So, you can either write a script to feed you the new markup by doing something simple like document.body.innerHTML, or you can just get Firebug, right click on the HTML tab and select "Copy innerHTML". It converts the DOM that exists in memory to HTML for you.

Jul 6, 2011 8:50:03 GMT Cam said:

And a bit stupid. You could go around changing people's sites!

Being able to change the source would only work for your local machine, it wouldn't affect the actual page. The HTML sent to your browser is most likely being generated from several files and scripts on a server anyway. Anytime you modify the DOM, you are only modifying it for your own browser (you can disable your internet connection and still be able to modify the page because the page is completely stored in your computer's memory).

[Jordan]

These are two scripts that I use extensively for formatting text. The first converts all tabs to spaces (so my codes are indented in posts like this one), and the second converts spaces to tabs. I used the TabToSpace.html file to format the source code for this post. These could probably done in one line using regular expressions, but I wrote these a while back and don't feel like updating them since they work.

Save as TabToSpace.html

<html>
<head>
<title>JS Spacer - Tab to Space</title>

<script type="text/javascript"><!--

String.prototype.script_space = function(){

      var iText = new String;

      for(a = 0; a < this.length; a++){

            switch(this.charAt(a)){

                  case "\t":
                        iText = iText + "      ";
                        break;

                  case "\n":
                        iText = iText + "\n";
                        break;

                  default:
                        iText = iText + this.charAt(a);

            }

      }

      return iText;
}

function init(){
      g("data_new").value = g("data").value.script_space();
}

function flush(){
      g("data").value = g("data_new").value = "";
}

function g(_id){

      if(_id)
            return document.getElementById(_id);

      return false;
}

//--></script>

<style type="text/css"><!--

body {
      margin: 100px 0px 0px 0px;
      background-color: #000;
      font-family: Verdana, Arial;
      text-align: center;
}

div textarea {
      display: block;
      margin: 0px auto;
}


input {
      background-color: #000;
      border: 1px solid #fff;
      color: #fff;
      font-family: Verdana, Arial;
      margin: 30px 0px 30px 0px;
}

--></style>

</head>

<body>

      <div>

            <textarea id="data" cols="50" rows="10" onmouseover="this.style.backgroundColor='e1e1e1'" onmouseout="this.style.backgroundColor='ffffff'"></textarea>

            <input type="button" value="Space" onclick="init()" />
            <input type="button" value="Flush" onclick="flush()" />

            <textarea id="data_new" cols="50" rows="10" onmouseover="this.style.backgroundColor='e1e1e1'" onmouseout="this.style.backgroundColor='ffffff'"></textarea>

      </div>

</body>
</html>

Save as SpaceToTab.html

<html>
<head>
<title>JS Spacer - Space to Tab</title>

<script type="text/javascript"><!--

String.prototype.script_space = function(){

      var iText = new String;

      // Are we reading a new line?
      var newLine = true;

      // If tabs were added to a line.
      var addedTabs = false;

      // How many spaces have we read in a row?
      var curSpace = 0;

      // How many spaces makes up a tab.
      var tabSize = parseInt(g("tabsize").value);

      // Temporary buffer when reading in spaces.
      var iBuffer = "";

      for(a = 0; a < this.length; a++)
      {
            switch(this.charAt(a))
            {
                  case "\n":
                  {
                        // Add the new line to the string.
                        iText = iText + "\n";

                        // Reset the values for the new line.
                        newLine = true;
                        addedTabs = false;
                        curSpace = 0;
                        iBuffer = "";

                        break;
                  }
                  case " ":
                  {
                        // If we are on a new line and have not found any text, just spaces.
                        if(newLine)
                        {
                              // If we have found X amount of spaces in a row.
                              if(++curSpace == tabSize)
                              {
                                    // Add the tab to string and reset the counter.
                                    iText = iText + "\t";
                                    curSpace = 0;
                                    addedTabs = true;
                              }
                              // Else, add the space to the buffer in case we find less than X amount of spaces and need to add it to the string.
                              else
                                    iBuffer = iBuffer + " ";
                        }
                        // Else, just add the space since it's between text.
                        else
                              iText = iText + " ";
                        break;
                  }
                  default:
                  {
                        // If we are on a new line and no tabs were added on the last, add the buffer with the spaces.
                        if(newLine && !addedTabs)
                        {
                              iText = iText + iBuffer;
                        }

                        // Add the current character in the string.
                        iText = iText + this.charAt(a);

                        // Text has been found so don't look for more spaces in a row on this line.
                        newLine = false;
                  }
            }
      }
      return iText;
}

function init(){
      g("data_new").value = g("data").value.script_space();
}

function flush(){
      g("data").value = g("data_new").value = "";
}

function g(_id){

      if(_id)
            return document.getElementById(_id);

      return false;
}

//--></script>

<style type="text/css"><!--

body {
      margin: 75px 0px 0px 0px;
      background-color: #000;
      font-family: Verdana, Arial;
      text-align: center;
}

div textarea {
      display: block;
      margin: 0px auto;
}


input {
      background-color: #000;
      border: 1px solid #fff;
      color: #fff;
      font-family: Verdana, Arial;
      margin: 30px 0px 30px 0px;
}

--></style>

</head>

<body>

      <div>


<input id="tabsize" type="text" size="5" value="6" />

            <textarea id="data" cols="50" rows="10" onmouseover="this.style.backgroundColor='e1e1e1'" onmouseout="this.style.backgroundColor='ffffff'"></textarea>

            <input type="button" value="Space" onclick="init()" />
            <input type="button" value="Flush" onclick="flush()" />

            <textarea id="data_new" cols="50" rows="10" onmouseover="this.style.backgroundColor='e1e1e1'" onmouseout="this.style.backgroundColor='ffffff'"></textarea>

      </div>

</body>
</html>