AskLG

Legendary Scripts is a new segment here at AskLG designed to solve some typical web design issues.  Here, I get to play around with Javascript in order to make simple solutions to mundane or difficult tasks.  Today I’m releasing two new scripts.  The first script is a spam hider to help prevent spammers from getting your email address.  The second script focuses on tooltips.  Using CSS and a little Javascript, you too can have tooltips on your website.
(more…)

I have been a tad bit busy on the security front for a class I’m currently taking.  I’ve had to give two presentations this month and write a security primer (~ 8 pages of info).

The presentations are simple and missing a few details here and there (which I actually explain during the presentation),  but they will give you a general overview of concerns.  The first presentation is on VPN technology going into detail about IPSec.  It does assume you know a tad about security to understand most of the terms, but it should be low level enough for most developers to trudge through.  The next presentation is on Ajax security and based on the primer paper I wrote.  It assumes you have a basic understanding of development concepts.  If you’ve coded for 1-2 years, you should be good.

The paper assumes you have a basic (very basic) understanding of the Internet and development.  From there it takes you on to explain security concerns with Ajax including XSS attacks.  I give a few examples so I hope it doesn’t have too much of a research-type feel to it.

These should be fairly self-explanatory (I hope!) so let me know if I should make revisions.

Thanks and Enjoy!
Download links after the jump.

(more…)

Don’t you really hate it when you put your email address online and bots start to spam it? Me too! Upon launching a new site, I decided to do something about it.

Here is a very simple script that displaces the issue of having mailto: links laying about in your code for spam bots to pick up.

function hide_email()
{
//create regular expression
var regular_expression = new RegExp(”[Mm]ailto”);
//start by checking all links
for(var count=0; count<document.links.length; count++)
{
//is this an email link??
if(regular_expression.test(document.links[count].href))
{
try {
//move email link for safe keeping
document.links[count].name = document.links[count].href;
//replace email link with nonsense
document.links[count].href=”mailto:nospam@nospam.com”;
//keep valid users happy (yay!)
document.links[count].onmouseover = function() { this.href = this.name; };
//keep spammers away (boo bots!)
document.links[count].onmouseout = function() { this.href=”mailto:nospam@nospam.com”; };
}catch (err) {
//oh noes! something bad happened.
}//end catch
}//end if
}//end for loop
}//end hide email

hide_email(); //make function call to execute

Now put this script, right before the </body> (yes ending body tag) tag and it will scour your web page for all mailto: links and save them from bot doom. Of course this isn’t an extremely secure fix, but it’ll do the job against those stupid bots until they get smarter.

Final Note: If you’re using my script for tooltips, then these two aren’t compatible together yet. I think I understand the problem, but it’ll take some testing to verify. Just give me some time and I’ll make a post with new versions.

When sexing up your blog/webpage/whatever, you create all the beautiful graphics and user-centric layouts. Thats great! I’m proud. When you are lacking that little something though, consider tooltips for the added pop.

What are these tooltips you speak of William? Good Question. Just take a look yourself by hovering over a link. If you’re using a decent browser, you’ll see a little window under the link describing it. Cool eh?

Why use the Tooltips?
There are tons of tooltip systems online, and I mean TONS! Why should you consider mine? Simplicity. I’ve have noticed developers want a flexible framework in which they can customize it for their needs. My system has no unneeded code and no unnecessary frills. It just gets the job done. Some of these other systems have quite a learning curve that would make it undesirable to use when you’re just going to modify the code anyway. For those that feel this way, my system is for you! If you’re a new developer looking for an easy and simple/clean looking solution, this is also for you!

How do you use them?
My tooltip system hooks into your standard title field. In more detail, any link on your page can have be given a title. Here is a sample:

<a href=”somehwere.html” title=”Hey! Here’s a link somewhere!”>Click to go!</a>

As you probably already know, the href section tells your link where to go. The title section is where the tooltip magic comes in. It hooks into this field and displays that text underneath the link. So if you want to add a tooltip to a link, just add a title. Don’t want a tooltip? Thats cool, just put a blank title or no title at all.

Will everyone see it?
Yes and no. It is tested to work with IE6+, Safari (Mac and Windows), Opera, and FF1.5+. So in reality it should work for all users or at least 90% of the population.

How do you install them?

1. Download the Tooltips, here.
2. Upload the Javascript file you just downloaded to your server.
3. Add some CSS to your HTML document.
   Here’s a sample:

   <style type=”text/css”>
   #tooltip {
   background: #FFF;
   color: #06c;
   height: 26px;
   width: 200px;
   position: absolute;
   left: 0px;
   top: 0px;
   display: none;
   font-size: 12px;
   border: 1px solid #06c;
   padding: 10px 0px 0px 0px;
   text-align:center;
   }
   </style>

4. Link the file in the <Head> section of your HTML document.
   Heres a sample:

   <script type=”text/javascript” src=”tooltip.js”/>

5. and you’re done. Congrats!

Enjoy, and let me know if you like it.