Question

First let me tell you that I learned scripting all by myself so my approaches are sure a bit weird.
To explain what I want to do please go to this example site I prepared: How it should be, kind of!

You’ll notice that when you press on all the links which appear after pressing “Showroom” and all other menue buttons the content of the main box is changing BEFORE the window moves down.

Simply said: what I want to accomplish is that the window moves down with keeping it content until its gone, then when It appears from the right side it should have the new content.

current window content: “home”
-> Push “personal”
-> Window content still that of “home”
-> Moves down
-> Comes from right side with content from “personal”

Here is the Javascript part of the AJAX and the animation

 function createRequestObject()
 {
    var ro;
    var browser = navigator.appName;
     if(browser == "Microsoft Internet Explorer")
    {
    ro = new ActiveXObject("Microsoft.XMLHTTP");
 }
    else
    {
    ro = new XMLHttpRequest();
 }
 return ro;

 }

 var http = createRequestObject();

 var katcheck;

 function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    }
    else
    {
    $('#videoleft').animate({"top": "1000px"}, { queue:true, duration:600,  easing: 'easeInQuad'})
              .hide(0).animate({"top": "0px", "left": "800px"},{ queue:true, duration:1});

        http.open('get', 'getwork.php?id='+req);
    }
http.onreadystatechange = handleResponse;
http.send(null);
}


function handleResponse()
{
    if(http.readyState == 4)
                    {
                   var response = http.responseText;
                    }

    if (katcheck == "k")
    {
                document.getElementById("videomenue").innerHTML = response;
    }
    else
    {
        $('#videoleft').show(0).animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});

        document.getElementById("post").innerHTML = response;

    }
 }

Ok now I’ll explain the part at the beginning of the sndReq function:

Usually the buttons in the menue just send numbers (which are IDs in the DB) to the sndReq. For example: you press on “Showroom” then “k_01” is being send to the same sndReq function. The “k” stands for category and the script tells if its a category-request or not by slicing the string.

I hope you understand what I mean.

It would be great to have actually to windows, one with the old content moving down and at the same time one new window coming from the right side with the new content but when I tried to assamble it with two windows like in test3.php (same directory) I get the undefined problem.

I hope someone can help me. Thank you very much

Answer 1

The animate function is asynchronous which means that you call it and your code continues execution while the animations i happening..

So problem #1
You chain the hide command on the animate which hides it at the same time that the animation is starting (this is why there is a flash of the box. The animation re-shows the box and continues with the animation..)

Fix
The animate function also accepts as parameter a callback function to be executed when the animation ends..

There, is where you should invoke your ajax code so that it executes after the box is out of the screen..

I believe the following changes to your sndReq function will do the trick ..

function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    http.send(null);
    http.onreadystatechange = handleResponse;
    }
    else
    {
    $('#videoleft')
         .animate(  {"top": "1000px"}, 
                    600, 'easeInQuad',
                    function(){
                                console.log('fetching remote data');
                                var param = req;
                                http.open('get', 'getwork.php?id='+param);
                                http.send(null);
                                http.onreadystatechange = handleResponse;
                              } // this is the callback function 
                 )
         .animate(
                    {"top": "0px", "left": "800px"},
                    1, 
                    function(){$(this).hide();}
                 );

    }
}

Update
Additionally, in the handleResponse you should set the innerHtml to the response before starting the animation ..

Also you have a double script in the end of your html .. have a look at it and remove the duplicate closing tag..

QueryLoader.init();
</script>

Update 2
The problem you describe in your comment happens because your handleResponse function is called many times. This is normal and occurs because the readystatechange event occurs for every change of the ajax call.. You need to perform action only when the http has completed (readystate==4), not on any change ..

so your code should be inside the initial if statement to avoid multiple executions..

change it to

function handleResponse()
{
    if(http.readyState == 4)
         {
          var response = http.responseText;

          if (katcheck == "k")
               {
                document.getElementById("videomenue").innerHTML = response;
               }
          else
               {
                $('#videoleft')
                         .show(0).
                         .animate(
                                  {"top": "0px", "left":"0px"},
                                  { queue:true, duration:800,  easing: 'easeOutBack'}
                                 );
          document.getElementById("post").innerHTML = response;

               }
         }
 }