Alright, so here's my dilemma. I've got these two "slides" lined up, one ready to be passed into view. I have it working and all, but I can scroll over to the right to see the second slide! How could I have it you can only view the one slide?

JavaScript used:

function validate(form) {
    var user = form.username.value;
    var pass = form.password.value;

    if(user === "test") {
        if(pass === "pass") {
            var hideoptions = {"direction" : "left",  "mode" : "hide"};
            var showoptions = {"direction" : "left", "mode" : "show"};

            /*$("#loginView").toggle("slide", hideoptions, 1000, function() {
                $("#loginView").css("margin-left", "100%"); 
            });
            $("#mainView").toggle("slide", showoptions, 1000, function() {
                $("#mainView").css("margin-left", 0);
            });*/

            $("#loginView").animate({ marginLeft: "-100%" }, 1000);
            $("#mainView").animate({ marginLeft: "0" }, 1000);

         } else {
            alert("nope");
         }
    } else {
        alert("nope 2");
    }
}

As you can see here @ http://jsfiddle.net/D7Va3/1/ (JSFiddle), once you enter "test" and "pass", then click enter, the tiles slide. But. If you reload, you can see that you can scroll to the right of the screen and view the second slide prematurely, which is just not going to work for me. I still need to achieve the same seamless transition, but you must only be able to view one slide at a time. Also, I plan to expand with more slides, so if you're feeling lucky today, I'd really love to see an example of how I could support multiple frames. I'm very new to JavaScript (yet I know syntax rules, and general coding knowledge from other languages), so the better you explain, the more knowledgeable I can be, and I'd be very grateful for that. Thanks in advance!