/    Sign up×
Community /Pin to ProfileBookmark

Making e-mail non-obtrusive and Dreamweaver-compatible

A few years ago I wrote a script for someone to hide multiple e-mail addresses. Now they are changing their editor from FrontPage to Dreamweaver. (I don’t know either so I don’t know if that matters. Evidently they are using templates and don’t know where to put it.) I am trying to re-write the script to be non-obtrusive and Dreamweaver-compatible. I was thinking of maybe using a class selector to implement it on the page but can’t figure it out. Any help would be greatly appreciated (and credit where do). The original code is below.

[CODE]
var userName = new Array();
userName[0]=”keeperoftheweb”;
userName[1]=”rodadams”;
userName[2]=”debbanker”;
userName[3]=”markbeckstrom”;
userName[4]=”donnabiehl”;
userName[5]=”jessehernandez”;
userName[6]=”carolchristian”;
userName[7]=”dawnchorobik”;
userName[8]=”dianecooper”;
userName[9]=”jeanduchaj”;
userName[10]=”jackieflannery”;
userName[11]=”mariaestelagalvan”;
userName[12]=”gladysgarciajimenez”;
userName[13]=”michellededecker”;
userName[14]=”lillieglover”;
userName[15]=”aliciagutierrez”;
userName[16]=”arlenehibbard”;
userName[17]=”ninawall”;
userName[18]=”carolynmelka”;
userName[19]=”rositanurse”;
userName[20]=”karenferrusquia”;
userName[21]=”joycehsieh”;
userName[22]=”steveplacek”;
userName[23]=”j”;
userName[24]=”deborahramus”;
userName[25]=”deereinhardt”;
userName[26]=”cherminerifai”;
userName[27]=”renatarobinson”;
userName[28]=”brendaschindlbeck”;
userName[29]=”juantemiquel”;
userName[30]=”nancyterry”;
userName[31]=”ericadobbertin”;
userName[32]=”maryyapenjian”;
userName[33]=”kathywall”;
userName[34]=”lugeniathomas”;
userName[35]=”jovitamunoz”;

var siteName = “thatCorp.com”;
i=0;
do userName[i]='<a href=”mailto:’ + userName[i] + ‘@’ + siteName + ‘”>’ + userName[i] + ‘@’ + siteName + ‘</a>’;
while(userName[++i])[/CODE]

Usage:

[CODE]
<script type=”text/javascript”>document.write(userName[20])</script>[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@toicontienAug 21.2007 — I created something similar a while back (JavaScript Email Link Creator). It doesn't require you to enter email addresses and allows you to write email addresses like [B]joe [dash] somebody [at] whatever [dot] com[/B] and JavaScript searches the DOM and replaces that text with a mailto: link. Would that be acceptable? Or do you want a more literal translation of your script into non-obtrusive JavaScript?
Copy linkTweet thisAlerts:
@LeeUauthorAug 21.2007 — Well, that's not bad, except that these addresses might have to appear on many different pages, so instead of writing out each one each time, using the one above, she only had to change the number in the brackets. If you check this page, under the heading, "Unobtrusive JavaScript," that's more along the lines I was thinking of. (I like using his example for popups.)
Copy linkTweet thisAlerts:
@toicontienAug 21.2007 — How about this:
/**
* @class EmailLinks
* Easily create mailto: links that spambots cannot see using unobtrusive
* JavaScript.
*/
var EmailLinks = {
addresses: [],
isSupported: !!document.getElementsByTagName &amp;&amp; !!document.createElement &amp;&amp; !!document.createTextNode &amp;&amp; !!document.appendChild ? true : false,


/**
* @class EmailLinks
*
* @function add
* Adds all the email addresses given.
*
* @param (strings, required)
* The email addresses to be added. This function will add as many email
* addresses as you pass it.
* Ex: EmailLinks.add('[email protected]', '[email protected]', '[email protected]');
*
* @return void
*/
add: function() {
var i = 0, end = arguments.length;
for (i; i &lt; end; i++) {
this.addresses[this.addresses.length] = arguments[i];
}
},


/**
* @class EmailLinks
*
* @function create
* Creates the email links. This is best called in the onload event.
*
* @param tag (string, optional)
* If only one kind of HTML tag will contain the email links, passing
* the tag name will narrow the search down and make this script faster.
* If no tag name is passed, every tag in the HTML document is searched.
*
* @return void
*/
create: function(tag) {
var els, lnk;
var i = end = 0;
var emailIndex = 0;
var currentClass = '';
if (!tag) {
tag = '*';
}
if (this.isSupported) {
els = document.getElementsByTagName(tag);
for (i, end = els.length; i &lt; end; i++) {
currentClass = els[i].className;
if (currentClass.indexOf('email-link') &gt; -1) {
emailIndex = parseInt(currentClass.replace('email-link-',''));
lnk = document.createElement('a');
lnk.href = 'mailto: ' + this.addresses[emailIndex];
lnk.appendChild(document.createTextNode(this.addresses[emailIndex]));
els[i].appendChild(lnk);
}
}
}
}
};

EmailLinks.add('[email protected]', '[email protected]', '[email protected]');

window.onload = function() {
EmailLinks.create('span');
};

This code example would require this HTML:
[code=html]<span class="email-link-0"></span>[/code]
That would display the first email address added.
×

Success!

Help @LeeU spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...