DIR : /home/kozerus/public_html/wz/wz0.html
/home/kozerus/public_html/wz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>/ko/wz.html 20240220_1510 script_csv2json() kd_display() startup() kd_ajax() </title>
<!--
<title>/ko/wz.html 20240220_1500</title>
-->
<link rel="stylesheet" type="text/css" href="/js/wz/newwalterzorn.css">
<style id=style_wz type="text/css">
<!--
#reltab {
position:relative;
border:1px solid #000099;
background:#d3e3f9;
layer-background-color:#d3e3f9;
}
#greylyr {
position:absolute;
left:6px;
top:380px;
width:122px;
border:1px solid #000099;
background:#eeeeee;
layer-background-color:#eeeeee;
overflow:hidden;
visibility:hidden;
}
#ingreylyr { padding:3px; }
#bluelyr {
position:absolute;
visibility:hidden;
left:0px;
top:2000px;
width:460px;
padding:20px;
border:1px solid #000099;
background:#d3e3f9;
layer-background-color:#d3e3f9;
visibility:hidden;
}
-->
</style id=div_wz_end>
<script id=script_wz >
<!--
if (!document.layers) {
document.write('<style type="text/css">#reldiv {position:relative;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}'+
'#reldiv2 {position:relative;top:5px;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}<\/style>');
}
//-->
</script id=script_wz_end>
<script id=script_onclicks>
function onclicks(args) {
alert( "BUGS_200 onclicks args="+args );
return(args);
</script id=script_onclicks_end>
<script id="script_geturlparameter" >
function geturlparameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
</script id=script_geturlparameter_end >
<script id=script_csv2json>
function csv2json(csv, delimiter) {
// alert( "BUGS_50_CSV2JSON csv="+csv+" csvlen="+csv.split("\n").length );
var lines=csv.split("\n");
var jsn = [];
var headers="";
for(var j=1;j<lines.length;j++){
if (!lines[j]) continue;
if( headers == "" ) { headers=lines[j].split(delimiter); continue; }
var obj = {};
var currentline=lines[j].split(delimiter);
for(var k=0;k<headers.length;k++) {
obj[headers[k]] = currentline[k];
// alert(" BUGS_101 jk="+j+","+k+" obj_headers="+obj[headers[j]]+" currentline="+currentline[j] );
}
jsn.push(obj);
}
// return result; //JavaScript object
jsntxt=JSON.stringify(jsn);
jsn_jsntxt=JSON.parse(jsntxt);
// alert( "BUGS_12_CSV2JSON jsn="+jsn+" jsnlen="+jsn.length )
// alert( "BUGS_13_CSV2JSON jsntxt="+jsntxt+" jsntxtlen="+jsntxt.split("\n").length )
// alert( "BUGS_13_CSV2JSON jsntxt="+jsntxt+" jsntxtlen="+jsntxt.split("},").length )
// return(jsntxt);
return(jsn);
//// for( i=0; i<result.length; i++ ) {
//// result[i].img="/imgs./imgs/img"+i+".png";
//// }
//// for( i=0; i < result.length; i++ ) {
//// var obj=result[i];
//// key="img";
//// val = obj[key];
////
// for( var key in obj ) {
// val = obj[key];
// }
//// }
//// var keys = Object.keys(testjson);
// Object.entries(testjson).forEach( ([key, val]) => alert( "BUGS_102_key="+key+" val="+val ));
// Object.keys(testjson).forEach( function(key) {
// j=j+1;
// });
// for (const [key, val] of Object.entries(testjson)) {
//// for (var key of Object.keys(testjson)) {
//// j=j+1;
//// }
//// return(testjson);
}
</script id=script_csv2json_end>
<script id=script_ko_displays>
// todo add bs4
// "rownum|id|status|sort|lin|linbeg|lincnt|linend|linlim|label|headmark|tailmark|x|y|z|h|w|dx|dy|dz|dh|dw|xmin|ymin|zmin|hmin|wmin|xmax|ymax|zmax|hmax|wmax|color|fsrc|tsrc|descr|txt|b64|kludge"
function ko_displays(args) {
// dttm=dttm('');
dttm="20240123_0800";
j=0; k=0;
htmout=""; htmout_display=""; htmout_bugs="";
htmout+="<h1>ko_displays args="+args+"</h1>\n";
htmout+="<h2>"+dttm+"</h2>\n";
htmout_display=htmout;
htmout_bugs=htmout;
divid_display="div_display_body";
divid_bugs="div_bugs_body";
// alert( "BUGS_600 ko_displays args="+args+" divid="+divid+" htmout="+htmout );
// return;
if( args == "clear" ) {
htmout_bugs+="<div id=div_bugs_body align=left>\n";
htmout_bugs+=" <h2>div_bugs_body "+dttm+</h2>\n";
htmout_bugs+=" </div id=div_bugs_body_end>\n";
htmout_display+="<div id=div_display_body>\n";
htmout_display+=" <h2>div_display_body "+dttm+</h2>\n";
htmout_display+=" </div id=div_display_body_end>\n";
// alert( "BUGS_601 ko_displays CLEAR args="+args+" divid="+divid+" htmout="+htmout );
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).innerHTML=htmout_bugs;
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).innerHTML=htmout_display;
}
// alert( "BUGS_602 ko_displays CLEAR args="+args+" divid="+divid+" htmout="+htmout );
return(args);
}
htmout_cards=ko_display('cards');
htmout_fans=ko_display('fans');
htmout_players=ko_display('players');
htmout_horses=ko_display('horses');
htmout_pot=ko_display('pot');
htmout_timeline=ko_display('timeline');
htmout_display+=htmout_timeline;
htmout_display+=htmout_cards;
htmout_display+=htmout_fans;
htmout_display+=htmout_players;
htmout_display+=htmout_pots;
htmout_bugs+=htmout_timeline;
htmout_bugs+=htmout_cards;
htmout_bugs+=htmout_fans;
htmout_bugs+=htmout_players;
htmout_bugs+=htmout_pots;
htmout_bugs+=htmout_timeline;
display(htmout_display);
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// }
if( document.getElementById(divid_bugs)) {
alert( "BUGS_601 ko_displays ___FOUND divid_bugs="+divid_bugs+" htmout="+htmout );
document.getElementById(divid_bugs).insertAdjacentHTML("beforebegin",htmout_bugs);
// document.getElementById(divid).insertAdjacentHTML("afterbegin",htmout);
// document.getElementById(divid).insertAdjacentHTML("beforeend",htmout);
// document.getElementById(divid).insertAdjacentHTML("afterend",htmout);
}
else {
alert( "BUGS_602 ko_displays NOTFOUND divid_bugs="+divid_bugs+" htmout_bugs="+htmout_bugs );
}
if( document.getElementById(divid_display)) {
alert( "BUGS_611 ko_displays ___FOUND divid_display="+divid_display+" htmout_display="+htmout_display );
document.getElementById(divid_display).insertAdjacentHTML("beforebegin",htmout_display);
else {
alert( "BUGS_612 ko_displays NOTFOUND divid_display="+divid_display+" htmout_display="+htmout_display );
}
return(htmout);
}
</script id=script_ko_displays_end>
<script id=script_ko_display>
function ko_display(args) {
// alert( "BUGS_640 ko_display args="+args );
// alert( "BUGS_641 ko_display args="+args );
j=0; k=0; htmout=""; htmout_bugs=""; htmout_display="";
dttm="20240129_0700";
// dttm=dttm('');
// alert( "BUGS_642 ko_display dttm="+dttm );
var yyyy_mm_dd = new Date().toISOString().slice(0, 10);
var hh_mm_dd = new Date().toISOString().slice(11, 19);
var dttm=yyyy_mm_dd+"_"+hh_mm_dd;
// alert( "BUGS_641 ko_display dttm="+dttm );
divid="div_bugs_body";
divid_bugs="div_bugs_body";
divid_display="div_display_body";
if( args == "clear" ) {
htmout+="<div id=div_bugs>\n";
htmout+=" <h2>div_bugs</h2>\n";
htmout+=" <h3>"+dttm+"</h3>\n";
htmout+=" </div id=div_bugs_end>\n";
htmout_bugs+="<div id=div_bugs_body>\n";
htmout_bugs+=" <h2>div_bugs_body</h2>\n";
htmout_bugs+=" <h3>"+dttm+"</h3>\n";
htmout_bugs+=" </div id=div_bugs_body_end>\n";
htmout_display+="<div id=div_bugs_body>\n";
htmout_display+=" <h2>div_display_body</h2>\n";
htmout_display+=" <h3>"+dttm+"</h3>\n";
htmout_display+=" </div id=div_display_body_end>\n";
// alert( "BUGS_661 ko_display CLEAR "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).innerHTML=htmout_bugs;
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).innerHTML=htmout_display;
}
divid_race="div_ko_trackline_display";
if( document.getElementById(divid_race)) {
document.getElementById(divid_race).innerHTML=htmout_display;
}
// alert( "BUGS_662 ko_display CLEAR "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
return(args);
}
divid=args;
if( document.getElementById(divid)) {
htmout=""; htmout_bugs=""; htmout_display="";
fmt="txt";
fmt="code";
fmt="pre";
fmt="htm";
if( fmt == "pre" ) { htmout+="<pre\n"; }
if( fmt == "txt" ) { htmout+="<pre id=pre_innerhtml>\n"; }
if( fmt == "code" ) { htmout+="<code id=code_innerhtml>\n"; }
htmout+=document.getElementById(divid).innerHTML;
if( fmt == "pre" ) { htmout+=" </pre>\n"; }
if( fmt == "txt" ) { htmout+=" </pre id=pre_innerhtml_end>\n"; }
if( fmt == "code" ) { htmout+=" </code id=code_innerhtml_end>\n"; }
alert( "BUGS_700 ko_display htmout="+htmout );
htmout_bugs=htmout;
htmout_display=htmout;
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "cards" ) {
// src
// alert( "BUGS_671 ko_display CARDS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// alert( "BUGS_672 ko_display CARDS "+dttm+" args="+args+" cards_json="+cards_json+" len="+cards_json.length );
// alert( "BUGS_673 ko_display CARDS "+dttm+" args="+args+" cards_psv="+cards_psv+" len="+cards_psv.split("\n").length );
htmout+="<h1>cards_json "+cards_json.length+"</h1>\n";
htmout+="<table id=table_cards>\n";
htmout+="<tr><td>j</td><td>num</td><td>suite</td><td>id</td><td>src</td></tr>\n";
// num|suite|id|src
for(j=0; j<cards_json.length; j++) {
num=cards_json[j].num;
suite=cards_json[j].suite;
id=cards_json[j].id;
src=cards_json[j].src;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+num+"</td>";
htmout+=" <td>"+suite+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+src+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_cards_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// alert( "BUGS_101 htmout="+htmout );
// alert( "BUGS_102 htmout_bugs="+htmout_bugs );
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "fans" ) {
// num|id|status|src|name|cards|horses|amt|potamt
// alert( "BUGS_660 ko_display FANS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>fans_json "+fans_json.length+"</h1>\n";
htmout+="<table id=table_fans>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>num</td>";
htmout+=" <td>id</td>";
htmout+=" <td>fid</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>status</td>";
htmout+=" <td>src</td>";
htmout+=" <td>name</td>";
htmout+=" <td>cards</td>";
htmout+=" <td>horses</td>";
htmout+=" <td>amt</td>";
htmout+=" <td>potamt</td>";
htmout+=" </tr>\n";
for(j=0; j<fans_json.length; j++) {
num=fans_json[j].num;
id=fans_json[j].id;
fid=fans_json[j].fid;
pid=fans_json[j].pid;
status=fans_json[j].status;
src=fans_json[j].src;
name=fans_json[j].name;
cards=fans_json[j].cards;
horses=fans_json[j].horses;
amt=fans_json[j].amt;
potamt=fans_json[j].potamt;
htmout+="<tr>";
htmout+="<td>"+j+"</td>";
htmout+="<td>"+num+"</td>"
htmout+="<td>"+id+"</td>"
htmout+="<td>"+fid+"</td>"
htmout+="<td>"+pid+"</td>"
htmout+="<td>"+status+"</td>"
htmout+="<td>"+src+"</td>"
htmout+="<td>"+name+"</td>"
htmout+="<td>"+cards+"</td>"
htmout+="<td>"+horses+"</td>"
htmout+="<td>"+amt+"</td>"
htmout+="<td>"+potamt+"</td>"
htmout+=" </tr>\n";
}
htmout+=" </table id=table_fans_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "players" ) {
// num|id|status|src|name|cards|horses|amt|potamt
// alert( "BUGS_670 ko_display PLAYERS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>players_json "+players_json.length+"</h1>\n";
htmout+="<table id=table_players>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>num</td>";
htmout+=" <td>id</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>fid</td>";
htmout+=" <td>status</td>";
htmout+=" <td>src</td>";
htmout+=" <td>name</td>";
htmout+=" <td>cards</td>";
htmout+=" <td>horses</td>";
htmout+=" <td>amt</td>";
htmout+=" <td>potamt</td>";
htmout+=" </tr>\n";
for(j=0; j<players_json.length; j++) {
num=players_json[j].num;
id=players_json[j].id;
pid=players_json[j].pid;
fid=players_json[j].fid;
status=players_json[j].status;
src=players_json[j].src;
name=players_json[j].name;
cards=players_json[j].cards;
horses=players_json[j].horses;
amt=players_json[j].amt;
potamt=players_json[j].potamt;
htmout+="<tr>";
htmout+="<td>"+j+"</td>";
htmout+="<td>"+num+"</td>"
htmout+="<td>"+id+"</td>"
htmout+="<td>"+pid+"</td>"
htmout+="<td>"+fid+"</td>"
htmout+="<td>"+status+"</td>"
htmout+="<td>"+src+"</td>"
htmout+="<td>"+name+"</td>"
htmout+="<td>"+cards+"</td>"
htmout+="<td>"+horses+"</td>"
htmout+="<td>"+amt+"</td>"
htmout+="<td>"+potamt+"</td>"
htmout+=" </tr>\n";
}
htmout+=" </table id=table_players_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "horses" ) {
// num|cnt|max|id|hid|status|src|name|horsexy|width|distance|position
// num|cnt|max|id|src|name|horsexy
// num|cnt|max|id|hid|src|name|horsexy|width|distance|position|sid|pid|fid|status|effdt|horse|sire|trainer|jockey|race|kludge
// alert( "BUGS_680 ko_display HORSES "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>horses_json "+horses_json.length+"</h1>\n";
htmout+="<table id=table_horses>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>num</td>";
htmout+=" <td>cnt</td>";
htmout+=" <td>max</td>";
htmout+=" <td>id</td>";
htmout+=" <td>hid</td>";
htmout+=" <td>src</td>";
htmout+=" <td>name</td>";
htmout+=" <td>horsexy</td>";
htmout+=" <td>width</td>";
htmout+=" <td>distance</td>";
htmout+=" <td>position</td>";
htmout+=" <td>sid</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>fid</td>";
htmout+=" <td>status</td>";
htmout+=" <td>effdt</td>";
htmout+=" <td>horse</td>";
htmout+=" <td>sire</td>";
htmout+=" <td>trainer</td>";
htmout+=" <td>jockey</td>";
htmout+=" <td>race</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<horses_json.length; j++) {
num=horses_json[j].num;
cnt=horses_json[j].cnt;
max=horses_json[j].max;
id=horses_json[j].id;
hid=horses_json[j].hid;
src=horses_json[j].src;
name=horses_json[j].name;
horsexy=horses_json[j].horsexy;
width=horses_json[j].width;
distance=horses_json[j].distance;
position=horses_json[j].position;
sid=horses_json[j].sid;
pid=horses_json[j].pid;
fid=horses_json[j].fid;
status=horses_json[j].status;
effdt=horses_json[j].effdt;
horse=horses_json[j].horse;
sire=horses_json[j].sire;
trainer=horses_json[j].trainer;
jockey=horses_json[j].jockey;
race=horses_json[j].race;
kludge=horses_json[j].kludge;
// num|cnt|max|id|hid|src|name|horsexy|width|distance|position|sid|pid|fid|status|effdt|horse|sire|trainer|jockey|race|kludge
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+num+"</td>";
htmout+=" <td>"+cnt+"</td>";
htmout+=" <td>"+max+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+hid+"</td>";
htmout+=" <td>"+src+"</td>";
htmout+=" <td>"+name+"</td>";
htmout+=" <td>"+horsexy+"</td>";
htmout+=" <td>"+width+"</td>";
htmout+=" <td>"+distance+"</td>";
htmout+=" <td>"+position+"</td>";
htmout+=" <td>"+sid+"</td>";
htmout+=" <td>"+pid+"</td>";
htmout+=" <td>"+fid+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+effdt+"</td>";
htmout+=" <td>"+horse+"</td>";
htmout+=" <td>"+sire+"</td>";
htmout+=" <td>"+trainer+"</td>";
htmout+=" <td>"+jockey+"</td>";
htmout+=" <td>"+race+"</td>";
htmout+=" <td>"+kludge+"</td>";
// num|cnt|max|id|hid|status|src|name|horsexy|width|distance|position
htmout+=" </tr>\n";
}
htmout+=" </table id=table_horses_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "stables" ) {
// id|sid|hid|pid|fid|status|effdt|horse|sire|trainer|jockey|race|url|type|horse_id|horse_name|sire_id|sire_name|trainer_id|trainer_name|jockey_id|jockey_name|race_id|race_name|kludge
// alert( "BUGS_1000 ko_display STABLES "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>stables_json "+stables_json.length+"</h1>\n";
htmout+="<table id=table_pot>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>id</td>";
htmout+=" <td>sid</td>";
htmout+=" <td>hid</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>fid</td>";
htmout+=" <td>status</td>";
htmout+=" <td>effdt</td>";
htmout+=" <td>horse</td>";
htmout+=" <td>sire</td>";
htmout+=" <td>trainer</td>";
htmout+=" <td>jockey</td>";
htmout+=" <td>race</td>";
htmout+=" <td>url</td>";
htmout+=" <td>type</td>";
htmout+=" <td>horse_id</td>";
htmout+=" <td>horse_name</td>";
htmout+=" <td>sire_id</td>";
htmout+=" <td>sire_name</td>";
htmout+=" <td>trainer_id</td>";
htmout+=" <td>trainer_name</td>";
htmout+=" <td>race_id</td>";
htmout+=" <td>race_name</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
// alert( "BUGS_1020 ko_display STABLES "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
slen=stables_json.length;
// alert( "BUGS_1021 ko_stables BLANK sid="+sid+" slen="+slen );
for( s=0; s<slen; s++ ) {
j=s;
// alert( "BUGS_1031 s="+s+" slen="+slen );
stables_sid=Math.round(s+1);
id=stables_json[s].id;
url=stables_json[s].url;
type=stables_json[s].type;
id=stables_json[s].id;
name=stables_json[s].name;
status=stables_json[s].status;
sid=stables_json[s].sid;
hid=stables_json[s].hid;
pid=stables_json[s].pid;
fid=stables_json[s].fid;
status=stables_json[s].status;
effdt=stables_json[s].effdt;
horse=stables_json[s].horse;
sire=stables_json[s].sire;
trainer=stables_json[s].trainer;
jockey=stables_json[s].jockey;
race=stables_json[s].race;
url=stables_json[s].url;
type=stables_json[s].type;
horse_id=stables_json[s].horse_id;
horse_name=stables_json[s].horse_name;
sire_id=stables_json[s].sire_id;
sire_name=stables_json[s].sire_name;
trainer_id=stables_json[s].trainer_id;
trainer_name=stables_json[s].trainer_name;
jockey_id=stables_json[s].jockey_id;
jockey_name=stables_json[s].jockey_name;
race_id=stables_json[s].race_id;
race_name=stables_json[s].race_name;
kludge=stables_json[s].kludge;
htmout+="<tr>";
htmout+=" <td>"+s+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+sid+"</td>";
htmout+=" <td>"+hid+"</td>";
htmout+=" <td>"+pid+"</td>";
htmout+=" <td>"+fid+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+effdt+"</td>";
htmout+=" <td>"+horse+"</td>";
htmout+=" <td>"+sire+"</td>";
htmout+=" <td>"+trainer+"</td>";
htmout+=" <td>"+jockey+"</td>";
htmout+=" <td>"+race+"</td>";
htmout+=" <td>"+url+"</td>";
htmout+=" <td>"+type+"</td>";
htmout+=" <td>"+horse_id+"</td>";
htmout+=" <td>"+horse_name+"</td>";
htmout+=" <td>"+sire_id+"</td>";
htmout+=" <td>"+sire_name+"</td>";
htmout+=" <td>"+trainer_id+"</td>";
htmout+=" <td>"+trainer_name+"</td>";
htmout+=" <td>"+jockey_id+"</td>";
htmout+=" <td>"+jockey_name+"</td>";
htmout+=" <td>"+race_id+"</td>";
htmout+=" <td>"+race_name+"</td>";
htmout+=" <td>"+kludge+"</td>";
htmout+=" </tr>\n";
// alert( "BUGS_1080 s="+s+" slen="+slen+" htmout="+htmout );
}
htmout+=" </table id=table_stables_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "pots" ) {
// time|roll|player|amt|potamt
// alert( "BUGS_690 ko_display POTS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>pots_json "+pots_json.length+"</h1>\n";
htmout+="<table id=table_pots>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>time</td>";
htmout+=" <td>roll</td>";
htmout+=" <td>player</td>";
htmout+=" <td>amt</td>";
htmout+=" <td>potamt</td>";
htmout+=" </tr>\n";
for(j=0; j<pots_json.length; j++) {
time=pots_json[j].time;
roll=pots_json[j].roll;
player=pots_json[j].player;
amt=pots_json[j].amt;
potamt=pots_json[j].potamt;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+time+"</td>";
htmout+=" <td>"+roll+"</td>";
htmout+=" <td>"+player+"</td>";
htmout+=" <td>"+amt+"</td>";
htmout+=" <td>"+potamt+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_pot_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// alert( "BUGS_701 htmout="+htmout );
// alert( "BUGS_702 htmout_bugs="+htmout_bugs );
// alert( "BUGS_703 htmout_display="+htmout_display );
// alert( "BUGS_699 ko_display DEFAULT "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// }
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
// }
if(( args == "imgs" ) || ( args == "divs" )) {
// row|id|src|w|h|x|y|z|dx|dy|dz|xmin|ymin|zmin|xmax|ymax|zmax|label|kludge
// alert( "BUGS_690 ko_display IMGS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
if( args == "divs" ) {
json=divs_json;
htmout+="<table id=table_div>\n";
htmout+="<h1>divs_json "+json.length+"</h1>\n";
}
else {
json=divs_json;
htmout+="<table id=table_imgs>\n";
htmout+="<h1>imgs_json "+json.length+"</h1>\n";
}
htmout+="<tr>";
// row|id|src|w|h|x|y|z|dx|dy|dz|xmin|ymin|zmin|xmax|ymax|zmax|label|kludge
htmout+=" <td>row</td>";
htmout+=" <td>id</td>";
htmout+=" <td>src</td>";
htmout+=" <td>w</td>";
htmout+=" <td>h</td>";
htmout+=" <td>x</td>";
htmout+=" <td>y</td>";
htmout+=" <td>z</td>";
htmout+=" <td>dx</td>";
htmout+=" <td>dy</td>";
htmout+=" <td>dz</td>";
htmout+=" <td>xmin</td>";
htmout+=" <td>ymin</td>";
htmout+=" <td>zmin</td>";
htmout+=" <td>xmax</td>";
htmout+=" <td>ymax</td>";
htmout+=" <td>zmax</td>";
htmout+=" <td>label</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<json.length; j++) {
row=json[j].row;
id=json[j].id;
src=json[j].src;
w=json[j].w;
h=json[j].h;
x=json[j].x;
y=json[j].y;
z=json[j].z;
dx=json[j].dx;
dy=json[j].dy;
dz=json[j].dz;
xmin=json[j].xmin;
ymin=json[j].ymin;
zmin=json[j].zmin;
xmax=json[j].xmax;
ymax=json[j].ymax;
zmax=json[j].zmax;
label=json[j].label;
kludge=json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+row+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+src+"</td>";
htmout+=" <td>"+w+"</td>";
htmout+=" <td>"+h+"</td>";
htmout+=" <td>"+x+"</td>";
htmout+=" <td>"+y+"</td>";
htmout+=" <td>"+z+"</td>";
htmout+=" <td>"+dx+"</td>";
htmout+=" <td>"+dy+"</td>";
htmout+=" <td>"+dz+"</td>";
htmout+=" <td>"+xmin+"</td>";
htmout+=" <td>"+ymin+"</td>";
htmout+=" <td>"+zmin+"</td>";
htmout+=" <td>"+xmax+"</td>";
htmout+=" <td>"+ymax+"</td>";
htmout+=" <td>"+zmax+"</td>";
htmout+=" <td>"+label+"</td>";
htmout+=" <td>"+kludge+"</td>";
htmout+=" </tr>\n";
}
if( args == "divs" ) {
htmout+=" </table id=table_divs_end>\n";
}
else {
htmout+=" </table id=table_imgs_end>\n";
}
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// alert( "BUGS_701 htmout="+htmout );
// alert( "BUGS_702 htmout_bugs="+htmout_bugs );
// alert( "BUGS_703 htmout_display="+htmout_display );
// alert( "BUGS_699 ko_display DEFAULT "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// }
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
// }
if( args == "cfgs" ) {
// id|status|dttm|fld|val|title|desc|kludge
// alert( "BUGS_690 ko_display CFGS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>cfgs_json "+cfgs_json.length+"</h1>\n";
htmout+="<table id=table_cfgs>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>id</td>";
htmout+=" <td>status</td>";
htmout+=" <td>dttm</td>";
htmout+=" <td>fld</td>";
htmout+=" <td>val</td>";
htmout+=" <td>title</td>";
htmout+=" <td>desc</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<cfgs_json.length; j++) {
id=cfgs_json[j].id;
status=cfgs_json[j].status;
dttm=cfgs_json[j].dttm;
fld=cfgs_json[j].fld;
val=cfgs_json[j].val;
title=cfgs_json[j].title;
desc=cfgs_json[j].desc;
kludge=cfgs_json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+dttm+"</td>";
htmout+=" <td>"+fld+"</td>";
htmout+=" <td>"+val+"</td>";
htmout+=" <td>"+title+"</td>";
htmout+=" <td>"+desc+"</td>";
htmout+=" <td>"+kludge+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_cfgs_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// alert( "BUGS_701 htmout="+htmout );
// alert( "BUGS_702 htmout_bugs="+htmout_bugs );
// alert( "BUGS_703 htmout_display="+htmout_display );
// alert( "BUGS_699 ko_display DEFAULT "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// }
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
// }
if( args == "usrs" ) {
// id|userid|email|phn|status|dttm|pid|remote_addr_id|http_user_agent_id|remote_addr|remote_port|http_user_agent|session_id|session_user|session_pass|session_ip|session_cnt|request_time|query_string|desc|kludge
// alert( "BUGS_690 ko_display USRS "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>usrs_json "+usrs_json.length+"</h1>\n";
htmout+="<table id=table_usrs>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>id</td>";
htmout+=" <td>userid</td>";
htmout+=" <td>email</td>";
htmout+=" <td>phn</td>";
htmout+=" <td>status</td>";
htmout+=" <td>dttm</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>remote_addr_id</td>";
htmout+=" <td>http_user_agent_id</td>";
htmout+=" <td>remote_addr</td>";
htmout+=" <td>remote_port</td>";
htmout+=" <td>http_user_agent</td>";
htmout+=" <td>session_id</td>";
htmout+=" <td>session_user</td>";
htmout+=" <td>session_pass</td>";
htmout+=" <td>session_ip</td>";
htmout+=" <td>session_cnt</td>";
htmout+=" <td>request_time</td>";
htmout+=" <td>query_string</td>";
htmout+=" <td>desc</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<usrs_json.length; j++) {
id=usrs_json[j].id;
userid=usrs_json[j].userid;
email=usrs_json[j].email;
phn=usrs_json[j].phn;
status=usrs_json[j].status;
dttm=usrs_json[j].dttm;
pid=usrs_json[j].pid;
remote_addr_id=usrs_json[j].remote_addr_id;
http_user_agent_id=usrs_json[j].http_user_agent_id;
remote_addr=usrs_json[j].remote_addr;
remote_port=usrs_json[j].remote_port;
http_user_agent=usrs_json[j].http_user_agent;
session_id=usrs_json[j].session_id;
session_user=usrs_json[j].session_user;
session_pass=usrs_json[j].session_pass;
session_ip=usrs_json[j].session_ip;
session_cnt=usrs_json[j].session_cnt;
request_time=usrs_json[j].request_time;
query_string=usrs_json[j].query_string;
desc=usrs_json[j].desc;
kludge=usrs_json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+userid+"</td>";
htmout+=" <td>"+email+"</td>";
htmout+=" <td>"+phn+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+dttm+"</td>";
htmout+=" <td>"+pid+"</td>";
htmout+=" <td>"+remoge_addr_id+"</td>";
htmout+=" <td>"+http_user_agent_id+"</td>";
htmout+=" <td>"+remote_addr+"</td>";
htmout+=" <td>"+remote_port+"</td>";
htmout+=" <td>"+http_user_agent+"</td>";
htmout+=" <td>"+session_id+"</td>";
htmout+=" <td>"+session_user+"</td>";
htmout+=" <td>"+session_pass+"</td>";
htmout+=" <td>"+session_ip+"</td>";
htmout+=" <td>"+session_cnt+"</td>";
htmout+=" <td>"+request_time+"</td>";
htmout+=" <td>"+query_string+"</td>";
htmout+=" <td>"+desc+"</td>";
htmout+=" <td>"+kludge3+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_usrs_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// alert( "BUGS_701 htmout="+htmout );
// alert( "BUGS_702 htmout_bugs="+htmout_bugs );
// alert( "BUGS_703 htmout_display="+htmout_display );
// alert( "BUGS_699 ko_display DEFAULT "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// }
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
// }
if( args == "bs4" ) {
// id|userid|email|phn|status|dttm|pid|remote_addr_id|http_user_agent_id|remote_addr|remote_port|http_user_agent|session_id|session_user|session_pass|session_ip|session_cnt|request_time|query_string|desc|kludge
// alert( "BUGS_690 ko_display BS4 "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>bs4_json "+bs4_json.length+"</h1>\n";
htmout+="<table id=table_bs4>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>rownum</td>";
htmout+=" <td>id</td>";
htmout+=" <td>status</td>";
htmout+=" <td>lin</td>";
htmout+=" <td>linbeg</td>";
htmout+=" <td>lincnt</td>";
htmout+=" <td>linend</td>";
htmout+=" <td>linlim</td>";
htmout+=" <td>label</td>";
htmout+=" <td>headmark</td>";
htmout+=" <td>tailmark</td>";
htmout+=" <td>x</td>";
htmout+=" <td>y</td>";
htmout+=" <td>z</td>";
htmout+=" <td>h</td>";
htmout+=" <td>w</td>";
htmout+=" <td>dx</td>";
htmout+=" <td>dy</td>";
htmout+=" <td>dz</td>";
htmout+=" <td>dh</td>";
htmout+=" <td>dw</td>";
htmout+=" <td>xmin</td>";
htmout+=" <td>ymin</td>";
htmout+=" <td>zmin</td>";
htmout+=" <td>hmin</td>";
htmout+=" <td>wmin</td>";
htmout+=" <td>xmax/td>";
htmout+=" <td>ymax</td>";
htmout+=" <td>zmax</td>";
htmout+=" <td>hmax</td>";
htmout+=" <td>wmax</td>";
htmout+=" <td>color</td>";
htmout+=" <td>fsrc</td>";
htmout+=" <td>tsrc</td>";
htmout+=" <td>descr</td>";
htmout+=" <td>txt</td>";
htmout+=" <td>b64</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<bs4_json.length; j++) {
rownum=bs4_json[j].rownum;
id=bs4_json[j].id;
status=bs4_json[j].status;
sort=bs4_json[j].sort;
lin=bs4_json[j].lin;
linbeg=bs4_json[j].linbeg;
lincnt=bs4_json[j].lincnt;
linend=bs4_json[j].linend;
linlim=bs4_json[j].linlim;
label=bs4_json[j].label;
headmark=bs4_json[j].headmark;
tailmark=bs4_json[j].tailmark;
x=bs4_json[j].x;
y=bs4_json[j].y;
z=bs4_json[j].z;
h=bs4_json[j].h;
w=bs4_json[j].w;
dx=bs4_json[j].dx;
dy=bs4_json[j].dy;
dz=bs4_json[j].dz;
dh=bs4_json[j].dh;
dw=bs4_json[j].dw;
xmin=bs4_json[j].xmin;
ymin=bs4_json[j].ymin;
zmin=bs4_json[j].zmin;
hmin=bs4_json[j].hmin;
wmin=bs4_json[j].wmin;
xmax=bs4_json[j].xmax;
ymax=bs4_json[j].ymax;
zmax=bs4_json[j].zmax;
hmax=bs4_json[j].hmax;
wmax=bs4_json[j].wmax;
color=bs4_json[j].color;
fsrc=bs4_json[j].fsrc;
tsrc=bs4_json[j].tsrc;
descr=bs4_json[j].descr;
txt=bs4_json[j].txt;
b64=bs4_json[j].b64;
kludge=bs4_json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+rownum+"</td>";
htmout+=" <td>"+id+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+sort+"</td>";
htmout+=" <td>"+lin+"</td>";
htmout+=" <td>"+linbeg+"</td>";
htmout+=" <td>"+lincnt+"</td>";
htmout+=" <td>"+linend+"</td>";
htmout+=" <td>"+linlim+"</td>";
htmout+=" <td>"+label+"</td>";
htmout+=" <td>"+headmark+"</td>";
htmout+=" <td>"+tailmark+"</td>";
htmout+=" <td>"+x+"</td>";
htmout+=" <td>"+y+"</td>";
htmout+=" <td>"+z+"</td>";
htmout+=" <td>"+h+"</td>";
htmout+=" <td>"+w+"</td>";
htmout+=" <td>"+dx+"</td>";
htmout+=" <td>"+dy+"</td>";
htmout+=" <td>"+dz+"</td>";
htmout+=" <td>"+dh+"</td>";
htmout+=" <td>"+dw+"</td>";
htmout+=" <td>"+xmin+"</td>";
htmout+=" <td>"+ymin+"</td>";
htmout+=" <td>"+zmin+"</td>";
htmout+=" <td>"+hmin+"</td>";
htmout+=" <td>"+wmin+"</td>";
htmout+=" <td>"+xmax+"</td>";
htmout+=" <td>"+ymax+"</td>";
htmout+=" <td>"+zmax+"</td>";
htmout+=" <td>"+hmax+"</td>";
htmout+=" <td>"+wmax+"</td>";
htmout+=" <td>"+color+"</td>";
htmout+=" <td>"+fsrc+"</td>";
htmout+=" <td>"+tsrc+"</td>";
htmout+=" <td>"+desc+"</td>";
htmout+=" <td>"+txt+"</td>";
htmout+=" <td>"+b64+"</td>";
htmout+=" <td>"+kludge3+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_bs4_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
if( args == "k9" ) {
// time|roll|player|amt|potamt
// session_id|session_user|session_pass|session_ip
// alert( "BUGS_690 ko_display K9 "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>k9_json "+k9_json.length+"</h1>\n";
htmout+="<table id=table_k0>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>session_id</td>";
htmout+=" <td>session_user</td>";
htmout+=" <td>session_pass</td>";
htmout+=" <td>session_ip</td>";
htmout+=" </tr>\n";
for(j=0; j<k9_json.length; j++) {
session_id=k9_json[j].session_id;
session_user=k9_json[j].session_user;
session_pass=k9_json[j].session_pass;
session_ip=k9_json[j].session_ip;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+session_id+"</td>";
htmout+=" <td>"+session_user+"</td>";
htmout+=" <td>"+session_pass+"</td>";
htmout+=" <td>"+session_ip+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_k9_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
if( args == "chats" ) {
// time|roll|player|amt|potamt
// session_id|session_user|session_pass|session_ip
// dttm|effdt|status|pid|pip|fpid|fpip|tpid|tpip|msg|email|phn|name|descr|kludge
// alert( "BUGS_1830 ko_display K9 "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>k9_json "+k9_json.length+"</h1>\n";
htmout+="<table id=table_k0>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>dttm</td>";
htmout+=" <td>status</td>";
htmout+=" <td>effdt</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>pip</td>";
htmout+=" <td>fpid</td>";
htmout+=" <td>fpip</td>";
htmout+=" <td>tpid</td>";
htmout+=" <td>tpip</td>";
htmout+=" <td>msg</td>";
htmout+=" <td>email</td>";
htmout+=" <td>phn</td>";
htmout+=" <td>name</td>";
htmout+=" <td>descr</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<chats_json.length; j++) {
dttm=chats_json[j].dttm;
status=chats_json[j].status;
pid=chats_json[j].pid;
pip=chats_json[j].pip;
fpid=chats_json[j].fpid;
fpip=chats_json[j].fpip;
tpid=chats_json[j].tpid;
tpip=chats_json[j].tpip;
msg=chats_json[j].msg;
email=chats_json[j].email;
phn=chats_json[j].phn;
name=chats_json[j].name;
descr=chats_json[j].descr;
kludge=chats_json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+pid+"</td>";
htmout+=" <td>"+pip+"</td>";
htmout+=" <td>"+fpid+"</td>";
htmout+=" <td>"+fpip+"</td>";
htmout+=" <td>"+tpid+"</td>";
htmout+=" <td>"+tpip+"</td>";
htmout+=" <td>"+msg+"</td>";
htmout+=" <td>"+emil+"</td>";
htmout+=" <td>"+phn+"</td>";
htmout+=" <td>"+name+"</td>";
htmout+=" <td>"+descr+"</td>";
htmout+=" <td>"+kludge+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_chats_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
htmout_chats+=htmout;
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).innerHTML=htmout_bugs;
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).innerHTML=htmout_display;
// }
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
divid_chats="div_chats_body";
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
// alert( "BUGS_701 htmout="+htmout );
// alert( "BUGS_702 htmout_bugs="+htmout_bugs );
// alert( "BUGS_703 htmout_display="+htmout_display );
// alert( "BUGS_699 ko_display DEFAULT "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
// if( document.getElementById(divid)) {
// document.getElementById(divid).innerHTML=htmout;
// document.getElementById(divid).insertAdjacentHTML("beforebegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterbegin", htmout )
// document.getElementById(divid).insertAdjacentHTML("beforeend", htmout )
// document.getElementById(divid).insertAdjacentHTML("afterend", htmout )
// }
// if( document.getElementById(divid_bugs)) {
// document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
// }
// if( document.getElementById(divid_display)) {
// document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
// }
if( args == "timelines" ) {
// effdt|hid|pid|time|roll|player|amt|potamt
// alert( "BUGS_911 ko_display TIMELINE "+dttm+" args="+args+" divid="+divid+" htmout="+htmout );
htmout+="<h1>timelines_json "+timelines_json.length+"</h1>\n";
htmout+="<table id=table_timeline>\n";
htmout+="<tr>";
htmout+=" <td>j</td>";
htmout+=" <td>hid</td>";
htmout+=" <td>pid</td>";
htmout+=" <td>time</td>";
htmout+=" <td>roll</td>";
htmout+=" <td>status</td>";
htmout+=" <td>player</td>";
htmout+=" <td>effdt</td>";
htmout+=" <td>amt</td>";
htmout+=" <td>potamt</td>";
htmout+=" <td>kludge</td>";
htmout+=" </tr>\n";
for(j=0; j<timelines_json.length; j++) {
hid=timelines_json[j].hid;
pid=timelines_json[j].pid;
time=timelines_json[j].time;
roll=timelines_json[j].roll;
status=timelines_json[j].status;
player=timelines_json[j].player;
effdt=timelines_json[j].effdt;
amt=timelines_json[j].amt;
potamt=timelines_json[j].potamt;
kludge=timelines_json[j].kludge;
htmout+="<tr>";
htmout+=" <td>"+j+"</td>";
htmout+=" <td>"+hid+"</td>";
htmout+=" <td>"+pid+"</td>";
htmout+=" <td>"+time+"</td>";
htmout+=" <td>"+roll+"</td>";
htmout+=" <td>"+status+"</td>";
htmout+=" <td>"+player+"</td>";
htmout+=" <td>"+effdt+"</td>";
htmout+=" <td>"+amt+"</td>";
htmout+=" <td>"+potamt+"</td>";
htmout+=" <td>"+kludge+"</td>";
htmout+=" </tr>\n";
}
htmout+=" </table id=table_timeline_end>\n";
htmout_bugs+=htmout;
htmout_display+=htmout;
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", htmout_bugs )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", htmout_display )
}
divid_race="div_ko_trackline_display";
if( document.getElementById(divid_race)) {
document.getElementById(divid_race).insertAdjacentHTML("afterbegin", htmout_display )
}
return(args);
}
alert( "BUGS_2100 ko_display DEFAULT args="+args );
if( document.getElementById(divid_bugs)) {
document.getElementById(divid_bugs).insertAdjacentHTML("afterbegin", args )
}
if( document.getElementById(divid_display)) {
document.getElementById(divid_display).insertAdjacentHTML("afterbegin", args )
}
return(args);
}
</script id=script_ko_display_end>
<script id=script_kojax>
var default_jaxurl = "main.html";
var jaxurl = default_jaxurl;
function kojax(jaxurl,divid,callback) {
fmt="psv";
if( fmt=="psv" ) { delimiter="|"; }
if( fmt=="csv" ) { delimiter=","; }
if( fmt=="tsv" ) { delimiter="\t"; }
if( fmt=="" ) { delimiter=" "; }
if( divid == "" ) { divid="pre_kojax"; }
// alert( "BUGS_1000 kojax jaxurl="+jaxurl+" divid="+divid+" callback="+callback );
$.ajax({
url: jaxurl,
context: document.body,
success: function(responseText) {
// alert( "BUGS_1001 KOJAX responseText="+responseText );
// if( document.getElementById('pre_kojax')) {
// document.getElementById('pre_kojax').innerHTML=responseText;
// }
if( document.getElementById(divid)) {
document.getElementById(divid).innerHTML=responseText;
}
kolists['kojax'] = responseText;
// alert( "BUGS_1002 KOJAX kolists_kojax="+kolists['kojax'] );
if( callback == "horses" ) { horses_json=csv2json(responseText,delimiter); }
if( callback == "players" ) { players_json=csv2json(responseText,delimiter); }
if( callback == "fans" ) { fans_json=csv2json(responseText,delimiter); }
if( callback == "stables" ) { stables_json=csv2json(responseText,delimiter); }
if( callback == "timelines" ) { timelines_json=csv2json(responseText,delimiter); }
if( callback == "pots" ) { pots_json=csv2json(responseText,delimiter); }
if( callback == "imgs" ) { imgs_json=csv2json(responseText,delimiter); }
if( callback == "divs" ) { divs_json=csv2json(responseText,delimiter); }
if( callback == "cfgs" ) { cfgs_json=csv2json(responseText,delimiter); }
// if( callback == "usrs" ) { usr_json=csv2json(responseText,delimiter); }
if( callback == "usrs" ) { users_json=csv2json(responseText,delimiter); }
if( callback == "bs4" ) { bs4_json=csv2json(responseText,delimiter); }
if( callback == "k9" ) { k9_json=csv2json(responseText,delimiter); }
if( callback == "chats" ) { chats_json=csv2json(responseText,delimiter); }
if( callback == "leds" ) {
kolists['leds']=responseText;
// alert( "BUGS_1003 KOJAX kolists_leds="+kolists['leds'] );
// leds('');
}
if( callback == "items" ) { kolists['items']=responseText; items(''); }
if( callback == "contacts" ) { kolists['contacts']=responseText; contacts(''); }
if( callback == "letters" ) { kolists['letters']=responseText; letters(''); }
// $("#div_kojax").html(responseText);
$("#pre_kojax").html(responseText);
$("#div_kojax").find("script").each(function(i) {
eval($(this).text());
// alert( "BUGS_1004 kojaxj responseText="+responseText );
return( responseText );
});
// alert( "BUGS_1005 kojax return responseText="+responseText );
return(responseText);
}
});
};
</script id=script_kojax_end>
<script id=script_kojaxj>
var default_jaxurl = "main.html";
var jaxurl = default_jaxurl;
function kojaxj(jaxurl,divid,callback) {
if( divid == "" ) { divid="pre_kojaxj"; }
// alert( "BUGS_5111 kojaxj jaxurl="+jaxurl+" divid="+divid+" callback="+callback );
$.ajax({
url: jaxurl,
dataType: "json",
context: document.body,
success: function(responseText) {
// alert( "BUGS_5121 KOJAXJ responseText="+responseText );
json=JSON.parse(responseText);
for(j=0;j<json.length;j++ ){
// alert( "BUGS_5121 j="+j+" json.pathfile="+json[j].pathfile );
}
// alert( "BUGS_5122 KOJAX json="+json );
if( document.getElementById('pre_kojaxj')) {
document.getElementById('pre_kojaxj').innerHTML=responseText;
}
// kolists['kojaxj'] = responseText;
// alert( "BUGS_5105 jax kolists_jtfdcr="+kolists['jtfdcr'] );
// $("#div_kojaxj").html(responseText);
$("#pre_kojaxj").html(responseText);
$("#pre_kojaxj").find("script").each(function(i) {
eval($(this).text());
// alert( "BUGS_5106 kojaxj responseText="+responseText );
return( responseText );
});
}
});
};
</script id=script_kojaxj_end>
<script id=script_startup>
function startup(args) {
alert( "BUGS_100 startup args="+args );
return(args);
</script id=script_startup_end>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript" src="/js/wz/wz_dragdrop.js"></script>
<a name="top"> </a>
<table cellpadding="0" cellspacing="0" width="98%">
<tr>
<td>
<a href="http://www.walterzorn.de/dragdrop/dragdrop.htm" target="_top">
<img src="/imgs/btn/germany.gif" align="middle" border="0" alt="German version" width="22" height="15"></a> <small><a href="http://www.walterzorn.de/dragdrop/dragdrop.htm" target="_top">German version</a></small>
</td>
<td align="right">
<small>
<!--a href="javascript:void(0)" onclick="dd.elements.cat.copies[dd.elements.cat.copies.length - 1].setHorizontal(!dd.elements.cat.copies[dd.elements.cat.copies.length - 1].horizontal);">Horz</a>
<a href="javascript:void(0)" onclick="dd.elements.cat.copies[dd.elements.cat.copies.length - 1].setVertical(!dd.elements.cat.copies[dd.elements.cat.copies.length - 1].vertical);">Vert</a-->
<!--a href="javascript:void(0)" onclick="dd.elements.cat.copy(2);">Cpy</a>
<a href="javascript:void(0)" onclick="dd.elements.cat.copies[0].del();">Del 0</a>
<a href="javascript:void(0)" onclick="for (var i = 0; i < dd.elements.length; i++) if (dd.elements[i].is_image) dd.elements[dd.n4? 'reldivn4' : 'reldiv'].addChild(dd.elements[i]);">-</a>
<a href="javascript:void(0)" onclick="while (dd.elements[dd.n4? 'reldivn4' : 'reldiv'].children.length) dd.elements[dd.n4? 'reldivn4' : 'reldiv']._removeChild(0); var rl = dd.elements.greylyr, r = dd.elements.rabbit; rl.addChild(r); for (var i = 0; i < r.copies.length; i++) rl.addChild(r.copies[i]);">-</a>
<a href="javascript:void(0)" onclick="var c = dd.elements.rabbit; c.moveTo(c.defx, c.defy); if (c.copies) for (var i = 0; i < c.copies.length; i++) c.copies[i].moveTo(c.copies[i].defx, c.copies[i].defy);">-</a-->
</small>
</td>
</tr>
</table>
<center>
<table>
<tr>
<td id="op56check" align="center"><a href="./wz.html">
<img name="logo" border="0" src="/imgs/btn/logo.gif" alt="Home" width="278" height="30"></a></td>
</tr>
</table>
<table cellspacing="12">
<tr>
<td><a href="/ko/wz.html">Home</a></td>
<td><a href="/js/wz/jsgraphics/jsgraphics_e.htm">VectorGraphics-Library</a></td>
<td><a href="/js/wz/tooltip/tooltip_e.htm">Tooltips</a></td>
<td><a href="/js/wz/grapher/grapher_e.htm">Function-Grapher</a></td>
</tr>
</table>
<br>
</center>
<center>
<table cellpadding="4">
<tr align="left">
<td valign="top" align="right">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
<img src="/imgs/btn/spacer.png" alt="DHTML JavaScript Drag and Drop for Layers and Images" width="1" height="30">
<br>
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
<img src="/imgs/btn/spacer.png" alt="DHTML JavaScript Drag and Drop for Layers and Images" width="20" height="1"><img name="cat" src="/imgs/btn/ddcat.jpg" width="129" height="154" alt="DragnDrop Image">
CCCCCCCCCCCCCCCCCCCCCCCCCCCC
<br> <br> <br>
<table cellpadding="0" cellspacing="3">
<tr>
<td>
<br>
<br> <br>
</td>
DDDDDDDDDDDDDDDDDDDDDDDDDDD
<td width="1" bgcolor="#000099">
<img src="/imgs/btn/spacer.png" width="1" height="1" alt="JavaScript Drag and Drop for Layers and Images"></td>
EEEEEEEEEEEEEEEEEe
</tr>
</table>
</td>
<td>
<table cellpadding="4">
<tr>
<td>
<big><b>JavaScript: DHTML API,<br>
Drag & Drop for Images and Layers</b></big><br>
<small>JavaScript Library. Developer: Walter Zorn</small>
</td>
<td rowspan="4" valign="top" align="right">
<br> <br>
<table cellpadding="0" cellspacing="3" width="130">
<tr>
<td width="1" bgcolor="#000099">
FFFFFFFFFFFFFFFFFFFFFFFF
<img name="sepline1" src="/imgs/btn/spacer.png" width="1" height="1" alt="JavaScript Drag and Drop for Layers and Images"></td>
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
<td>
<small>
<br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
A<sup> </sup>Cross-browser JavaScript DHTML Library which adds Drag Drop functionality and extended DHTML capabilities to layers and to any desired image, even those integrated into the text
GGGGGGGGGGGGGGG
<img name="smile1" src="/imgs/btn/smile.gif" width="11" height="11" alt="Drag & Drop Image"> flow.
<div id="reldiv"><ilayer name="reldivn4" bgcolor="#eeeeee"><div>
To convert images or layers into draggable DHTML items, simply pass their names/IDs to the library's main function 'SET_DHTML()'.
</div></ilayer></div>
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
Optional
<a href="commands_e.htm">commands</a> allow to change and customize the behaviour of Drag&Drop items in multiple ways.
For example, you can limit how far a drag&drop item can be moved, specify the cursor, or multiply drag'ndrop images.
The DHTML API of this DHTML Drag&Drop JavaScript is easily understandable.
It provides methods to
<a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){dd.elements.cat.maximizeZ();dd.elements.cat.moveTo(dd.elements.cat.x+20, dd.elements.cat.y+20);}return false;">moveTo()</a>,
<a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){dd.elements.cat.maximizeZ();dd.elements.cat.resizeTo((dd.elements.cat.w > 195)? 129 : 258, (dd.elements.cat.h > 221)? 154 : 308);}return false;">resizeTo()</a>,
<a class="code" href="javascript:void(0);" onclick=";if(window.dd && dd.elements)dd.elements.cat.hide();return false;">hide()</a> and
<a class="code" href="javascript:void(0);" onclick=";if(window.dd && dd.elements) dd.elements.cat.show();return false;">show()</a> again drag n' drop elements,
or to
<a class="code" href="javascript:void(0)" onclick="if (window.dd && dd.elements) dd.elements.cat.copy();">copy()</a> images right within the textflow of your page dynamically,
and
<a class="code" href="javascript:void(0)" onclick=";if(window.dd && dd.elements){var reldiv = dd.n4? dd.elements.reldivn4 : dd.elements.reldiv; reldiv.setBgColor((reldiv.bgColor == '#d3e6ff')? '#ffcccc' : (reldiv.bgColor == '#ffcccc')? '#cceecc' : (reldiv.bgColor == '#cceecc')? (dd.n4? '#eeeeee' : '#ffffff') : '#d3e6ff');}">much</a> more.
Each DHTML item has properties such as x, y, w, h, z, defx, defy, defw, defh, defz (co-ordinates, size, z-index, and their initial default values, respectively) plus multiple others,
which you can read whenever desired.
For instance, to store the current position of a drag&drop item, you might write its x and y properties into a <input type="hidden"> form element, from where you could transmit them to the server.
For more details, see the
<a href="api_e.htm">DHTML API</a> and
<a href="commands_e.htm">commands</a> reference.
<br>
<div id="reldiv2"><ilayer name="reldiv2n4" bgcolor="#eeeeee"><div>
The idea behind wz_dragdrop.js was not merely to drag around some layers or images on a page in IE only,
but also to be a cross-browser clientside API for interactive webpages and webbased applications.
</div></ilayer></div>
</td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br><b>Resize Instead of Drag?</b></big>
<br>
Holding the <Shift> key <img name="tryit" src="/imgs/btn/tryit.gif" width="50" height="17" alt="Drag n Drop DHTML JavaScript für Bilder und Layer"> while dragging an element lets wz_dragdrop.js work in Resize Mode rather than in Drag Mode.
This functionality can be easily activated by passing to SET_DHTML() the
<a href="#addons">command</a>
RESIZABLE, or SCALABLE to preserve the width/height ratio of the element.
These commands may be applied, at your option, either to certain or to all of the drag drop elements.
By the way, on these pages the RESIZABLE functionality has been activated globally.
<br clear="all">
<img name="bikegoeteborg" src="/imgs/btn/dragdrop/northcapetrip_goeteborg.jpg" alt="On my first bicycle trip to Northcape" title="On my first bicycle trip to Northcape" align="left" border="0" height="444" width="426">
<br clear="all">
<small><i>On my 8 megameters bicycle trip through Norway, Northern-Finland and Sweden<br>(Hamburg-Northcape-Kirkenes-Trelleborg-Munich)</i></small>
</td>
</tr>
<tr>
<td>
<big> <br> <br>
<a name="browser"> </a> <br> <br><b>Cross-Browser Functionality</b></big>
<br>
Allmost all browsers (see the following list), except of a few rarely used ones, should be able to interpret this DHTML Drag 'n Drop JavaScript.
<br> <br>
<img align="right" name="leop" src="/imgs/btn/dragdrop/ddleop.jpg" alt="" width="300" height="205" hspace="4">
Linux:<br>
Browsers based on the Gecko-engine (Mozilla, Netscape 6+, Galeon...), Konqueror 3.2+, Netscape 4, Opera 5+.
<br> <br>
Windows:<br>
Gecko browsers (Mozilla, Netscape 6+, Phoenix...), Netscape 4, Opera 5, 6 and 7, Internet Explorer 4+.
<br> <br>
Other Systems:<br>
Mac Safari works fine.
Assuming that their behavior is essentially the same as with their Linux and Windows counterparts, I've given Gecko browsers, Netscape 4 and Opera 5+ unlimited access to execute the Drag and Drop JavaScript.
</td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br><b>Window Resize Events</b></big>
<br>
wz_dragdrop.js automatically re-integrates images and relatively positioned layers into the logical structure of the page.
That is, back into the page flow even if line-breaks, table-sizes etc. have changed.
Items that have previously been dragged keep their relative offset from their - also recalculated - default location within the page flow (accessible, by the way, through the defx and defy properties of each item).
That means: A user won't break the API if they decide to resize their browser window.
<br>
<img name="skitour" src="/imgs/btn/skitour_suedtirol_2.jpg" alt="" width="550" height="298">
<br>
<small><i>Ski touring in South Tyrol</i></small>
</td>
<td rowspan="1" align="right">
<table cellpadding="0" cellspacing="3" width="130">
<tr>
<td width="1" bgcolor="#000099"><img src="/imgs/btn/spacer.png" width="1" height="1" alt="DHTML Drag & Drop JavaScript for Images and Layers"></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<big> <br> <br>
<a name="config"> </a> <br> <br><b>How to include the Drag & Drop Script</b></big>
<br>
<b><big>1.</big> HTML File: Names for Drag&Drop elements</b>
<br>
<b>Images:</b>
Each of the images to be set draggable requires a unique name, as for instance:
<img align="left" name="chameleon" src="/imgs/btn/dragdrop/ddcham.jpg" width="155" height="95" alt="JavaScript, DHTML: Drag&Drop Images">
<img name="name1" src="someImg.jpg" width="240" height="135"><br>
Width and height attributes are mandatory and should be
absolute numbers like width="240", rather than relative ones like width="33%".
<b>Layers:</b>
Each one requires a unique ID and, contrary to images, must be positioned relatively or absolutely:<br>
<div id="name2" style="position:absolute;...">Content</div>.
</td>
<td rowspan="5" align="right">
<table cellpadding="0" cellspacing="3" width="130">
<tr>
<td width="1" bgcolor="#000099"><img src="/imgs/btn/spacer.png" width="1" height="1" alt=""></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<b> <br><big>2.</big> Insert pieces of code into HTML file</b>
<br>
Insert the following lines inside the <body> section of your html file.
<br>
This one immediately <b style="color:red">after (not before!!!) the opening <body> tag</b>:
</td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript" src="wz_dragdrop.js"></script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
And this one directly before the closing </body> tag:
</td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
<br>
SET_DHTML("name1", "name2", "anotherLayer", "lastImage");<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
As evident from this example, simply the names of the drag-drop elements must be passed to SET_DHTML( ), each in quotation marks and with commas separated from each other.
Sequence of names may be arbitrary.
</td>
<td rowspan="3" align="right">
<table cellpadding="0" cellspacing="3" width="130">
<tr>
<td width="1" bgcolor="#000099"><img src="/imgs/btn/spacer.png" width="1" height="1" alt=""></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="265">
<tr>
<td><img name="northcape" align="right" src="/imgs/btn/dragdrop/nothcapetrip2_northcape.jpg" alt="On my second bicycle trip to the Northcape" title="On my second bicycle trip to the Northcape" border="0" height="410" width="265"></td>
</tr>
<tr>
<td><small><i>At the Northcape, on my second Scandinavia bicycle trip</i></small></td>
</tr>
</table>
<br> <br>
<b><big>3.</big> Save script file</b>
<br>
<a href="#download">Download the JavaScript Drag Drop library</a>, unzipp it and save it as wz_dragdrop.js into the same directory as the html file.
Or adapt the path src="wz_dragdrop.js" within the above code piece if you prefer to save the library to a different directory.
<br> <br> <br><b><big>4.</big>Save transparent 1x1 pixel GIF</b>
<br>
transparentpixel.gif, coming with the download file wz_dragdrop.zip, is required by Netscape 4 to create spacers at the default places of the drag drop images.
transparentpixel.gif should be saved into the same directory as the html file.
<br clear="all">
<br> <br> <br><b><big>5.</big> Doesn't work?</b>
<br>
<a name="notwork"> </a>Then everything should function. If not:
<br>
<b>a)</b> Check the HTML and CSS syntax of your page, preferably with the W3C-Online-Validator on <a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>.
<br>
<b>b)</b> Make sure that you've carefully followed
<a href="#config">steps 1. through 4</a> (by far the most frequent reason for problems).
<br>
<b>c)</b>
Check your own JavaScript code for logical errors and syntax errors, the latter e.g. by looking at your browser's JavaScript error console.
<br>
<b>d)</b>
Occasionally, problems arise with XHTML DTD pages, since the XHTML specification - annoyingly - doesn't permit document.write().
Then it's inevitable to switch your page to another DTD, preferably HTML4.01.
<br>
<b>Don't claim you've found a bug</b> - unless you have everything checked carefully and you're very sure.
Feedback is anyway welcome.
</td>
</tr>
<tr>
<td>
<big> <br>
<a name="addons"> </a> <br>
<img align="right" name="slidercanvas" src="/imgs/btn/transparent_300_120.gif" width="300" height="120" alt="">
<br> <br> <br> <br>
<b>DHTML API</b></big>
<br>
<b>Clone or multiply an image?</b>
<br>
<hr color=black>
<hr color=black>
<hr color=black>
<hr color=black>
<hr color=black>
<hr color=black>
<hr color=black>
<hr color=black>
<img align="left" name="muckl" src="/imgs/btn/koeyeb.png" alt="Drag Drop Image" width="100" height="50">
Or change the cursor?
<img align="right" name="thumb" src="/ko/imgs/sliderthumb.gif" width="22" height="35" alt="">
<img align="right" name="track" src="/ko/imgs/track.gif" width="94" height="35" alt="">
Or convert an image into a slider with stops?
There are several commands available which change, if passed to SET_DHTML(), the behavior of JavaScript Drag n' Drop items.
<br> <br>
<center>
<a class="code" href="javascript:void(0)" onclick="var muckl; if (window.dd && dd.elements) (muckl = dd.elements.muckl).swapImage((muckl.src != muckl.defsrc)? '/imgs/btn/koeyeb.png' : '/imgs/btn/koeyew.png', true); return false;">swapImage()</a>
</center>
<hr color=white>
<hr color=white>
<hr color=white>
<hr color=white>
<hr color=white>
<hr color=white>
<hr color=white>
<hr color=white>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaa
<b>Scripting Drag Drop Elements</b>
<br>
For example, reading the current coordinates of a certain drag-drop item and then calling its moveTo() method offers an easy way to animate images and layers.
Moreover, you may even convert a simple web page, just containing a few images, into a graphical user interface application, working with the coordinates of the elements (as demonstated with the slider example above)...
The DHTML Drag Drop Library provides an easily understandable, user-friendly interface to the properties and methods of the drag-drop elements.
Using this library as DHTML API you haven't to bother with browser or DOM detection - all this is performed by the library.
For instance, the line
<br>
<tt>dd.elements.image2.moveTo(300, 200);</tt>
<br>
would reliably move "image2" to the absolute coordinates (300, 200) in any browser that can interpret the library,
as reliably as the expression <tt>dd.elements.image2.x</tt> will retrieve the current X coordinate of the image.
<br>
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
<img name="low" src="/imgs/btn/kop12.png" alt="Drag&Drop Image" width="62" height="25"><img name="upleft" src="/imgs/btn/pod23.png" alt="Drag & Drop Image" width="97" height="41">
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
<br>
<table>
<tr>
<td>
<big>·</big>
</td>
<td>
<big>
<a href="commands_e.htm">Optional Commands</a>:</big> Demonstration and Reference
</td>
</tr>
<tr>
<td>
<big>·</big>
</td>
<td>
<big>
<a href="api_e.htm">DHTML API, Scripting Drag Drop Items</a>:</big> Demo and Reference
</td>
</tr>
<tr>
<td>
<big>·</big>
</td>
<td>
<big>
<a href="demos/demos.htm">Examples</a></big> using the DHTML API
<a name="download"> </a>
</td>
</tr>
<tr>
<td>
<big>·</big>
</td>
<td>
<big>
<a href="history_e.htm">History of Updates</a></big> (read this if you aren't sure about the benefits from an update)
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr align="left">
<td align="right">
<table cellpadding="0" cellspacing="3">
<tr>
<td>
<br>
<br> <br>
</td>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDd
<td width="1" bgcolor="#000099"><img src="/ko/imgs/spacer.png" width="1" height="1" alt="JavaScript Drag and Drop for Layers and Images"></td>
</tr>
</table>
</td>
<td>
<table cellpadding="4">
<tr>
<td>
<br> <br> <br> <br>
<img align="right" name="koala" src="/imgs/btn/dragdrop/ddkoala.jpg" alt="Drag&Drop Image" width="160" height="213">
<b> <br> <br>
<img name="redarrow" src="/imgs/btn/redarrow.gif" width="15" height="13" alt="" align="middle"><big>Download</big></b>
<br>
wz_dragdrop.js 4.91, published under the <b>LGPL</b>:<br>
<a style="text-decoration:underline;" href="../scripts/wz_dragdrop.zip">wz_dragdrop.zip</a> (12 KB)
<br clear="all"> <br> <br> <br>
<br>
<br clear="all">
<br>
<br>
<div id="reltab">
<table>
<tr>
<td bgcolor="#d3e3f9">
<b>Attention:</b>
<br> <br>
<b>1.)</b> If you use wz_dragdrop.js for applications or for extended scripting, and are going to upgrade from a version prior to ver. 3.4, please consider:
With version 3.4 the array that contains the drag drop elements has been renamed from <tt><b>dd.element</b></tt> to <tt><b>dd.elements</b></tt> .
You must change your code accordingly in case you've used any <tt><b>dd.element</b></tt> statement (see also
<a href="api_e.htm">Scripting Drag Drop elements, DHTML API</a>).
<br> <br>
<b>2.)</b> With version 4.0, the library has been renamed from dragdrop.js to <b>wz_dragdrop.js</b>.
<br> <br>
<b>3.)</b> With version 4.2, the method <tt><b>activate()</b></tt> has been renamed to <tt><b>maximizeZ()</b></tt>.
<br> <br>
<b>4.)</b> With version 4.31, the command <tt><b>MULTIPLY</b></tt> has been renamed to <tt><b>COPY</b></tt>, and its usage has been changed as follows:
To create 12 copies of an image named "imageName", you must write <tt><b>"imageName"+COPY+12</b></tt> instead of <tt><b>"imageName"+MULTIPLY12</b></tt>
<br> <br>
<b>5.)</b> With version 4.41, <b>SET_DRAGGABLE()</b> has been renamed to <b>SET_DHTML()</b> and <b>ADD_DRAGGABLE()</b> to <b>ADD_DHTML()</b>.
</td>
</tr>
</table>
</div>
</td>
<td rowspan="1" align="right" valign="bottom">
<table cellpadding="0" cellspacing="3" width="130">
<tr>
<td width="1" bgcolor="#000099"><img src="/imgs/btn/spacer.png" width="1" height="1" alt=""></td>
<td>
<small>
<br>
<a href="#top">Top of page</a>
<br> <br>
<a href="#browser">Cross Browser</a>
<br> <br>
<a href="#config">How to include</a>
<br> <br>
<a href="#addons">DHTML API</a>
<br> <br>
<a href="#download">Download</a>
KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br> <br>
<hr width="95%" size="1" noshade>
<table cellpadding="20">
<tr>
<td>
<small>Walter Zorn, Munich
<br>
<a href="http://www.kreuzotter.de/impressum.htm">Impressum / about this page</a></small>
<br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</tr>
</table>
</center>
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
<div id="greylyr">
<h1>greylyr</h1>
<a name="demolyr"> </a>
<div id="ingreylyr">
<h2>ingreylry</h2>
<img name="button" src="/imgs/btn/kob.png" alt="Drag Drop JavaScript" width="60" height="17">
</div id=ingreylyr_end>
</div id=greylyr_end>>
<br>
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
<small>wz_dragdrop.js provides extended DHTML capabilities...
<br> <br>
...even for images nested into layers (DIV elements).
<br> <br>
For example, just a few simple JavaScript lines are necessary to implement the functionalities of this button.
<br> <br>
<a href="#flexlyr">Jump to another demo-layer.</a><br> <br>
</small>
<div id="bluelyr">
<a name="flexlyr"> </a>
<a href="#demolyr">Back to first layer</a></small>
</div id=bluelyr_end>
<script id=script_set_dhtml >
<!--
SET_DHTML(
CURSOR_MOVE,
RESIZABLE,
NO_ALT, SCROLL,
"bikegoeteborg"+TRANSPARENT,
"bluelyr"+TRANSPARENT,
"button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT,
"cat"+TRANSPARENT,
"chameleon",
"counter",
"greylyr"+TRANSPARENT,
"koala",
"leop",
"low",
"muckl"+TRANSPARENT+COPY+4,
"northcape"+TRANSPARENT,
"redarrow",
"reldiv",
"reldivn4",
"reldiv2"+TRANSPARENT,
"reldiv2n4"+TRANSPARENT,
"reltab",
"sepline1"+NO_DRAG,
"skitour"+TRANSPARENT,
"slidercanvas",
"smile1"+SCALABLE,
"thumb"+HORIZONTAL+MAXOFFLEFT+45+MAXOFFRIGHT+45,
"track"+NO_DRAG,
"tryit",
"upleft"
);
// Kreuzotter-vs-Uplefts Animation, demonstrating how to use the API of the DragDrop-Library
function ANIM() {
if (!dd.obj || !dd.op6) {
if (dd.elements.low.z <= dd.elements.upleft.z)
dd.elements.upleft.setZ(dd.elements.low.z - 1);
dd.elements.upleft.moveTo(
dd.elements.upleft.x <= -dd.elements.upleft.w?
iW - dd.elements.upleft.w - 20 :
(dd.elements.upleft.x - 3),
(dd.obj==dd.elements.upleft)?
dd.elements.upleft.y :
(dd.elements.low.y - dh)
);
dd.elements.low.moveTo(
dd.elements.low.x <= -dd.elements.low.w?
iW-dd.elements.low.w-20 :
(dd.elements.low.x-5),
dd.elements.upleft.y + dh
);
}
setTimeout("ANIM()", dd.kq? 200 : 100);
}
// override funcs defined within the Lib
function my_PickFunc() {
if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
if (!dd.obj.name.indexOf('muckl') && dd.obj.x == dd.obj.defx) {
if (dd.elements.muckl.copies.length < 80) dd.elements.muckl.copy();
}
}
function my_DragFunc() {
if (dd.obj.name == 'thumb') {
var red = parseInt((dd.elements.thumb.x-dd.elements.thumb.defx)*255/45),
blue = -red,
green = (255-Math.abs(red)).toString(16);
red = (red > 0? red : 0).toString(16);
blue = (blue > 0? blue : 0).toString(16);
while (red.length < 2) red = '0'+red;
while (blue.length < 2) blue = '0'+blue;
while (green.length < 2) green = '0'+green;
dd.elements.slidercanvas.setBgColor("#"+red+green+blue);
}
}
function my_DropFunc() {
if (dd.obj.name == 'button') {
dd.obj.swapImage(outsetbutton.src);
var minh = dd.elements.button.h+((dd.elements.button.y-dd.elements.greylyr.y)<<1);
dd.elements.greylyr.resizeTo(
dd.elements.greylyr.w,
(dd.elements.greylyr.h != minh)? minh : 300
);
}
}
var trackerflag="on";
var outsetbutton = new Image();
outsetbutton.src = '/imgs/btn/dragdrop/button_outset.gif';
var insetbutton = new Image();
insetbutton.src = '/imgs/btn/dragdrop/button_inset.gif';
var iW = dd.getWndW(),
dh = dd.elements.upleft.h - dd.elements.low.h;
ANIM();
dd.elements.bluelyr.moveTo(
(iW-dd.elements.bluelyr.w)>>1,
dd.elements.counter.defy-dd.elements.bluelyr.h-30
);
dd.elements.greylyr.moveTo(dd.elements.sepline1.x-2, dd.elements.sepline1.y+110);
dd.elements.bluelyr.show();
dd.elements.greylyr.show();
dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild('thumb');
dd.elements.thumb.defx = dd.elements.track.x+36;
//-->
<script id=script_set_dhtml_end >
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer