Posts tagged "js_tip"

Creating Custom JavaScript Alerts

Slayeroffice has a
nice tutorial
on creating custom JavaScript alert boxes. Custom
alert boxes, in and of themselves, are nothing to write home about, but the
slayeroffice tutorial suggests an interesting twist. Rather than calling your own
alert function, like this…

if (foo) {
myCustomAlert("Hey, you can't do that!");
}

… they suggest actually replacing the default window.alert() function with your
own. There’s plenty of code in the tutorial, but here’s the code that actually
performs the magic:

window.alert = function(txt) {
createCustomAlert(txt);
}

What’s the advantage of overriding the default window.alert() function rather
than calling your own? First, it’s way cooler. But second, it allows you to easily
retrofit existing applications with new and improved alert boxes.
For instance, most web applications include a common header, so in order to change
all the alert boxes for an entire application, you can simply drop some new code
in your application’s header, and magically, all those ugly gray default alert
boxes are transformed. Pretty cool stuff.

Advanced JavaScript Settings in Firefox

There are few things I hate more than websites that resize and/or move your browser.
I don’t visit a lot of sites that would tend to use such techniques, but every now
and then, I’ll come across one. I found one the other day (a watch-related site
which I will allow to remain anonymous) at which point I decided I would not quit
until I found a way to configure Firefox to not allow such poor JavaScript behavior.
Fortunately, the solution was simple. Open up Firefox preferences, go to Web Features,
and click on the "Advanced…" button next to JavaScript. You can allow
or disallow the following:

  • Move or resize existing window
  • Raise or lower windows
  • Disable or replace context menus
  • Hide the status bar
  • Change the status bar
  • Change status bar text
  • Change images

If your website relies on any of the functionality listed above, you might want
to consider a redesign. I’m not saying that Firefox is about to take over the world
(though I certainly wouldn’t mind if it did), but I think it’s safe to say that
the trend is toward giving end users more control over their experience. And in
the end, users will simply appreciate your site more if it behaves the way they
want it to rather than the way you want it to.

JavaScript Function to Automatically Focus Your Curser

Here’s a simple JavaScript function that iterates through all the forms on a page and drops the cursor in the first text or textarea input it finds. Not rocket science, but useful. If you’re building
an application, you probably include a header from each page, so
the way to use this function is to put it in your header (or better
yet, source or include it from your header), and call it onLoad.
That way, it will automatically work on any page in the application
with a form on it. If a page doesn’t have any forms, or you have
a form with no text or textarea inputs, the function does nothing.

function focusCursor()
{
for (var i = 0; i < document.forms.length; ++i)
{
var f = document.forms[i];
for (var j = 0; j < f.elements.length; ++j)
{
if (f.elements[j].type == 'text' ||
f.elements[j].type == 'textarea')
{
f.elements[j].focus();
return;
}
}
}
}

JavaScript References

Now that Netscape’s JavaScript reference material appears to be gone, what are people using for online resources? Once I discovered DevEdge was no more, I resorted to some old-fashioned paper-based O’Reilly books. Today I started using Google to find some new online resources, and I’m surprised by how hard good ones are to come by. Any favorites?