SetTimeout Image Cycling in Circle

sasidhar79 · July 2nd, 2004, 12:54 AM

Hello All,

I am using setTimeout and am acheiving some form of animation with the following code
var imgArray= new Array();

    imgArray[0] = new Image();
    imgArray[0].src = "images/fileprogress-1.gif";

    imgArray[1] = new Image();
    imgArray[1].src = "images/fileprogress-2.gif";

    imgArray[2] = new Image();
    imgArray[2].src = "images/fileprogress-3.gif";

    imgArray[3] = new Image();
    imgArray[3].src = "images/fileprogress-4.gif";

function fnFileProgressImageAnimation()
{
    document.getElementById("FileProgress").style.visi bility = "visible";

    setTimeout("document.images['FileProgress'].src = imgArray[0].src",100)0;
    setTimeout("document.images['FileProgress'].src = imgArray[1].src",500);
    setTimeout("document.images['FileProgress'].src = imgArray[2].src",900);
    setTimeout("document.images['FileProgress'].src = imgArray[3].src",1300);

}

But this code is generating one sequence of animation, I need it to repeat ie., basically it should cycle in animation.

please help in this regard

regards
Sasidhar

thanks,
Sasidhar

ChrisScott · July 2nd, 2004, 03:07 AM

Hi Sasidhar,

Give this a try...

Code:

var gSubScript;
var imgArray= new Array();
imgArray[0] = new Image();
imgArray[0].src = "images/fileprogress-1.gif";

imgArray[1] = new Image();
imgArray[1].src = "images/fileprogress-2.gif";

imgArray[2] = new Image();
imgArray[2].src = "images/fileprogress-3.gif";

imgArray[3] = new Image();
imgArray[3].src = "images/fileprogress-4.gif";

function fnFileProgressImageAnimation()
{   
    gSubScript = 0;
    setTimeout("ChangeImage();", 100);
}

function ChangeImage(){
    document.images["FileProgress"].src = imgArray[gSubScript].src;
    gSubScript = gSubScript == imgArray.length - 1 ? 0 : gSubScript + 1;
    setTimeout("ChangeImage();", 400);
}

Best regards,

Chris

sasidhar79 · July 2nd, 2004, 05:24 AM

Hello Chris,

Thank you very much this works , but there is one issue , sometimes especially for the first time the execution halts at the 4 image and waits a few seconds (3-4seconds) and then proceeds to the target asp page.

But the code you have give me is much better and is a fantastic improvement over what I have done... Thank you very much

regards
Sasidhar

thanks,
Sasidhar

ChrisScott · July 2nd, 2004, 05:30 AM

Hi Sasidhar,

It's difficult to tell what the issue is from your description, can you post your code please?

Cheers,

Chris

sasidhar79 · July 2nd, 2004, 05:42 AM

Hi Chris,

oh , yeah I can post it on to this p2p forum...

thanks,
Sasidhar

sasidhar79 · July 2nd, 2004, 05:46 AM

Hello Chris

I have posted the code below,

************************************************** ******************************

<%
DBConnect
%>

<%
navPageName = "Procedure Exporting "
navLocation = navProcedures & " > <b>" & navPageName & "</b>"
navPageName = NavPageName & Help("ExportProcedure")
navBlue = "No"

UserName = Session("UserName")
Dim DeptID
DeptID = Session("DepartmentID")

If Session("DepartmentID") <> "" Then
    SQL = _
        "SELECT StartMonth, StartDay " & _
        "FROM Department " & _
        "WHERE DepartmentID = " & Session("DepartmentID")
    Set RSx = Con.Execute(SQL)
    If NOT RSx.EOF Then
        StartMonth = RSx(0)
        If CInt(StartMonth) < 10 Then
            StartMonth = "0" & StartMonth
        End If
        StartDay = RSx(1)
        If CInt(StartDay) < 10 Then
            StartDay = "0" & StartDay
        End If
    End If
    Set RSx = Nothing
End If

%>

