May 2016: How to create a moveable container under wSurvey.
March 2020. This is mostly-deprecated. We recommend using wsurveyMoveBoxes instead.
The following describes how to create a moveable/resizeable DIV (or other container) that will work under all browsers.
The jQuery library is required, as are the various wSurvey libraries. HTML5 capability is NOT required!
Note: For an older, more generic method, see wsurveyMoveBox.txt
For a simpler method, see wsurveyShowAlert.txt
I. Basic Useage
One creates an element (such as a DIV) which we call the "moveable box". One then adds sub elements (such as SPANs)
that will be treated as small buttons.
These small buttons can be used to move, resize, or hide the element; with moving and resizing by clicking and dragging the
appropriate button
II. Specification
The following details how to create a moveable container.
IIa. Specifying javascript and stylesheets
In the html file (that will have the moveable container) section, specify
and
IIb. Creating the container
In your document (say, at the bottom) create this "hidden" container. Feel free to modify the titles and values,
but do NOT modify the class, style, and onClick attributes.
You may also want to change the alertBox style (say, to change the initial size and placement of the container).
(alert box default message)
IIc. Assigning event handlers
In a javascript function that is run upon page load, specify a few event handlers.
For example:
IIc. Creating a reopener button (optional) -- redisplay container after minimization
Somewhere in the main body of the HTML document (say, at the top of the screen), insert the following:
⇕
IId. Enabling ESC key (to close container)
In the initialization function, insert:
$(document).keyup(showAlertOnTop_doEsc) ;
Note: this is a rather primitive method: the showAlertOnTop_doEsc function makes no attempt to work with
other keystroke handlers.
III. Using the moveable container
The showAlertOnTop function is the easiest way to use the moveable container.
Just call it when needed (i.e.; when a button is clicked).
For example:
When the button is clicked, the moveable container is displayed with a "The detais ..." message.
The container can then be moved, or resized. Or it can be dislayed in a new window. And then it can be closed.
For details on the showAlertOnTop function, see jsLib/wsurveyShowAlert.txt
IV. Simpler message box
For a non-moveable container (say, to display status messages), you can use the showStatusMessage function
(see jsLib/wsurveyShowAlert.txt for the details).
To use showStatusMessage, create the following (say, after the moveable container html)
status messages go here
status messages go here also
Example of useage:
showStatusMessage('Hello ') --
displayed "Hello" in the "first" status messages box
showStatusMessage(' Are you ready ',4000,0,2) ---
displays "Are you ready " in status message box 2, which will fade out in 4 seconds"
Extra feature: to enable "click on close" of status messages, include the following javascript code (say,
in the initializtion)
var q1a=$('#statusMessageBox');
q1a.on('click',function() {
var q1b,v2;
q1b=$('#statusMessageBox');
v2=q1b.is(':animated');
if (v2) {
q1b.stop(true,true);
q1b.fadeIn(5).show();
} else {
q1b.slideUp(250);
}
});
var q1aa=$('#statusMessageBox2');
q1aa.on('click',function() {
var q1bb,v2b;
q1bb=$('#statusMessageBox2');
v2b=q1bb.is(':animated');
if (v2b) {
q1bb.stop(true,true);
q1bb.fadeIn(5).show();
} else {
q1bb.slideUp(50);
}
});