CODEWITHSUNDEEP
javascriptjqueryhtmlajaxslider
Robert
Robert

Reputation: 25

Load page Ajax and then slide it into page OR plugin


My site structure is more or less this: HOME - PAGE1 - PAGE2 - PAGE3.
What I would realize is a site with transition like "a mobile app" between pages, where you click on a button then the new page slide in.
Now I'm looking on how to realize that, if using AJAX (that load the page and slide it but I don't know AJAX) or use a plugin (but I can't find anything).
Another alternative is create a single page and then moving into that (would be great find a plugin to do that) but the pages are big so my site will became heavy.
Does anyone have an idea how help me? Thanks guys!

ps: the site is developed ONLY for tablet and smartphones

Upvotes: 1

Views: 2212

Answers (1)

Banana
Banana

Reputation: 7484

there are many ways to implement what you wanted, below i will show you one of them. (example at the bottom of the answer)

you hide the content outside of the screen, and slide it when page loads:

HTML:

<div class="content_div">
    <p class="title">HOME</p>
    <a href="" class="nav">page 1</a>
</div>

CSS:

body{
    overflow:hidden;
}
.content_div {
    box-shadow:0 0 10px;
    border:10px solid black;
    height:800px;
    left:-1000px;
    width:100%;
    -webkit-animation:slide_in 800ms ease-out forwards;
    position:absolute;
    box-sizing:border-box;
}
.title{
    font-size:50px;
    text-align:center;
}
.nav{
    margin-left:20px;
}
@-webkit-keyframes slide_in{
    0% {
        left:-1000px;
    }
    100% {
        left:0px;
    }
}

now when you click a link, you intercept the click using a custom handler, prevent the default redirection, execute a "slide out" animation and once the animation is done, you redirect manually:

the function inside .promise().done() will be executed as soon as all animations on the object are done:

$(function(){
    $(".nav").on("click",function(ev){
        ev.preventDefault();        
        $(".content_div").animate({
            "margin-left":$(".content_div").width() +100
        }).promise().done(function(){
            window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
        });
    });
});

here is a Live Example

implement this on every page in your website, and you should have sliding transitions. change the transitions if you would like a different animation.

NOTE: in jsfiddle it will be a bit messed up because it will open itself inside itself, but on your website it will work as needed.

UPDATE FOR AJAX:

if you would like to avoid the disappearing of pages while window relocates to a new page, you need to load the content from the new page dynamically instead of changing location.

you can do that using plain ajax, or you can use jQuery's ajax extension .load(), it does the same ajax behind the scenes:

$(".nav_waitforajax").on("click", function (ev) {
    ev.preventDefault();
    $(".content_div").animate({
        "margin-left": $(".content_div").width() + 100
    }).promise().done(function () {
        $(".content_div").load("/three", function () {
            $(".content_div").animate({
                "margin-left": 0
            });
        });
    });
});

Ajax Example

UPDATE 2: delegated handlers for dynamic content:

//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
    $(this).css({
        "background":"red"
    });
});

Delegates Example

Upvotes: 3

Related Questions