0

I have the following script which starts running when i click on record button . I want to show a image when i click on record button which is same as the one displayed usually when we upload images on... this is the script:

<script>
function st()
{
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        alert('RECORDING Start');
        }

    }
    xmlhttp.open('GET','http://localhost/IPCAM/start.php;)

    xmlhttp.send();

setTimeout('st()',5000);
}
</script>

And this the button when i click on this button the ajax starts background.

<button OnClick="st()">Record</button>

I have no Idea to do this please can someone help me .

mtk
  • 13,221
  • 16
  • 72
  • 112
Roger Mendes
  • 57
  • 1
  • 10
  • st() is function call to the script, it start executing a page record.php which fetch frames from ip camera. – Roger Mendes Feb 28 '13 at 21:17
  • You're introducing an unwanted global `xmlhttp` and you didn't close the string `http://localhost/IPCAM/start.php`. And the preferred syntax of `setTimeout` is `setTimeout(function, timer)` instead of `(string, timer)`. – Marcel Korpel Feb 28 '13 at 21:18
  • sorry it was a typo from my side , but this script is working fine and successfully recording video.. only now i want to show a image loading when i hit record button .is it possible? – Roger Mendes Feb 28 '13 at 21:21

2 Answers2

1

Add a div with id loadingDiv and change your code to this

<script>
function st()
{
                        if (window.XMLHttpRequest)
                        {
                            xmlhttp=new XMLHttpRequest();
                        }
                        else
                        {
                            xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
                        }
                        xmlhttp.onreadystatechange=function()
                        {
                            if (xmlhttp.readyState==1)
                            {
                            document.getElementById("loadingDiv").innerHTML = "<img src='loading.gif'/>";
                            }
                            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                            {
                            alert('RECORDING Start');
                            }

                        }
                        xmlhttp.open('GET','http://localhost/IPCAM/start.php;

                        xmlhttp.send();

setTimeout('st()',5000);
}
</script>
MIIB
  • 1,849
  • 10
  • 21
  • Also, the string `http://localhost/IPCAM/start.php` isn't closed. And there's a global variable `xmlhttp` in your code, too. And why not just starting the animation after `xmlhttp.send()`? – Marcel Korpel Feb 28 '13 at 21:24
1

To begin with I find your question very unclear, but let me try:

Make sure that you have a css class that defines the image:

.recordingBackground
{
    background-image: url("record.png");
}

(Or just use javascript)

Create the button:

<input type="button" id="recordButton" value="Record" />

Make jQuery listen to the button and you can add the class to the element:

$('#recordButton').live("click", function()
{
    $('#background').addClass('recordingBackground');
    // Or use a similar method (for example: pure javascript).
    // #background is just an example div.
});
Jonast92
  • 4,964
  • 1
  • 18
  • 32