<style>
   .overlap {
    position: relative; /* establish new containing block */
    width: 200px; height: 200px; /* must specify width/height */
  }
  .overlap .east, .overlap .west, .overlap .north, .overlap .south { position: absolute; }
  .overlap .east { top: 0; z-index: 1; }
  .overlap .west {z-index: 2;}
  .overlap .north {z-index: 3;}
  .overlap .sount { bottom: 0; z-index: 4; }

</style>
<script language="Javascript">
var strFormat;
strFormat = "excel";

    var gSubScript
    var imgArray= new Array();

    imgArray[0] = new Image();
    imgArray[0].src = "images/fileprogress-1.gif";

    imgArray[1] = new Image();
    imgArray[1].src = "images/fileprogress-2.gif";

    imgArray[2] = new Image();
    imgArray[2].src = "images/fileprogress-3.gif";

    imgArray[3] = new Image();
    imgArray[3].src = "images/fileprogress-4.gif";

    //var imgArray= new Array("images/fileprogress-1.gif","images/fileprogress-2.gif","images/fileprogress-3.gif","images/fileprogress-4.gif");

function fnFileProgressImageAnimation()
{
    //document.getElementById("divFileProgressImage").st yle.visibility = "visible";
    document.getElementById("FileProgress").style.visi bility = "visible";

    //setTimeout("document.images['FileProgress'].src = imgArray[0].src",100);
    //setTimeout("document.images['FileProgress'].src = imgArray[1].src",500);
    //setTimeout("document.images['FileProgress'].src = imgArray[2].src",900);
    //setTimeout("document.images['FileProgress'].src = imgArray[3].src",1300);

    gSubScript = 0;
setTimeout("ChangeImage();", 100);

}

function ChangeImage(){
    document.images["FileProgress"].src = imgArray[gSubScript].src;
    gSubScript = gSubScript == imgArray.length - 1 ? 0 : gSubScript + 1;
    setTimeout("ChangeImage();", 400);
}

function fnExportProcedure()
{
    //the animation for the build file process
    //fnFileProgressImageAnimation();

    var strStartDate;
    var strEndDate;

    strStartDate = document.getElementById("txtstartdate").value;
    strEndDate = document.getElementById("txtenddate").value;

    if(strStartDate == "")
    {
        alert("Please enter a Start Date");
        document.getElementById("txtstartdate").focus();
        return;
    }
    if(strEndDate == "")
    {
        alert("Please enter an End Date");
        document.getElementById("txtenddate").focus();
        return;
    }

        fnFileProgressImageAnimation();

    //document.getElementById("divFileProgressImage").st yle.visibility = "visible";
    document.getElementById("divExportProgressInfo").s tyle.visibility = "visible";

    var strPath;
    if(strFormat == "excel")
    {
        strPath = "excelexportProc.asp?StartDt=" + strStartDate + "&EndDt=" + strEndDate + "&UserName=<%=UserName%>&DepartmentID=<%=DeptID%>" ;
        //alert(strPath);
        window.navigate(strPath);
    }
    else
    {
        if(strFormat == "csv")
        {
            strPath = "txtexportProcedure.asp?StartDt=" + strStartDate + "&EndDt=" + strEndDate;
            //alert(strPath);
            window.navigate(strPath);
        }
        else
        {
            strPath = "AccessExportProcedure.asp?StartDt=" + strStartDate + "&EndDt=" + strEndDate;
            //alert(strPath);
            window.navigate(strPath);

        }

    }

}

