jwt_change_class
ALL BELOW TO BE CHANGED
Description
This script implements increase or decrease in size of an image on the
screen. The speed, step size and origin of expansion/contraction
can be defined in the script call line or in a supporting
list file..
The script supports a cascade of commands, defined in a
list
file, to give stunning visual effects on the screen.
Script
call line in html
The fundamental format is :-
jwt_it( '
default_name',
{task:'
task_name',
name:'
element_name',
list:'
list_name'}
)
where:-
'
list_name'
is the name of a list 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_name, if not given in the
call line, will use the
default_name.
'
task_name'
is the
function to be run such as jwt_move or jwt_zoom.
'
element_name'
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 will use the name
defined in one of the associated list files and if these are
not found will
use the
default_name.
If two associated list files exist, one defined by the options list:
and the other defined by the default_name, then the one defined by the
list: eill take precidence. All options will be taken from this file
and the default_name list will not be referenced.
Note : other options associated with the declared task can be included
in the call line within the curly {} or in the named
list.
The code has been written to have a priority look-up for the options :-
call
line --> list
file --> program defaults (except
for '
element_name')
call
line --> list
file option OR list
file
default_name
-->
default_name (for
'element_name')
The allowable options for each
different task are defined in the dedicated documentation for that task.
Script
call line - flexibility
The fundamental call line can be modified
in several ways to define the list_name, element_name and
task_name :-
jwt_zoom( '
default_name',
{task:'
task_name',
list:'
list_name'}
)
element_name will be defined by the
default_name
if the options name: is not defined.
jwt_zoom( '
default_name',
{task:'
task_name',
name:'
element_name'}
)
list_name will
be defined by the
element_name
if the options list: is not defined.
jwt_zoom( '
default_name,
{name:'
element_name',
list:'
list_name'}
)
'task_name
will be taken from the list file and, if not defined here,
will use a program default.
jwt_zoom( '
default_name',
{task:'
task_name',
list:'
list_name'}
)
'
element_name',
the call line '
default_name'
name will be taken if both the list file options and the
'
default_name'
are not defined.
Thus it is possible to use jwt_it( '
element_name').
The element_name and the list_name will use the default_name and the
task must be defined in the list file options.
A sophisticated user of the jwt_* functions can adjust the
default
options in the scripts to define user specific default values in
his/her web site.
Script
using list file
All that is required in the html is : <img id =
'element_name'
><script>jwt_zoom( '
element_name'
)</script>
All the options and the cascaded movement can be defined in the list
file which has a similar syntax to the script call line. The
element_name
in the script call line, in this case, actually refers to the section of the list file
to be used (red) and the first entry in the each line of the
list
(blue) is the element id to receive the commands. If this entry is left blank (" ") then it will default to the
list_name in the script call line. Normally the names
are all the same.
var jwt_list=new Array();
jwt_list["
list_name"]=
[
["
default_name",
{task:'
jwt_move',
moveX:100, step:7}],
["
default_name",
{task:'
jwt_move',
moveX:0, moveY:-100, startX:'origin}],
["
default_name",
{task:'
jwt_move',
moveX:100, moveY:'bottom', offsetY:30}]
].
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'}],
["
default_name",
{name:'
example',
task:'
jwt_move',
moveX:100, moveY:'bottom', offsetY:30}]
]
Note: thw name: has been specified in two different ways in this list and the element flag will recieve the
command .options.
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"]=
[
["
example",
{task:'
jwt_move',
moveX:100, step:7'}],
["
flag",
{task:'
jwt_zoom',
width:250, startX:'left', startY:'middle'}],
["
example",
{task:'
jwt_move'
, moveX:100, moveY:'bottom', offsetY:30}]
]
zoom 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 |
|
The new width of the image |
width: |
0 |
units px
|
The new height of the image |
height: |
0 |
units px
|
The fixed X location of the zoom
|
startX: |
"centre" |
"left"
"centre"
"right"
|
The fixed Y location of the zoom
|
startY: |
"middle" |
"top"
"middle"
"bottom"
|
The increment used for the zoom
|
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 a change to another function
|
task: |
"jwt_move" |
e.g. jwt_move |
* 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_zoom_loop |
the loop around for the steps |
Zoom notes
Examples
The jwt_zoom_example file has an
image, defined by id="picture" which can
be increased or decreased in size . 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 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 and a zoom at the end of the sequence whereas the div block has three cascaded movements
defined in the list file. In all cases the speed and step size has
been set to different values.
Cascading commands
The jwt_it script can be used to start the cascade of commands running.
<script>jwt_cascade( 'name',
{list:"list_name"}
)</script>