Hi,
I didn't get any reply to this, so I want to try to explain it more. On my page, I want a layer to appear every 5 seconds. It slides up, and you can click on it, to slide it back. This works fine, except, the second attempt to slide the layer doesn't work, the layer appears on a position on top left corner of a page, and doesn't do anything. I want this to automatically start the slide at the same spot, with 5 seconds intervals, whether i click to hide it, or not.
Can anyone please help me, I am not into Javascript, but would like to fix this problem.
Thanks for your help.
Mike
code:
<html>
<head>
<script language=javascript>
<!--
window.setInterval("startSlide('ass');",5000);
//-->
</script>
<SCRIPT language=JavaScript src=http://www.webdeveloper.com/forum/archive/index.php/"Diary/JavaScript/PopUpAttention.js" type=text/javascript></SCRIPT>
<style type="text/css">
.launch{position: absolute;left: 590px;top: 545px;z-index: 1;}
</style>
</head>
<body leftmargin="0" topmargin="3" marginwidth="0" marginheight="0">
<DIV ID="launch" class="launch" STYLE="
WIDTH:200px;
HEIGHT:100px;
BACKGROUND-COLOR: #FEF7ED;
LAYER-BACKGROUND-COLOR: #FEF7ED;
BORDER: #52819F;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
PADDING: 10px;
VISIBILITY:hidden;
">
</DIV>
</body>
</html>
javascript file=====
keyFrame = 0;
keyFrameBack = 0;
movingObjLeft = new Array(1);
movingObjTop = new Array(1);
movingObjLeftBack = new Array(1);
movingObjTopBack = new Array(1);
movingObjLeft[0] = new Array(590,590,590,590,590,590,590,590,590,590,590,
590,590,590,590,590);
movingObjTop[0] = new Array(545,535,525,515,505,495,485,475,465,455,445,
435,425,415,405,395);
movingObjTopBack[0] = new Array(395,405,415,425,435,445,455,465,475,485,495,
505,515,525,535,545);
movingObjLeftBack[0] = new Array(590,590,590,590,590,590,590,590,590,590,590,
590,590,590,590,590);
function startSlide(SoapResults)
{
document.getElementById('launch').innerHTML = "<span class=TextNormal>"+SoapResults+"</span><br><A HREF='http://www.webdeveloper.com/forum/archive/index.php/#' onClick='startSlideBack(); return true' >Slide layer back</A>";
document.getElementById('launch').posLeft = 590;
document.getElementById('launch').posTop = 545;
ShowPopUpAttention();
setTimeout("slideTheObject()", 100);
}
function startSlideBack()
{
setTimeout("slideTheObjectBack()",100)
}
function slideTheObject()
{
var whichOne;
whichOne = document.all.launch.style;
whichOne.posLeft = movingObjLeft[0][keyFrame];
whichOne.posTop = movingObjTop[0][keyFrame];
keyFrame++;
if(keyFrame < movingObjLeft[0].length && keyFrame < movingObjTop[0].length)
setTimeout("slideTheObject()",100);
}
function slideTheObjectBack()
{
var whichOne;
whichOne = document.all.launch.style;
whichOne.posLeft = movingObjLeftBack[0][keyFrameBack];
whichOne.posTop = movingObjTopBack[0][keyFrameBack];
keyFrameBack++
if (keyFrameBack < movingObjLeftBack[0].length && keyFrameBack < movingObjTopBack[0].length)
setTimeout("slideTheObjectBack()",100);
if (whichOne.posTop == 545){
document.getElementById('launch').posLeft = 590;
document.getElementById('launch').posTop = 545;
HidePopUpAttention();
}
}
function HidePopUpAttention(){
if (document.getElementById) {
document.getElementById('launch').style.visibility = "hidden";
}
else if (document.all) {
document.all['launch'].style.visibility = "hidden";
}
else if (document.layers) {
document.layers['launch'].visibility = "hidden";
}
}
function ShowPopUpAttention(){
if (document.getElementById) {
document.getElementById('launch').style.visibility = "visible";
}
else if (document.all) {
document.all['launch'].style.visibility = "visible";
}
else if (document.layers) {
document.layers['launch'].visibility = "visible";
}
}
I didn't get any reply to this, so I want to try to explain it more. On my page, I want a layer to appear every 5 seconds. It slides up, and you can click on it, to slide it back. This works fine, except, the second attempt to slide the layer doesn't work, the layer appears on a position on top left corner of a page, and doesn't do anything. I want this to automatically start the slide at the same spot, with 5 seconds intervals, whether i click to hide it, or not.
Can anyone please help me, I am not into Javascript, but would like to fix this problem.
Thanks for your help.
Mike
code:
<html>
<head>
<script language=javascript>
<!--
window.setInterval("startSlide('ass');",5000);
//-->
</script>
<SCRIPT language=JavaScript src=http://www.webdeveloper.com/forum/archive/index.php/"Diary/JavaScript/PopUpAttention.js" type=text/javascript></SCRIPT>
<style type="text/css">
.launch{position: absolute;left: 590px;top: 545px;z-index: 1;}
</style>
</head>
<body leftmargin="0" topmargin="3" marginwidth="0" marginheight="0">
<DIV ID="launch" class="launch" STYLE="
WIDTH:200px;
HEIGHT:100px;
BACKGROUND-COLOR: #FEF7ED;
LAYER-BACKGROUND-COLOR: #FEF7ED;
BORDER: #52819F;
BORDER-STYLE: solid;
BORDER-WIDTH: thin;
PADDING: 10px;
VISIBILITY:hidden;
">
</DIV>
</body>
</html>
javascript file=====
keyFrame = 0;
keyFrameBack = 0;
movingObjLeft = new Array(1);
movingObjTop = new Array(1);
movingObjLeftBack = new Array(1);
movingObjTopBack = new Array(1);
movingObjLeft[0] = new Array(590,590,590,590,590,590,590,590,590,590,590,
590,590,590,590,590);
movingObjTop[0] = new Array(545,535,525,515,505,495,485,475,465,455,445,
435,425,415,405,395);
movingObjTopBack[0] = new Array(395,405,415,425,435,445,455,465,475,485,495,
505,515,525,535,545);
movingObjLeftBack[0] = new Array(590,590,590,590,590,590,590,590,590,590,590,
590,590,590,590,590);
function startSlide(SoapResults)
{
document.getElementById('launch').innerHTML = "<span class=TextNormal>"+SoapResults+"</span><br><A HREF='http://www.webdeveloper.com/forum/archive/index.php/#' onClick='startSlideBack(); return true' >Slide layer back</A>";
document.getElementById('launch').posLeft = 590;
document.getElementById('launch').posTop = 545;
ShowPopUpAttention();
setTimeout("slideTheObject()", 100);
}
function startSlideBack()
{
setTimeout("slideTheObjectBack()",100)
}
function slideTheObject()
{
var whichOne;
whichOne = document.all.launch.style;
whichOne.posLeft = movingObjLeft[0][keyFrame];
whichOne.posTop = movingObjTop[0][keyFrame];
keyFrame++;
if(keyFrame < movingObjLeft[0].length && keyFrame < movingObjTop[0].length)
setTimeout("slideTheObject()",100);
}
function slideTheObjectBack()
{
var whichOne;
whichOne = document.all.launch.style;
whichOne.posLeft = movingObjLeftBack[0][keyFrameBack];
whichOne.posTop = movingObjTopBack[0][keyFrameBack];
keyFrameBack++
if (keyFrameBack < movingObjLeftBack[0].length && keyFrameBack < movingObjTopBack[0].length)
setTimeout("slideTheObjectBack()",100);
if (whichOne.posTop == 545){
document.getElementById('launch').posLeft = 590;
document.getElementById('launch').posTop = 545;
HidePopUpAttention();
}
}
function HidePopUpAttention(){
if (document.getElementById) {
document.getElementById('launch').style.visibility = "hidden";
}
else if (document.all) {
document.all['launch'].style.visibility = "hidden";
}
else if (document.layers) {
document.layers['launch'].visibility = "hidden";
}
}
function ShowPopUpAttention(){
if (document.getElementById) {
document.getElementById('launch').style.visibility = "visible";
}
else if (document.all) {
document.all['launch'].style.visibility = "visible";
}
else if (document.layers) {
document.layers['launch'].visibility = "visible";
}
}