function fnFormatChecked(strFormatName)
{
    strFormat = strFormatName;

}
function fnBodyLoad()
{

    //document.getElementById("divFileProgressImage").st yle.visibility = "hidden";
    document.getElementById("divExportProgressInfo").s tyle.visibility = "hidden";

    // Set varible to the current date
    var right_now=new Date();

    // set variable to current month number (0-11)
    var month_num = right_now.getMonth()

    // set varible to the current day value (1-31)
    var thedate=right_now.getDate()

    // create an array for the month name
    var month_name = new Array (
    "January ",
    "February ",
    "March ",
    "April ",
    "May ",
    "June ",
    "July ",
    "August ",
    "September ",
    "October ",
    "November ",
    "December ");

    // Create a varible right_year with the current year
    var right_year=right_now.getYear();
    if (right_year < 2000)
    right_year = right_year + 1900;

    // create a varible to specify what the
    // last day for the current month is
    var theday = 0;
    if (
    month_num == 0 ||
    month_num == 2 ||
    month_num == 4 ||
    month_num == 6 ||
    month_num == 7 ||
    month_num == 9 ||
    month_num == 11)
    {
    endofmonth=31;
    }
    if (
    month_num == 3 ||
    month_num == 5 ||
    month_num == 8 ||
    month_num == 10)
    {
    endofmonth=30;
    }

    if (month_num == 1)
    {
    // This will check for a leap year
    // If the year is evenly divisible by four
    // or in the case of a new century evenly divisible
    // by 400 then the end of the February month should be the 29th

    right_year_divided=right_year/4;
    right_year_divided_string= new String(right_year_divided);
    var is_decimal = right_year_divided_string.indexOf('.');
    if (is_decimal != -1)
    { endofmonth=28; }
    else
    { endofmonth=29; }

    right_year_string= new String(right_year);
    var the_century=new String(right_year_string.charAt(2))
    the_century= the_century + new String(right_year_string.charAt(3));
    if (the_century == "00")
    {
    right_year_divided=right_year/400;
    right_year_divided_string= new String(right_year_divided);
    var is_decimal = right_year_divided_string.indexOf('.');
    if (is_decimal != -1)
    {endofmonth=28;}
    else
    {endofmonth=29;}
    }
    }

    var day = endofmonth;

    var m = month_num + 1;
    var month_now = (m < 10) ? '0' + m : m;

    var yy = right_now.getYear();
    var year = (yy < 1000) ? yy + 1900 : yy;

    var startYear = year - 1
    //var todaydate = month_now + "/" + day + "/" + year;
    var today = new Date()
    //alert(today.getMonth()+1+"/"+today.getDate()+"/"+today.getYear())
    var todaydate = today.getMonth()+1+"/"+today.getDate()+"/"+today.getYear()
    var strStartMonth;
    var strStartDay;

    strStartMonth = document.getElementById("StartMonth").value;
    strStartDay = document.getElementById("StartDay").value;

    if(document.getElementById("txtstartdate").value == "")
        //document.getElementById("txtstartdate").value = strStartMonth + "/" + strStartDay + "/" + year;
        document.getElementById("txtstartdate").value = strStartMonth + "/" + strStartDay + "/" + startYear;
    if(document.getElementById("txtenddate").value == "")
        document.getElementById("txtenddate").value = todaydate;

}

</script>

<%

