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). 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); } });