kippie
08-09-2002, 01:26 PM
In the script below the function "fnToggle" is used as onload event. Now everything functions well al long as I have the "toggle script" placed in the head of the HTML. But when I place the "toggle script" in an external "toggle.js" file and upload it with the HTML on the web (see http://www.experiencetraining.nl/blockstext.html) there comes an error and the transition doesn't take place. The strange thing is that if I use "toggle.js" externally on my pc there is no error and everything works. Is there somehow a conflict between using a function as onload event on the one side and placing that function in an external script on the other hand?
I use XP and IE6.
Can anyone help?
This is the HTML with the "toggle script" placed inside the head:
<html>
<head>
<SCRIPT>
var bTranState = 0;
function fnToggle() {
oTransContainer.filters[0].Apply();
if (bTranState=='0') {
bTranState = 1;
oDIV2.style.visibility="visible";
oDIV1.style.visibility="hidden";}
else {
bTranState = 0;
oDIV2.style.visibility="hidden";
oDIV1.style.visibility="visible";}
oTransContainer.filters[0].Play();}
</SCRIPT>
</head>
<body onload="fnToggle()">
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.5,overlap=1.5) ">
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1 </DIV>
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px;
width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
</DIV>
</DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
</body>
</html>
Kippie
I use XP and IE6.
Can anyone help?
This is the HTML with the "toggle script" placed inside the head:
<html>
<head>
<SCRIPT>
var bTranState = 0;
function fnToggle() {
oTransContainer.filters[0].Apply();
if (bTranState=='0') {
bTranState = 1;
oDIV2.style.visibility="visible";
oDIV1.style.visibility="hidden";}
else {
bTranState = 0;
oDIV2.style.visibility="hidden";
oDIV1.style.visibility="visible";}
oTransContainer.filters[0].Play();}
</SCRIPT>
</head>
<body onload="fnToggle()">
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px;
height:300px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.5,overlap=1.5) ">
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1 </DIV>
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px;
width:240px; height:160px; background: yellowgreen; "> <BR> This is DIV #2
</DIV>
</DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
</body>
</html>
Kippie