function fnDrawExportProcedure()
    Response.Write "<table CELLSPACING='0' BORDER='0' CELLPADDING='4' WIDTH='624'>"
    Response.Write "<tr><td WIDTH='136' VALIGN='MIDDLE' BGCOLOR='#ffffff'>"
    Response.Write "<b>Step 1 of 2: </b></td>"
    Response.Write "<td WIDTH='472' BGCOLOR='#99C4D7'><b>"
    Response.write "Select a Date Range to Export</b></td></tr></table>"
    Response.Write "<table CELLSPACING='0' BORDER='0' CELLPADDING='4' WIDTH='623' height='55'>"
    Response.write "<tr><td WIDTH='137' height='50' valign='top'><b>"
    Response.write "<p align='right' style='margin-top: 12'>Start Date</b></td>"
    Response.write "<td WIDTH='170' height='50' valign='top'>"
    Response.write "<p style='margin-top: 12'>"
    Response.write "<input type='text' SIZE='10' id='txtstartdate' name='txtstartdate'>"
    Response.write " (mm/dd/yy)</td>"
    Response.write "<td WIDTH='100' height='50' valign='top'><b>"
    Response.write "<p align='right' style='margin-top: 12'>End Date</b></td>"
    Response.write "<td WIDTH='180' height='50' valign='top'>"
    Response.write "<p style='margin-top: 12'>"
    Response.write "<input type='text' SIZE='10' id='txtenddate' name='txtenddate'>"
    Response.write " (mm/dd/yy)</td></tr></table>"
    Response.Write "<table CELLSPACING='0' BORDER='0' CELLPADDING='4' WIDTH='624'>"
    Response.Write "<tr><td WIDTH='137' VALIGN='MIDDLE' BGCOLOR='#ffffff'>"
    Response.Write "<b>Step 2 of 2: </b></td>"
    Response.Write "<td WIDTH='471' BGCOLOR='#99C4D7'><b>"
    Response.write "Select a Format for Exporting</b></td></tr></table>"
    Response.Write "<table width='514' border='0' height='50'>"
    Response.Write "<form name='frmExport'>"
    Response.Write "<tr><td width='139'> </td><td width='47'>"
    Response.Write "<img height='45' alt='Excel' src='https://www.myevaluations.com/images/ExcelFiles.gif' width='45' border='0'>"
    Response.Write "</td><td width='53'>"
    Response.Write "<input id='radformat' onClick=""fnFormatChecked('excel')"" type='radio' value='Excel' checked name='radformat'>Excel"
    Response.Write "</td><td width='16'><b>    </b> </td><td width='45'>"
    Response.Write "<img height='45' alt='CSV' src='https://www.myevaluations.com/images/CSVFiles.gif' width='45' border='0'>"
    Response.Write "</td><td width='51'>"
    Response.Write "<input id='radformat' onclick=""fnFormatChecked('csv')"" type='radio' value='CSV' name='radformat'>CSV"
    Response.Write "</td><td width='16'><b>    </b> </td><td width='45'>"
    Response.Write "<img height='45' alt='Access' src='https://www.myevaluations.com/images/AccessFiles.gif' width='45' border='0'>"
    Response.Write "</td><td width='64'>"
    Response.Write "<input id='radformat' onclick=""fnFormatChecked('access')"" type='radio' value='Access' name='radformat'>Access"
    Response.Write "</td></tr>"
    Response.Write "<input type='hidden' name='StartMonth' value='"& StartMonth &"'>"
    response.write "<input type='hidden' name='StartDay' value='"& StartDay &"'>"
    response.write "</form></table>"
    Response.Write "<table border='0' height='40'>"
    Response.Write "<tr><td colspan='2'><table>"
    Response.Write "<tr><td><input type='button' value='Build File' onClick='fnExportProcedure()' id=button1 name=button1> &nbsp"
    'Response.Write "</td><td><div id='divFileProgressImage' style='visibility:hidden'><IMG SRC='images/fileprogress-1.gif' BORDER=0 ALT='' name='FileProgress' id='FileProgress'><IMG SRC='images/fileprogress-2.gif' BORDER=0 ALT='' name='FileProgress' id='FileProgress'><IMG SRC='images/fileprogress-3.gif' BORDER=0 ALT='' name='FileProgress' id='FileProgress'><IMG SRC='images/fileprogress-4.gif' BORDER=0 ALT='' name='FileProgress' id='FileProgress'></div>"
    Response.Write "</td><td><IMG SRC='images/fileprogress-1.gif' BORDER=0 ALT='' name='FileProgress' id='FileProgress' style='visibility:hidden'>"
    Response.Write "</td><td valign='center'><div id='divExportProgressInfo' style='visibility:hidden'>Building file...please wait</div>"
    Response.Write "</td></tr></table></td></tr></table>"
end function

%>

<body onload="fnBodyLoad()" bgcolor="#003366" text="#FFFFFF">
<form>
<%
Response.Write fnDrawExportProcedure()

%>

</form>
</body>

************************************************** ******************************
there is a whole lot of process on the target page and once it is done the page actually loads. therefore this animation ought to run till the target page loads.

thanks,
Sasidhar

ChrisScott · July 2nd, 2004, 09:39 AM

Hi Sasidhar,

Your code looks fine to me. I think it may just be your browser pausing as it loads the next request - after the first one it may have cached the resultant page so you don't get the same effect.

If you've got the facilities, it may be worth trying an animated gif (couldn't try it here, firewall stops the gifs after one execution :-( ).

HTH,

Chris

sasidhar79 · July 3rd, 2004, 12:30 AM

Hi Chris,

I have tried initiall with a animated gif, but the animation can never be seen , therefore I had to look for a javascript alternative.

regards

thanks,
Sasidhar