Clientside: Gedit Plugin To Format, Minify And Validate CSS / Javascript

Clientside is a Gedit plugin for those who work with CSS and Javascrip which can be used to minify and format/beautify Javascript and CSS. Further more, the plugin also includes jsLint and an option to Gzip the current file.

To install Clientside Gedit Plugin, download it and extract it to the ~/.gnome2/gedit/plugins folder. You'll also have to install NodeJS and PHP - in Ubuntu, simply use the following command to install NodeJS and PHP (php5-cli should be enough):

sudo apt-get install nodejs php5-cli

Once everything is installed, restart Gedit and enable it by going to Edit > Preferences > Plugins - then, you'll find the options to minify / beautify Javascript and CSS under Tools > Clientside. There's one more step: under Clientside, select "Configure plugin" and make sure you enter "nodejs" under "How do I call NodeJS?" and "php" under "How do I call PHP?" or else the plugin will not work.

Clientside Gedit Plugin works on other Linux distributions (obviously), Mac OSX and Windows too, however, the instructions in this post are strictly for Ubuntu. For info on setting it up on a non-Ubuntu system, visit its page @ GitHub.


Also see: Get TextMate Features And Styles In Gedit With GMate

Fix Post Duplicates In Related Posts Widgets For Blogger

I haven't posted about Blogger in a while, but there was a certain bug in almost all the "related posts" widgets for Blogger I know, and today I finally decided to fix it for Web Upd8 and hopefully, this will also help other Blogger blogs out there.

I use this related posts widget and like most related posts widgets for Blogger, sometimes the post on which an user is currently on, is also displayed in the "related posts". This is because of the parameters in the URL (such as "?medium=" or "#disqus", etc. - basically any parameter or in-page jump link) which make it look like a different URL for the widget, thus displaying the post in the related posts section, even when the user is already on that post.

I used "replace" in javascript to fix this - which I though looks a lot like "grep" and "sed" in Linux, but it seems it's not exactly like that and I had to do a bit of hardcoding for it to work, replacing the parameters twice in the URL. I hardly know any JavaScript so don't judge me for the way I managed to fix this =).

Here is the fix. My widget has this statement:

if(a.href!=location.href)

which should have fixed the bug I am talking about, but actually it doesn't (it only fixes it for example for the Digg iframe, Stumbleupon, etc.).

So to fix it, I replaced the above piece of code with:

if(a.href!=top.location.href.replace(/\?.*/,'').replace(/\#.*/,''))

In case the above code doesn't let you save the template (you get an error), use THIS code instead.

Like I said, I hardly know any Javascript, so I replaced the parameters twice. The above code replaces "?" and "#" and anything after those parameters, with nothing, thus giving us a stripped url.

This way, the parameters (from Google Reader, etc.) and jump links such as the Disqus comments links do not interfere with the related posts widget anymore.

Limitations: make sure your posts urls don't have any "?" or "#" characters (like http://myblog.blogspot.com/my?post.html), although I think Blogger doesn't allow that anyway.

Minify (Shrink) JavaScript And CSS With Reducisaurus

Reducisaurus is a web service for minifying and serving CSS and JS files, based on Yahoo! YUI Compressor. Sure, there are lots of way of minifying javascript and CSS, but Reducisaurus is probably the easiest to use.


In case you don't know:

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab).

Like I told you, using Reducisaurus for minifying JavaScript and CSS is extremely easy. If you have a JS or CSS file hosted somewhere, simply point Reducisaurus to it and it will output the minified version:

http://reducisaurus.appspot.com/css?url=YOUR_CSS_FILE_URL
http://reducisaurus.appspot.com/js?url=YOUR_JS_FILE_URL

For more info and other ways of using Reducisaurus, see it's home page.

How To Block The Falling Snow On Websites

December is that month of the year when 90% of the blogs teach you how to 'install' falling snow on your website (but they use the method described in this post to disable it for themselves) and about 0.1% tell you how to disable it.

Anyway, let's get started.

You can find a snow.js demo HERE (so you can test to see if you blocked it correctly).

There are two snow scripts (javascript) that I know of, which we are going to block using AdBlock Plus Firefox extension. After installing the extension, right click the AdBlock Plus icon and select "Preferences", scroll down to "Blocking rules", select any blocked item, select "Add New" end enter:

snow.js

Then repeat the process and enter:

snowstorm.js

Now click "Apply".

If you still see snow on some website, you can right click Adblock Plus and select "Open blockable items" to see all the elements on that page, and then select the snow script (you'll have to guess which one it is).

And a note for websites which display falling snow: thank you very much, but I prefer my snow outside :)

11 Amazing JavaScript Tabbed Menus (Navigation) [Web Design]

1. jQuery idTabs - comes with many styles



Demo & Tutorial




2. Ajax Tabs Content Script



Demo (3 examples) & Tutorial




3. Tabber - I won't post a screenshot, as this is the tabbed navigation you can see on the top right corner on Web Upd8. Installation istructions (including for Blogger blogs).




4. jQuery UI Tabs



Demo (multiple examples) & Tutorial




5. jQuery ThickBox



Demo & Tutorial




6. jQuery Coda Slider



Demo | Tutorial




7. jQuery Tabbed Interface



Demo | Tutorial




8. Nanotabs (only 2 KB!)



Demo (2 styles) and tutorial




9. jQuery Smooth Tabbed Menu



Demo | Tutorial




10. Sliding Tabs (mootools)



Demo | Tutorial




11. Xp Style tab panes (closable tabs)



Demo | Tutorial

See also:

10 Beautiful jQuery Menus w/ Tutorials
7 jQuery Menus For Improving Your Website

Google Released Its JavaScript Tools As Open Source

Google has announced the release of some of its core application development tools as open source. Named "Closure", these tools have been used by Google to develop services like Gmail, Google Maps, Google Docs, etc., and it consists of: Closure Compiler, Closure Library, Closure Templates and Closure Inspector. This last tool can be installed in Firefox so you can work on the Closure compiled code with Firebug.

More about this, on the Google Code blog.

[via h-online]

Insert Multiple YouTube Videos Into Your Blog Posts Using JavaScript

I recently came across a blog post on 911-need-code-help which explains how to insert (embed) multiple YouTube Videos into your blog posts. You can find both a demo and code to use, by visiting link above.

If you use Blogger, you can paste the JavaScript code directly into the post, so you won't increase the pageload for all of your blog's pages. But use draft.blogger.com as the normal Blogger doesn't publish JavaScript code correctly.

Alternatively, you could use Embedr to embed multiple videos into your blog posts which works with other websites too (not just YouTube).

7 jQuery Menus For Improving Your Website

Elastic Thumbnail Menu

Demo | Tutorial

Floating Menu

Demo | Tutorial

Tab Navigation with Smooth Horizontal Sliding

Demo & Tutorial

Horizontal Scroll Menu

Demo | Tutorial

Dropdown, iPod Drilldown, and Flyout styles jQuery Menus

Demo1 | Demo2 | Tutorial

Animated Menu

Demo | Tutorial

jQuery Blend

Demo | Tutorial

You may also want to see another 10 beautiful jQuery menus (with tutorials) in action.

Quick Tip: Load CSS Based on Screen Resolution

To load some CSS files based on the screen resolution of the visitor, basically you just have to use some JavaScript like this:

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth < 750){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if ((screenwidth >= 750) && (screenwidth <= 950)){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if (screenwidth => 1024) {
document.write('<link rel="stylesheet" href="http://path.to/1024px.css" type="text/css" media="screen" />');
else {
document.write('<link rel="stylesheet" href="http://path.to/verylarge.css" type="text/css" media="screen" />');
}
</script>

Replace http://path.to/... with the path to your CSS files.

Obviously, you can change the values and add more or remove resolutions from it. To see it in action after applying it to your website, just resize your browser to see the layout change accordingly.

Please note: if you want to use a default stylesheet outside this JavaScript, set it like so:

rel="stylesheet"

And change rel="stylesheet" in the javascript above, to:

rel="alternate stylesheet"

[via techie-buzz]

Rotating Ads Using A Simple JavaScript Function

I used an 468 x 60 Adsense banner ad under post titles and wanted to experiment with a large rectangle (336 x 280) to see which one performs better. But page impressions / clicks are not constant so how do you know if one ad or another is actually performing better? Well, you can display each ad on 50% of the pages, randomly and automatically, by using a simple JavaScript trick. The same JavaScript code can also display different ads so you can rotate ads from multiple services. Here is how:

This is the normal JavaScript for an 468x60 Adsense ad:

<script type="text/javascript"><!--
google_ad_client = "pub-5111779714716360";
google_ad_slot = "5012632955";
google_ad_host = "pub-1556223355139109";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Note that the google_ad_host isn't in the script you receive from Adsense and is automatically generated, so copy that from your website code before proceeding to implementing this.

OK, so to display 2 ads randomly, each on 50% of the pages, we are going to use a function called random() that generates a number between 0 and 1 with equal probability so that each ad is displayed the same amount of times. Here is my code for displaying 2 different Adsense ads using this random function:

<script type='text/javascript'>
var google_ads = Math.random();
if (google_ads < .5){
google_ad_width = 468;google_ad_height = 60;
google_ad_client = "pub-5111779714716360";google_ad_host = "pub-1556223355139109";google_ad_slot = "6221737480";
} else {
google_ad_width = 336;google_ad_height = 280;
google_ad_client = "pub-5111779714716360";google_ad_host = "pub-1556223355139109";google_ad_slot = "5019549445";
}

</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

Modify the google_ad_width, google_ad_height, google_ad_client, pub-5111779714716360, google_ad_host and google_ad_slot with your values for each of the ads.

Add a channel for each ad so you'll be able to see which one is actually getting more clicks.

Basically this can be used for 3 purposes:

-rotating different ad sizes from Adsense
-alternating ads from different ad networks
-displaying ads from 2 different persons on the same website

And all the ads will be displayed an equal number of times.

NOTE for Blogger blogs: to insert Adsense code into your template (not widget), for the ad to actually show up, you need to convert it using something like this: Blogger Ad Code Converter.

Worried that this is against AdSense program policies, read THIS. Which is actually from where I found out about the random() trick. It's on the Adsense blog ;)

10 Beautiful jQuery Menus w/ Tutorials

Hidden jQuery Drop Down Menu for Minimalist Design

Demo | Tutorial

A Different Top Navigation with jQuery



Demo | Tutorial



Create an apple style menu and improve it via jQuery



Demo | Tutorial

Color Fading Menu with jQuery



Demo | Tutorial



Create a Cool Animated Navigation with CSS and jQuery



Demo | Tutorial



jQuery Drop Line Tabs



Demo & Tutorial



Sexy Drop Down Menu w/ jQuery & CSS



Demo | Tutorial



Sliding Top Menu With jQuery



Demo | Tutorial



How to Make a Smooth Animated Menu with jQuery



Demo | Tutorial



jSlickmenu: A jQuery plugin for slick CSS3 menus



Demo | Tutorial

Create a HTML Twitter Widget For Your Blog Using JavaScript and CSS

(this is just a screenshot, see a live demo link at the end of the post)

1. The CSS (if you use Blogger, you need to place this before the ]]></b:skin> tag in your template / for other platforms, place this code inside your main .css file):

#twitter_div_ws {font-family:Arial, Helvetica, sans-serif; font-size: 13px; border: 1px solid #CCCCCC; padding: 5px; width:300px; background-color:#FFF; margin: 0 auto;}
ul#twitter_update_list_ws {padding:0; margin:0; list-style: none; display:block;}
ul#twitter_update_list_ws li {list-style: none; min-height:50px; border-top: 1px solid #CCCCCC; padding:5px 0px;}
ul#twitter_update_list_ws li span {font-style: italic; display: block;}
ul#twitter_update_list_ws .timeago {display:inline-block;}
ul#twitter_update_list_ws .timeago a {font-size:10px; color: #999999; text-decoration: none;}
#twitter_div_ws b a {font-weight: bold; text-decoration: none; text-transform:uppercase}
#twitter_info_ws {border-bottom: 5px solid #CCCCCC; padding-bottom:10px;font-size: 10px;}
#twitter_info_ws b {font-size: 15px; line-height:30px;}
#twitter_info_ws img {padding: 0 5px 0 0; width: 50px; border:0px;}

2. The JavaScript (place it above your tag inside your template):

<script type="text/javascript">
function relative_time(time_value) {
var time_lt1min = 'less than 1 min ago';
var time_1min = '1 min ago';
var time_mins = '%1 mins ago';
var time_1hour = '1 hour ago';
var time_hours = '%1 hours ago';
var time_1day = '1 day ago';
var time_days = '%1 days ago';

var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return time_lt1min;
} else if(delta < 120) {
return time_1min;
} else if(delta < (60*60)) {
return time_mins.replace('%1', (parseInt(delta / 60)).toString());
} else if(delta < (120*60)) {
return time_1hour;
} else if(delta < (24*60*60)) {
return time_hours.replace('%1', (parseInt(delta / 3600)).toString());
} else if(delta < (48*60*60)) {
return time_1day;
} else {
return time_days.replace('%1', (parseInt(delta / 86400)).toString());
}
}

function twitterCallback1(twitters) {
var statusHTML = [];
var statusHTMLI = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;

var FollowersCount = twitters[i].user.followers_count;
var FriendsCount = twitters[i].user.friends_count;
var ProfileImageUrl = twitters[i].user.profile_image_url;
var StatusesCount = twitters[i].user.statuses_count;

pic = twitters[i].user.profile_image_url;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
if (i==0){
statusHTMLI.push('<a href="http://www.twitter.com/'+username+'"><img align="left" src='+ProfileImageUrl+'></a><b>Tweet Us at <a href="http://www.twitter.com/'+username+'">'+username+'</b></a><br/>Followers: '+FollowersCount+' | Following: '+FriendsCount+' | Tweets: '+StatusesCount+'');
}
statusHTML.push('<li><div class="timeago"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div><span>'+status+'</span></li>');
}
document.getElementById('twitter_info_ws').innerHTML = statusHTMLI.join('');
document.getElementById('twitter_update_list_ws').innerHTML = statusHTML.join('');
}
</script>

3. The HTML (place it where you want the widget to be displayed):

<div id="twitter_div_ws">
<div id="twitter_info_ws"></div>
<ul id="twitter_update_list_ws">
<li>loading…</li>
</ul>
</div>

4. Second JavaScript code (place it right after the above HTML code (presented in step 3):

<script src="http://twitter.com/status/user_timeline/YOUR_TWITTER_USERNAME.json?count=5&callback=twitterCallback1" type="text/javascript"></script>

In this code, replace YOUR_TWITTER_USERNAME with... your Twitter username :)


