views:

46

answers:

1

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

A: 
Gaby
made some changes ..
Gaby
Thank you very much! I made the changes according to you and now it works! You can see it on the test2.php file at the same directory. There is just one more thing: Sometimes there is a lag when pressing one of the buttons, which means, the animation does not start at the same moment but takes a short amound of time (up to 2 seconds). I believe it has something to do with the jquery animation ending but I'm not sure. Any idea? Again: thank you very much!
Cletus
true.. added update2 to my answer about this ...
Gaby
Gaby, many thanks for your help, you saved me a lot of time and stress! And so fast! This is really a great website!
Cletus