JavaScript Tips

Creating accessible JavaScript pop-up windows

The usual script for creating pop-up windows does not a) work with JavaScript turned off and b) does not meet accessibility requirements. This method meets both of these requirements.

Lightbox

A neat way to open images over the main page. Some Ajax sites use a similar technique. Lightbox

Forcing a download for files

If you have downloadable files on your site, doc, xls or pdf for example, you may wish to force the users to download the files rather than open them. This requires some complex script in asp or php but a simple bit of JavaScript can at least prompt users to download and force them to take the decision, rather than have files open automatically.

Try this document link

Copy the code below and paste into your Code view in EW, then amend as needed.

<a onmouseover="self.status='Downloadable file'; return true" onmouseout="self.status=''" onclick="alert('Please right click and use \'Save Target/Link As\'.'); return false" href="dummydoc.pdf">document link</a>

Showing / Hiding text when a link is clicked

It's sometimes useful to hide text on a page and only show it when a user clicks a relevant link. On a Frequently Asked Questions (FAQ) page for example. Try the following links. Click to show, click to hide again.

What is Expression Web?

Expression Web is Microsoft's professional web design tool

Where is the home page for the Expression family?

The Expression family home page is here

How?

Copy the following JavaScript into the head tags of your page


<style type="text/css">

#descEW, #descEW2 {
	display:none;
}

</style> <script type="text/javascript">
function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// for old MS IE versions
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// for NN4 if you really must!
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}


</script> <noscript>
<style type="text/css">

#descEW, #descEW2 {
	display:block;
}

</style> </noscript>

[Notice the <noscript> block which shows the text if JavaScript is turned off.]

Then, for the above example, copy the code below into the body of your page

My site won't validate. The JavaScript gives errors.

A simple thing that often catches you out when you first validate a page on the W3C site. (Use the browser toolbars to give easy access to this).

The solution is to comment out the JavaScript as you might have done in the past for old browsers. Eg:

.........

-->
</script>

Once this is done the page will valid normally without errors from the JavaScript