Hi guys!
I'm trying to use this code to generate a path..it allows you to use mouseclicks to define the path and is supposed to support both IE 4 and up and NN4. WHen I call on this page as it is now I get a black blank screen even though on checking my source code..all code arrives intact.
Is my browser(IE6)not being able to interpret it?
Am I using the right code/syntax in addressing IE browsers?
I would really appreciate your quick reply..been stumped on this for a day.
Here's the code and Thanks in advance!
<html>
<head>
<title>Path Gen</title>
<style>
body{
color: white;
background-color: black;
font: 12pt sans-serif;
}
a{
color: #ffffdd;
}
</style>
<img src=" height=1 width=1><BR><! 0Catch CODE INSERT --></noscript></div></xmp></style>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
<Script Language="JavaScript">
var xValues = '';
var yValues = '';
var currentX = 0;
var currentY = 0;
// IE 4+ code
if(document.all) {
pre = 'document.all.';
post = '.style';
}
// NN4 code
if(document.layers) {
pre = 'document.layers.';
post = '';
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = NNgenPath;
document.captureEvents(Event.MOUSEDOWN);
document.onMouseDown = downFlag;
document.captureEvents(Event.MOUSEUP);
document.onMouseUp = upFlag;
var flag = 0;
}
function downFlag() {
flag = 1;
document.directions.visibility = 'hidden';
document.savePath.visibility = 'hidden';
}
function upFlag() {
flag = 0;
}
function NNgenPath(e) {
if(!flag)
return;
if(e.target.name==
document.savePath.document.form1.S1 ||
e.target.name==
document.savePath.document.form1.S2)
return;
if(e.which==1) {
if(xValues=='') {
xValues+= e.x;
yValues+= e.y;
}
else {
xValues+= ',' + e.x;
yValues+= ',' + e.y;
}
document.savePath.document.form1.S1.value =
xValues;
document.savePath.document.form1.S2.value =
yValues;
}
}
function IEgenPath() {
if(event.srcElement==document.form1.S1 ||
event.srcElement==document.form1.S2)
return;
if(event.button==1) {
document.all.savePath.style.visibility =
'hidden';
document.all.directions.style.visibility =
'hidden';
if(xValues=='') {
xValues+= event.x;
yValues+= event.y;
}
else {
xValues+= ',' + event.x;
yValues+= ',' + event.y;
}
}
document.form1.S1.value = xValues;
document.form1.S2.value = yValues;
}
function clear() {
xValues = '';
yValues = '';
// for IE4+
if(document.all) {
document.form1.S1.value = xValues;
document.form1.S2.value = yValues;
}
// for NN4+
if(document.layers) {
document.savePath.document.form1.S1.value =
xValues;
document.savePath.document.form1.S2.value =
yValues;
}
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'hidden';
}
function save() {
eval(pre + 'savePath' + post).visibility =
'visible';
eval(pre + 'directions' + post).visibility =
'hidden';
}
function showDirections() {
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'visible';
}
function tokenizer(stringValue,delim) {
//converts stringValue to array based on delim
begin=0;
end=stringValue.indexOf(delim);
tokenCount = 0;
while(stringValue.indexOf(delim,begin)>0) {
this[tokenCount] =
parseInt(stringValue.substring(begin,end));
tokenCount += 1;
begin=end+1;
end=stringValue.indexOf(delim,begin);
this.length = tokenCount;
}
}
function animate() {
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'hidden';
xPos = new tokenizer(xValues,',');
yPos = new tokenizer(yValues,',');
if(!xPos.length)
return;
if(currentX>xPos.length-1) {
currentX = 0;
currentY=0;
return;
}
eval(pre + 'bulb' + post).left =
parseInt(xPos[currentX]);
eval(pre + 'bulb' + post).top =
parseInt(yPos[currentY]);
currentX++;
currentY++;
setTimeout('animate()',10);
}
</head>
<body onMouseMove="IEgenPath()">
<div id="directions" style="position: absolute; top:
10; left: 10; z-index: 2;">
Drag your mouse around the screen to create a path.
Click Preview to see the path you created.
Click Clear to erase your existing path and start
over.
If you do not click on Clear, the path you create will
be appended to the current path.
Click Save to reveal the coordinates of the path you
generated. You can then copy and paste them into your
code.
Click Directions to read these directions again.
This page has been tested with IE 4+ and Netscape 4.x.
</div>
<div id="controls" style="z-index: 2; position:
absolute; top: 150; left: 10; width: 100;">
<p>
<a href="javascript:clear()">Clear</a><br>
<a href="javascript:animate()">Preview</a><br>
<a href="javascript:save()">Save</a><br>
<a href="javascript:showDirections()">Directions</a>
</p>
</div>
<div id="bulb" width="32" height="64" style="position:
absolute; top: 300; left: 0; z-index: 2;">
<img border="0" src="lightbulb.gif" width="32"
height="64">
</div>
<div id="savePath" style="position:absolute; top: 0;
left: 0; width: 750; visibility: hidden; z-index:
3;">
<form name="form1">
<p>
X-Values<textarea rows="4" name="S1"
cols="20"></textarea>
Y-Values<textarea rows="4"
name="S2" cols="20"></textarea><br>
</p>
</form>
</div>
</body>
</html>
I'm trying to use this code to generate a path..it allows you to use mouseclicks to define the path and is supposed to support both IE 4 and up and NN4. WHen I call on this page as it is now I get a black blank screen even though on checking my source code..all code arrives intact.
Is my browser(IE6)not being able to interpret it?
Am I using the right code/syntax in addressing IE browsers?
I would really appreciate your quick reply..been stumped on this for a day.
Here's the code and Thanks in advance!
<html>
<head>
<title>Path Gen</title>
<style>
body{
color: white;
background-color: black;
font: 12pt sans-serif;
}
a{
color: #ffffdd;
}
</style>
<img src=" height=1 width=1><BR><! 0Catch CODE INSERT --></noscript></div></xmp></style>
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
<Script Language="JavaScript">
var xValues = '';
var yValues = '';
var currentX = 0;
var currentY = 0;
// IE 4+ code
if(document.all) {
pre = 'document.all.';
post = '.style';
}
// NN4 code
if(document.layers) {
pre = 'document.layers.';
post = '';
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = NNgenPath;
document.captureEvents(Event.MOUSEDOWN);
document.onMouseDown = downFlag;
document.captureEvents(Event.MOUSEUP);
document.onMouseUp = upFlag;
var flag = 0;
}
function downFlag() {
flag = 1;
document.directions.visibility = 'hidden';
document.savePath.visibility = 'hidden';
}
function upFlag() {
flag = 0;
}
function NNgenPath(e) {
if(!flag)
return;
if(e.target.name==
document.savePath.document.form1.S1 ||
e.target.name==
document.savePath.document.form1.S2)
return;
if(e.which==1) {
if(xValues=='') {
xValues+= e.x;
yValues+= e.y;
}
else {
xValues+= ',' + e.x;
yValues+= ',' + e.y;
}
document.savePath.document.form1.S1.value =
xValues;
document.savePath.document.form1.S2.value =
yValues;
}
}
function IEgenPath() {
if(event.srcElement==document.form1.S1 ||
event.srcElement==document.form1.S2)
return;
if(event.button==1) {
document.all.savePath.style.visibility =
'hidden';
document.all.directions.style.visibility =
'hidden';
if(xValues=='') {
xValues+= event.x;
yValues+= event.y;
}
else {
xValues+= ',' + event.x;
yValues+= ',' + event.y;
}
}
document.form1.S1.value = xValues;
document.form1.S2.value = yValues;
}
function clear() {
xValues = '';
yValues = '';
// for IE4+
if(document.all) {
document.form1.S1.value = xValues;
document.form1.S2.value = yValues;
}
// for NN4+
if(document.layers) {
document.savePath.document.form1.S1.value =
xValues;
document.savePath.document.form1.S2.value =
yValues;
}
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'hidden';
}
function save() {
eval(pre + 'savePath' + post).visibility =
'visible';
eval(pre + 'directions' + post).visibility =
'hidden';
}
function showDirections() {
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'visible';
}
function tokenizer(stringValue,delim) {
//converts stringValue to array based on delim
begin=0;
end=stringValue.indexOf(delim);
tokenCount = 0;
while(stringValue.indexOf(delim,begin)>0) {
this[tokenCount] =
parseInt(stringValue.substring(begin,end));
tokenCount += 1;
begin=end+1;
end=stringValue.indexOf(delim,begin);
this.length = tokenCount;
}
}
function animate() {
eval(pre + 'savePath' + post).visibility =
'hidden';
eval(pre + 'directions' + post).visibility =
'hidden';
xPos = new tokenizer(xValues,',');
yPos = new tokenizer(yValues,',');
if(!xPos.length)
return;
if(currentX>xPos.length-1) {
currentX = 0;
currentY=0;
return;
}
eval(pre + 'bulb' + post).left =
parseInt(xPos[currentX]);
eval(pre + 'bulb' + post).top =
parseInt(yPos[currentY]);
currentX++;
currentY++;
setTimeout('animate()',10);
}
</head>
<body onMouseMove="IEgenPath()">
<div id="directions" style="position: absolute; top:
10; left: 10; z-index: 2;">
Drag your mouse around the screen to create a path.
Click Preview to see the path you created.
Click Clear to erase your existing path and start
over.
If you do not click on Clear, the path you create will
be appended to the current path.
Click Save to reveal the coordinates of the path you
generated. You can then copy and paste them into your
code.
Click Directions to read these directions again.
This page has been tested with IE 4+ and Netscape 4.x.
</div>
<div id="controls" style="z-index: 2; position:
absolute; top: 150; left: 10; width: 100;">
<p>
<a href="javascript:clear()">Clear</a><br>
<a href="javascript:animate()">Preview</a><br>
<a href="javascript:save()">Save</a><br>
<a href="javascript:showDirections()">Directions</a>
</p>
</div>
<div id="bulb" width="32" height="64" style="position:
absolute; top: 300; left: 0; z-index: 2;">
<img border="0" src="lightbulb.gif" width="32"
height="64">
</div>
<div id="savePath" style="position:absolute; top: 0;
left: 0; width: 750; visibility: hidden; z-index:
3;">
<form name="form1">
<p>
X-Values<textarea rows="4" name="S1"
cols="20"></textarea>
Y-Values<textarea rows="4"
name="S2" cols="20"></textarea><br>
</p>
</form>
</div>
</body>
</html>