[RESOLVED]Is there a way using jquery to transition pages to a completely new page without the flicker of a whole new page?

Obviously update panels allows to do PostBack’s without flicker, but is there a way to transition to a completely different page easily using JQuery as well?


Hi JAYHAWKER,

Thanks for your post.

You could try to use .load() method to load data from the server and place the returned HTML into the matched element as below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#btnload").click(function () {
                var url = "TargetPage.aspx"
                $("#content").load(url);
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="btnload" type="button" value="Load" />
        </div>
        <div id="content">
            Main Content
        </div>
    </form>
</body>
</html> 

Another page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="container1">
            Hello
        </div>
        <div id="container2">
            Hello World
        </div>
    </form>
</body>
</html> 

For more information about .load() method, you could check the following link.

Hope it will be helpful to you.

Best Regards,

Fei Han

yes. look at jquery mobile site for a good example (be sure transitions is enabled). you can also find other page transition libraries. the code for this is pretty simple:

you create two divs, one for the current page, and one for the next page. starting out, div one has the current page, and div two is empty and off screen. on a page flip, the new page is loaded into div two, after load, a css transition effect is used to
display the new page.

a common effect would be to have the divs side by side, with the second div off screen to the right.  after load, start moving both divs to the left until only the second div is load. after transition.

hint: you can use an iframe in each div if your pages are designed to work together, or be loaded widgets. you will also want an navigation history library.,

Leave a Reply