Question

I’m wondering and trying to have it so once the user clicks a link within my menu, the page loads by coming in from the top of the page, sliding in vertically. EG; Click link > New page nicely (maybe easing) into position from top out of frame.

I know this is possible with .slide in jQuery, but I’m not having any luck thus far.

I’m trying to do this in a WordPress site.

Any suggestions?

Spawning from original question at: Getting page content via wrapper in WP to slide in

Answer 1

Here’s a quick, almost completely codeless explanation for how I do that on one of our sites…

Requires jQuery, basic ajaxing and a custom template.

For wordpress you will want to create an ajax handler to query your post, page or whatever it is you’re loading in. You first make a new page and title it ajax_handler or whatever you will find useful. Then you make that page private so it doesn’t show up in your menu.

Then you need to create a custom handler, which in this case is simply a custom template. To do so you could just copy page.php and rename it to ajax_handler.php then add the standard template comment so it will show up in your template list and remove anything that is specific to the page.php file – essentially empty the file so you don’t call anything you don’t want at this point but keep the basic wp direct call provisions in place.

Then you assign that template to your new page.

Within that page you can make a simple statement like…

if(isset($_GET['request']))
{
    switch($_GET['request'])
    {
        case "article":
            // run the wp query to fetch whatever it is you're trying to load in

            die(json_encode(array("title" => "test", "body" => "sample content")));

            // obviously you would encode the results from the query
        break;
        default:

        break;
    }
}

then on your site you would have a jquery listener or event that makes the ajax call…

$(document).ready(function(){
    $('#link').on('click', function(){
        $.ajax({
            'url': 'http://www.yourdomain.com/ajax_handler', //whatever your permalink to that new page is
            'type': 'get',
            'data': {id:'1', request: 'article'}, //whatever the id is you want. You can fetch this any number of ways so I assume you know how to do it
            'dataType': 'json',
            'success': function(data){
                $('#slider_div h1').html(data.title);
                $('#slider_div p').html(data.body);
                $('#slider_div').animate({top: '0%'}, 1000);
            }
        });
    });
});

and finally your html would have a simple div that is just pushed above the page with basic css…

<div id="slider_div">
    <h1>title to replace</h1>
    <p>body text to replace</p>
</div>

and the css:

#slider_div{
    width:100%;
    height:100%;
    background:#fff;
    position:absolute;
    z-index:999;
    top:-100%;
}

This answer assumes you have some idea of what you’re doing. I tested none of it but I actually helped someone make this same kind of thing today. The html and css may vary but the concept is still the same. hope it helps.