Credits: Wittysparks | Live Demo.

Lightweight (4kb) JavaScript Switch Menu

Demo:

Site Menu

- What's New
- What's hot
- Revised Scripts
- More Zone

FAQ/Help

- Usage Terms
- DHTML FAQs
- Scripts FAQs

Help Forum

- Coding Forums

Cool Links

- JavaScript Kit
- Freewarejava
- Cool Text
- Google.com



- Link to DD
- Recommend Us
- Email Us

The menu uses a cookie to remember it's last state. Click on a category in the menu to expand it and then reload the page. The same category should expand upon page reload. You can choose between "sitewide" and "local" persistence, with the former remembering the menu state across your entire site. This is useful if you have the exact same Switch Menu script on multiple pages on your site (ie: as a navigational bar), and it makes sense for the persistence to last from page to page.

CSS and JavaScript (place this code above the </head> tag in your template:

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>

HTML (Add the below where you want the menu to appear on your page):

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

 <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
 <span class="submenu" id="sub1">
  - <a href="new.htm">What's New</a><br>
  - <a href="hot.htm">What's hot</a><br>
  - <a href="revised.htm">Revised Scripts</a><br>
  - <a href="morezone/">More Zone</a>
 </span>

 <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
 <span class="submenu" id="sub2">
  - <a href="notice.htm">Usage Terms</a><br>
  - <a href="faqs.htm">DHTML FAQs</a><br>
  - <a href="help.htm">Scripts FAQs</a>
 </span>

 <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
 <span class="submenu" id="sub3">
  - <a href="codingforum.htm">Coding Forums</a><br>
 </span>
 
 <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
 <span class="submenu" id="sub4">
  - <a href="javascriptkit.htm">JavaScript Kit</a><br>
  - <a href="freewarejava.htm">Freewarejava</a><br>
  - <a href="cooltext.htm">Cool Text</a><br>
  - <a href="http://www.google.com">Google.com</a>
 </span>

 <img src="http://www.netupd8.com/w8img/17ac8n.jpg" onclick="SwitchMenu('sub5')"><br>
 <span class="submenu" id="sub5">
  - <a href="link.htm">Link to DD</a><br>
  - <a href="recommendit.htm">Recommend Us</a><br>
  - <a href="contact.html">Email Us</a><br>
 </span>

</div>

via: makeuseof / credits: dynamicdrive

jQuery FontEffect: Create Font Effects Without Using Images

FontEffect is a jQuery plugin that adds effects to HTML text, without using any images. In version 1.0 (which has only 7 kb), you can use 4 different text effects: edge (outline), shadow, gradient and reflection (mirror).

To use jQuery FontEffect, use the following code:

- Javascript / jQuery:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://path.to/jquery-FontEffect-1.0.0.min.js"></script>

Place the above code before the </head> tag in your template.

Obviously, replace http://path.to/jquery-FontEffect-1.0.0.min.js with the exact path to the jquery-FontEffect-1.0.0.min.js file. Also, if you already use jQuery, don't include the jQuery code twice.

-CSS:

#example{ font-family: Georgia,'Times New Roman', serif; font-size:3.0em; color:#ff0080; font-weight:bold; margin-bottom:10px;}

This can be placed in your .css file or if you use Blogger, before the ]]> tag in your template.

