Null Links Best Practice

There have been instance were you want something to look like a link, but do something else when someone clicks is.

There are some various solutions out there, but here's the one I recommend.

Format your link like this

<a href="requirements.asp" onClick="javascript:YourJavascriptStuff;return false;">

Here's how this works: Make a page called requirements.asp, and on that page you list the minimum user requirements required for users to use your site. Obviously JavaScript is one of them.

When a user clicks the link, if they don't have a Javascript enabled browser, or have Javascript turned off, it will send them to the requirements page.

If they do have Javascript enabled, the 'return false' interrupts the HTTP call make by the href and executes the Javascript instead.

So it looks like a link, and will act like a link if there's no Javascript. If there is, the Javascript call will execute.

JavaScript - Close Window and Refresh Parent

I've run into this scenario more than once: I have a button or link that spawns a new window, usually a window with some sort of form in it, like a rating or comment. After the user make his or her rating or comment and submits it, I want the new window to close ad the window underneath to refresh to show the new rating or comment. So here's a JavaScript that will close a new window and also refresh the parent window.

The function:

<script language="JavaScript" type="text/javascript">
 function CloseAndRefresh() 
  {
     opener.location.reload(true);
     self.close();
  }
</script>

You can call the function a couple of ways. You can use a link:

<a href="#" onClick="CloseAndRefresh(); return:false;">Close</a>

Or a button:

< input type="button" value="close" onClick="CloseAndRefresh();"

Or you can make it part of the submit:

<input type="submit" value="submit" onClick="CloseAndRefresh(); return:true;"

JavaScript Open New Window

Here's the JavaScript I use when I want to spawn a new window:

Using a button:

<input value="submit" 
onclick="javascript:window.open 
('NewPage.html', 'WindowName', 
'width=450, height=350, top=100, left=100, toolbar=0,
menubar=0,location=0,status=0,scrollbars=0,resizable=0');" 
type="button">

Using a link:

<a href="#"
onclick="javascript:window.open
('NewPage.html','WindowName',
'width=450, height=350, top=100, left=100,
toolbar=0, menubar=0, location=0, status=0, scrollbars=0, resizable=0');
return:false;">New Window</a>

The return:false; at the end keeps the link click from completing, so you can use a # as the link destination.

How to Stop a Framebreaker Script

OK, let's say you found a page and, being the good Netizen you are, you want to share the page with the audience of YOUR web site.

Like any good webmaster, you dutifully employ an iframe, with the source being the URL of the page you want to share. Alas, when you load your page, the screen refreshes and you're taken away from your site to the page you're trying to load into the iframe.

You've just been framebusted.

Framebreaker scripts are very common. Webmasters employ them to keep OTHER webmasters from re-presenting their content in another site. But for every action, there's an equal and opposite reaction.

The next time you want to load remote content into an iframe on your site, try:

<iframe src="http://www.Somewhere.com/SomePage.html" security="restricted"></iframe>

The SECURITY attribute in IE allows you to open a third-party page as though it was within the high-security restricted sites level as defined within IE. This means no Javascript and that means framebuster scripts won't work.

The attribute doesn't work in non-IE browsers however. Javascript framebusters function correctly in those browsers.

Form Field Focus On Page Load

Sorry for not posting in so long... I've been lazy, or, rather, busy with other stuff and lazy about RetroWebDev.

In any case, here's another (hopefully) useful tip; how to get the curser to be in a form field on a page load. I find it especially useful for admin type pages that require a log in. You can have everything ready to go for the user to just start typing.

<BODY onLoad="document.forms.MyForm.UserName.focus()">

In this example, your form would look like this:

<form method="post" name="MyForm" action="YourActionPage.asp">
<input type="text" name="UserName" size="15">
<input type="text" name="Password" size="15">
<input type="submit" value="Search">
</form>

This is a simple log in form with two fields: UserName and Password. In this example, when the page loads, the cursor will be placed in the UserName field.

Remember! JavaScript is case sensitive!

How to Hide Email Addresses from Spammers

Are you tired of spam? I know I am.

Hard-core spammers use what are termed 'bot' to crawl the web and harvest email address. These bots search through page source code looking for email addresses. Because of the fixed format of an email address, they are pretty easy for to automatically extract from page code.

Here's a handy way to hide email address from most bots using JavaScript. Being client side executed, JavaScripts aren't run until the page is assembled by the client. Although most automated bots can see the JavaScript at the code level, they aren't able to execute it.

What this littel code does is seperate your email into variables, which JavaScript then assembles. Bot aren't able to assemble the parts, thus don't see the email address.

<script language=javascript>
<!--
var linktext = "Email the Webmaster";
var part1 = "webmaster";
var part2 = "MySite.com";

document.write("<a href=" + "mail" + "to:" + part1 + "@" + par2 + ">" +
linktext + "</a>")
//-->
</script>

Replace 'Email the Webmaster' with whatever link text you want, 'webmaster' with the front part of your email address, and 'MySite.com' woth the rest of your email address. Notice that I also break up the 'mailto' portion as well.

Simply place this little script wherever you want. Users (with JavaScript enabled) will be able to see it, but the bots won't!

JavaScript Back Button or Link

How do I make a back button or link?

This is a pretty common (and basic) question with an easy solution. Note that it requires you visitor have JavaScript enabled, but that covers about 96% or more of web surfers.

Link methods:

<a href="javascript:history.go(-1);">back</a>
<a href="#" onClick="javascript:history.go(-1);">back</a>
<a href="javascript:;" onClick="javascript:history.go(-1)">back</a>

Button method:

<input type="button" value="Go Back" onClick="javascript:history.go(-1);">

Image

<img src="GoBackImage.jpg" onClick="javascript:history.go(-1);">

You can change how many pages you sent the use back by changing the value in the parentheses; (-2) will send them back 2 pages.