jwt_move

Description
This script implements movement of an image or block (e.g. <div> ) on the screen. The speed, step size, distance of move and direction can be defined in the script call line or in a supporting list file. The movement can be defined to go beyond the visible screen or can be limited to the screen edge by using the "bounds" option. The moveX and moveY  can be measured from several locations on the screen or from the currnet position.

The script supports a cascade of commands, defined in a list file, to give stunning visual effects on the screen

Definitions
 The fundamental call line format is :-
         'task_name'( 'prime_name', {name:'element_name',  other_options } )
where:-
'prime_name',  is only used as a default for the 'element_name' and/or 'list_name', if these are  missing from the options section in the call line and/or missing from an associated list file. Normally this field can be any text string or just left blank.
 'list_name',  to be replaced with a name of your choice, is one ot the other_options.  It is the name of the instruction list in the <HEAD> section of th html file and/or in the jwt_list.js file that contains either additional options for a single operation and/or a list of options for cascaded commands. The list: option defines the path to all the other options if they are not given in the call line. The search order for commands and options is given later in this document : 'list_name', is a critical pointer for this search.
'element_name',  to be replaced with a name of your choice, is the cross reference to the placed <div> or <img> within the html file which is defined by the id tag of that element. The element_name, if not given in the call line, MUST be defined in an instruction list which is referenced by having list: 'list_name', defined in the options section. If not found here, the element name will ultimately default to the 'prime_name', if that exists. The program cannot run without an element name defined.
'task_name' (see later for running in a cascade) is the function  to be run such as jwt_move or jwt_zoom.
other_options associated with the declared task can be included in the call line within the curly {}  and/or in the named list.

The code has been written to have a priority look-up for each option :-
                (1)  call line  --> (2)  list file option  -->  (3) list file default_name  -->  (4) prime_name
Unfortunately there are a few exceptions to this general search order :-
Script call line in html
 The fundamental call line can be modified in several ways to define the essential 'element_name' and 'task_name'  :-
              jwt_move( , {name:'element_name',  other options } )
              jwt_move( 'element_name, { other options } )
  This second case works according to the search rules above -- instruction list is not available s not defined by the list:'list_name' option.
Note if there are no other_options defined the the call linecan be reduced to :-
              jwt_move( 'prime_name').
The 'element_name and the 'list_name' will use the  'prime_name'.

Script using instruction list file (in html <HEAD> section or in an associated list file)
All that is required in the html is : <img id = 'element_name' ><script>jwt_zoom( 'element_name' )</script>
Even though the list name will default to the element name, by definition for the search priority given above, it is preferrable to define it in the options section by list:'list_name'
                       <script>jwt_zoom(,{task:'task_name', name: 'element_name', list: :'list_name' } )</script>
The format of the instruction list is very similar to the html call line syntax. In the examples below, several lines of options are given which will be used in cascade operation. Note: the last line in the list does not have atrailng comma.

var jwt_list=new Array();
jwt_list["list_name"]= [
["prime_name", {task:'jwt_move', moveX:200, step:7}],
["prime_name", {task:'jwt_zoom', width:200, speed:6, startX:'right'}],
["prime_name", {task:'jwt_zoom', height:100, speed:2,:'startY:'top'}]
                                    ]

In a case where it is required to move a different div block or image during the sequece of moves, it is possible to code the list :-

var jwt_list=new Array();
jwt_list["list_name"]= [
["example", {task:'jwt_move', moveX:100, step:7}],
["flag", {task:'jwt_move', moveX:0, moveY:-100, startX:'origin'}],
["prime_name", {name:'example', task:'jwt_move', moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

Note: Even though the the  'element_name' has been specified in two different ways (for illustration) in this list, it is preferrable thatthe name is declared in the options section as shown in the last line.

Finally, in a case where it is required to use a different function in the sequence of cascaded commands, it is possible to code the list :-
var jwt_list=new Array();
jwt_list["list_name"]= [
[,{name:'example',  task:'jwt_move', moveX:100, step:7'}],
[, {name:'flag',  task:'jwt_zoom', width:250, startX:'left', startY:'middle'}],
[, {name:'example',  task:'jwt_move' , moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

move options
description option names default values notes  
id name of the block or image to be increased or decreased in size. name: *must be given *
name of list containing commands to be cascaded list: same name as <div> id
movement in X direction ( - number to move left) relative to defined start position moveX: 0 units px 
"left","centre" or "right" will move to edge of screen
movement in Y direction ( - number to move down) relative to defined start position moveY: 0 units px 
"top", "middle" or "bottom will move to edge of screen
an offest movement from the final location
offsetX: 0 units px 
an offest movement from the final location offsetY: 0  units px
The start position, in the viewable screen,  for the moveX and moveY
startX: "origin" "left"
"centre"
"right"
The start position, in the viewable screen,  for the moveX and moveY
startY: "origin" "top"
"middle"
"bottom"
The increment used for the movement
step: 8
 units px
a large number (e.g.9999) will  jump immedately to final location.
Defines the speed of movement
speed: 1 larger number --> slower movement
Defines the bounds for any X /Y movement even if the moveX and/or moveY give larger numbers bounds: "nobounds" "edge"
Delay before next cascade function delay
0
units sec
Defines where the delay is timed from on current task
from
"end"
"start"
"end"
*  Defines a change to another function
task: "jwt_move"  e.g. jwt_zoom
 * these options are only used for cascaded commands in the list file


Required sub-scripts
jwt_define_arrays defines the arrays used within the main function
jwt-set saves the position before any moves so that a reset is possible
jwt_screen determines the screen dimensions and scroll offsets.
jwt_move_loop used for the incremental moves -- step-by-step loops around the sub-function
jwt_feedback
code for generating feedback and delay to avoid using eval()


Move notes
With startX: 'centre' and startY:'middle'  and moveX:0  and moveY:0 the block/image will move to the centre of the screen..

With moveX:left and  offsetX:10 the block/image will move to 10px inside the left edge.

The moveX , move Y to left/right/top/bottom will automatically define the bounds to be "edge" but will not change the bounds defined parameter.

moveX : 'top' is equivalent to moveX : 9999,bounds : 'edge'

from: needs to be used with caution.Must avoid having two functions running on same element otherwise screen picture is a mess.

task: is a special case when the cascaded movements are being used. It allows other similar functions, such as jwt_zoom, to be incorporated in the sequence.

Examples
The jwt_move_example file contains two elements, a div block and an image, defined by id="red_box" and id="picture" respectively which can be moved around the screen. The form is only for demonstration purrposes allowing the options to be changed and a position reset to be invoked.  The options will normally be coded into the script call line but in this example page new options can be entered into the form to explore how the script works and to demonstrate the full capability. The form can also be moved around the screen since it's id="trial".

The jwt_it_example file contains 2 marquees (described in the jwt_marquee document) and two elements : a div block and an image which move across the screen The image , a flag, has a simple move defined in the script call line whereas the div block  has three cascaded movements defined in the list file. In both cases the speed and step size has been set to different values.

Cascading commands