-HTML:

<div id="example">Web Upd8</div>

<script type="text/javascript">
$("#example").FontEffect({shadow:true});
</script>

The above html code will present the "Web Upd8" text using shadow effect. You can replace it for any of the other effects supported by this jQuery plugin.

It is an interesting jQuery plugin, ideal for dynamically generated headers (such as the title of the post). The best thing is that it works with most known browsers, including everyone's favorite: IE6. :)

More info, live demo & download

2 Bookmarklets For Finding Out What JavaScript A Webpage Uses

1. WTFramework - If you ever have visited a website and was like, “What… that is awesome! I wonder what JavaScript framework they used to developer that awesome website!?!” then this is the bookmarklet for you :) A small rectangle will show up in the upper-right corner of the page indicating if any of the following frameworks were used… (MooTools, Yahoo User Interface, jQuery, Scriptaculous, Dojo Toolkit, Mochikit, etc.)

2. jQuery Plugin Detector - Instead of digging through the View Source you can just click this bookmarklet to reveal a little window that reveals you all the jQuery plugins loaded for the current page. To save the bookmarklet simply drag the above link to your bookmarks toolbar. It’s been tested successfully in Opera 9, Safari 4, FF2/3, IE6/7, and Chrome. The list shown includes google links for each plugin; obviously not all plugins on all sites are available to the public so the links aren’t always very useful.

[via web dev .net]

3 Ways Of Hiding Your Email Address From Spambots

1. Using unicode

You can use this form to convert your email address to unicode. After converting, the email link will look like this (in plain text):

<a href = '&#109;&#97;&#105;&#108;&#116;&#111;:&#119;&#101;&#98;&#117;&#112;&#100;&#56;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;'>&#119;&#101;&#98;&#117;&#112;&#100;&#56;&#64;&#103;&#109;&#97;&#105;&#108;&#46;&#99;&#111;&#109;</a>

And here it is implemented: webupd8@gmail.com (you can look at the source code and see that the email address is not visible)

2. Javascript

Use the following javascript code to hide your email address on a webpage:

<script type="text/javascript"><!--var string1 = "foo";var string2 = "@";var string3 = "bar.com";var string4 = string1 + string2 + string3;document.write("<a href=" + "mail" + "to:" + string1 + string2 + string3 + ">" + string4 + "</a>");//--></script>

Replace foo with your email username and bar.com with the domain of your email. Here it is in action:

3. Javascript using MailToEncoder

Go to MailToEncoder and enter the email address you want to hide and paste the javascript code where you want to display your email address.

The code looks like this:

<script type="text/javascript"><!--var egikmgo = ['u','a','e','f','o','r','l','8','e','p','>','d','<','"','w','.','w','a','h','=',' ','u','m','l','p','e','a','.','c','b','g','o','m','i','b','m','@','>','i','m',':','t','c','@','"','8','<','i','g','d','l','m','/','a','o','a'];var ujyczmr = [38,54,36,6,31,4,28,22,5,39,34,40,0,8,16,29,35,26,3,7,2,19,25,47,20,17,45,48,30,37,43,50,32,46,18,51,23,55,27,9,15,13,49,42,33,41,52,11,24,21,12,44,53,10,14,1];var btuarfv= new Array();for(var i=0;i<ujyczmr.length;i++){btuarfv[ujyczmr[i]] = egikmgo[i]; }for(var i=0;i<btuarfv.length;i++){document.write(btuarfv[i]);}// --><</script><noscript>Please enable Javascript to see the email address</noscript>

And here it is live:

Bonus: combining method #1 and #2

Go to this website and enter the first part of your email (the text before @) - let's name it code#1 and then do the same thing for the second part of your email (the text after @), let's call it code#2. Now enter the following code where you want to post your email address:

<script type="text/javascript"><!--var string1 = "code#1";var string2 = "@";var string3 = "code#2";var string4 = string1 + string2 + string3;document.write("<a href=" + "mail" + "to:" + string1 + string2 + string3 + ">" + string4 + "</a>");//--></script>

Replace code#1 and code#2 with the encoded text you got like I explained above. And here is the code in action:

And finally, if you want an even bigger protection, you can put all this code in a .js file and call it like this:

<script type="text/javascript" src="http://mywebsite/emailfile.js"></script>