Wednesday, February 7, 2007

How to insert working javascript-source in blogs (and not having them destroyed by the blogware)

The other day I wrote a "cool" javascript (The script, when pasted into any webpage, will make every link on the page to zoom out and fall into place, hard to explain but a really neat effect IMHO) I made while playing around with javascript bookmarklets and Filters in Internet Explorer.

So i thought why not share this with other people and actually create some kind of challenge so people would contribute and make even cooler javascripts. So I wrote a blog about it and was about to save it to blogger.com when the trouble started. I replaced every " with a ' in the script so that the (a href) tags would not break when I inserted the script.

Blogger did not like javascript
When I tried to post the entire contents of the javascript (so people would be able to copy and test the script) BLOGGER just cut my javascript-tag off so I was not able to post links with "javascript:" in them. I guess they dont want javascript hacks making their images flying around... ;)

Wordpress maybe?
Damn! I need to find another blogger-site then, I thought, and registered at Wordpress.com . Now, Wordpress did allow my javascript-link to show but it did cut it off and made the script totally unworkable so I had to find another solution.

I downloaded the Wordpress blogsoftware from wordpress.org and installed it at my own server. Now it actually allowed me to insert ( textarea ) tags to contain the javascript source, BUT for some reason, each time I saved the blog, the EDIT-area got CUT off exactly where I put the < /textarea > tag. So each time I saved a draft copy of my blog, all text below the javascript code disappeared! I guess that Wordpress uses (textarea) tags in their editor-window aswell. :/

My solution
Now, the wordpress blogware DID allow me to use my own HTML tags, with javascript-links and it only messed up some special characters in links (replaced spaces in with %20 and so on) after saving a draft. So the solution to this problem was this: I wrote the blog in wordpress WITHOUT inserting the javascript-code and saved the page (draft).

Now I switched to html-code view and inserted the javascript code at the appropriate places so I had the complete html-source in the editor, Now I selected all the html-code and copied it to the clipboard and pasted it in a textfile that I keep stored locally.
After that I hit the "save" button, And there it was: The blogpage was saved correctly with the javascript-code intact. :)

How to edit the blogpage then?
Now when I wanted to edit this particular blog, For the javascript-code not to be ruined, I had to:

  1. Load the page up for edit mode
  2. Switch to html-code view. Copy the html-code from my textfile and paste it into the html-code view.
  3. Switch to design-view and make the changes.
  4. Switch back to html-code view and select & copy the html-code and paste it into the textfile.
  5. Save the page.


If you want to see the script for yourself (and maybe write a cooler one) you can go to http://blog.skbg.net

until next time...

1 comment:

Anonymous said...

Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.