Sitellite Cookbook

Sitellite features powerful drop-in replacements for the browser's built-in prompt() and alert() Javascript functions. These replacements offer a few more features, but mainly serve to add polish and style to your web-based applications.

Traditionally, prompt() was an easy way of getting a bit of information out of a user, and alert() was an easy way of conveying a bit of information to them, such as a data input error.

The problem with them is that their visual output doesn't feel like part of your website, and can even be confusing to users because of this (a prompt dialogue in Firefox keeps the page loading graphic spinning until it's been closed, and I know of at least one user who has asked me if that means something's wrong).

So we went about replacing these in recent versions of Sitellite, with the latest being a totally integrated experience in 4.2.12 with the popups occurring as floating divs complete with animation as they open and close (courtesy of Script.aculo.us).

Inclusion in Your Script

To include the replacements, simply call this somewhere in your PHP code:


<?php
loader_import ('saf.GUI.<span class="highlighted"><span class="highlighted">Prompt</span></span>');
?>

You can also call that in a .spt file via:

{exec loader_import ('saf.GUI.<span class="highlighted"><span class="highlighted">Prompt</span></span>')}

This package automatically includes the necessary Javascript and CSS files from the /js/ folder.

Alerts

At their simplest, coding an alert is identical to how one was made before:

alert ('This is an alert box');

This will cause an alert box to appear in the middle of the current browser window for 3 seconds and then fade away. There's one new feature for alerts with more text or more important messages though, which is that you can specify an extended length of time for them to appear, in seconds:

alert ('This is an important notice', 10);

This alert box will appear for 10 seconds then fade away. Users can also dismiss an alert earlier than that simply by clicking on the window.

So a complete alert example you can include into your .spt files would be:

{exec loader_import ('saf.GUI.<span class="highlighted"><span class="highlighted">Prompt</span></span>')}

<a href="#" onclick="return alert ('This is an important notice', 10)">Click me!</a>

Basic Prompt

Traditionally, a prompt() call worked like this:

function say_hello () {
    name = <span class="highlighted"><span class="highlighted">prompt</span></span> ('Please enter your name:');
    if (name == false || name == null || name.length == 0) {
        return false;
    }
    alert ('Hello ' + name);
    return false;
}

With the prompt replacement, this changes to become:

function say_hello () {
    <span class="highlighted"><span class="highlighted">prompt</span></span> (
        'Please enter your name:',
        '',
        function (name) {
            if (name == false || name == null || name.length == 0) {
                return false;
            }
            alert ('Hello ' + name);
        }
    );
    return false;
}

The differences are as follows:

The second parameter is a default value (empty in the above case)
The third parameter is an abstract function which is called with the prompt's return value

Advanced Prompt

Sitellite's prompt() replacement has the ability to create prompt windows with select boxes and textareas in addition to the usual single-line text input fields. The Xed editor uses this, for example, for its HTML source view mode.

This is done by creating a Prompter object and setting properties on it, then calling its open() method. The replacement prompt() function is actually simply a function that calls this object behind the scenes.

In the example below, we create a Prompter object named "p" and we pass it the function that will handle the return value of the prompting. Next, we set the prompt type to "select" and set the options we'd like the user to have. In this example we also change the width and height of the prompt window, which is usually not necessary unless you have a large textarea prompt. Lastly, we call the open() method and pass it the label for the window.

<script language="<span class="highlighted">javascript</span>" src="/js/<span class="highlighted"><span class="highlighted">prompt</span></span>.js"> </script>
<script language="<span class="highlighted">javascript</span>">

function birthday () {
    p = new Prompter (function (choice) {
        if (choice == 'Yes') {
            alert ('Happy Birthday!');
        }
    });

    p.type = 'select';
    p.options = ['No', 'Yes'];
    p.width = 300;
    p.height = 150;

    p.open ('Is it your birthday today?');

    return false;
}

</script>

As you can see from these examples, our prompt() replacement is a flexible and elegant alternative to the default prompt() function provided by web browsers.

Style Changes

To override the style of the prompt or alert boxes, open the file js/prompt.css and copy the styles there into your own CSS (ie. in your template set). When you make adjustments, add !important to the end of those lines, like this:

background: #cde !important;

That's all there is to it..

Revision from August 1, 2007 1:35 PM by anonymous

Forward in time (1 more) | Back in time (2 more) | See current | See changes | Linked from: Libraries

Topics

Members

Javascript Prompt Alert

Inclusion in Your Script

Alerts

Basic <span class="highlighted"><span class="highlighted">Prompt</span></span>

Advanced <span class="highlighted"><span class="highlighted">Prompt</span></span>

Style Changes