Home/ Questions/Q 7862799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T23:17:11+00:00

I am trying to change pages based on specific time interval. I tried using

  • 0

I am trying to change pages based on specific time interval.
I tried using setTimeout, but it run the code immediately regardless the specified time.
Here is the page:

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Change Page</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            var oCSS = {
                'font-size' : '18em',
                'height' : '300px',
                'border' : 'thick solid',
                'text-align' : 'center'
            };

            $(document).bind("mobileinit", function()
            {
                $.mobile.defaultPageTransition = "flip";
            });
            $('div[data-role|="page"]').live('pageshow', function(event)
            {
                setTimeout($.mobile.changePage($($(this).attr('NextPage'))), 30000);
            });
        </script>

        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body>
    <div data-role="page" id="page1" NextPage='#page2'>
        <div data-role="content">
            <div class="number">4</div>
        </div>
    </div>

    <div data-role="page" id="page2" NextPage='#page3'>
        <div data-role="content">
            <div class='number'>3</div>
        </div>
    </div>

    <div data-role="page" id="page3" NextPage='#page4'>
        <div data-role="content">
            <div class='number'>2</div>
        </div>
    </div>

    <div data-role="page" id="page4" NextPage='#page1'>
        <div data-role="content">
            <div class='number'>1</div>
        </div>
    </div>

    <script type="text/javascript">
        $(".number").css(oCSS);
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your syntax is incorrect. You need to use an anonymous function or the JS will be called immediately. In addition, your jQuery seems to be incorrect as well (one too many $()). It should be:

    $('div[data-role|="page"]').live('pageshow', function(event)
{
    // Retrieve attribute of element to be passed to anonymous function
    var functionParam = $(this).attr('NextPage')

    setTimeout(function() {
        // Pass functionParam to function - $(this) will 
        // be out of scope when the function is called
        $.mobile.changePage(functionParam)
    }, 30000);​
});

    See window.setTimeout docs for further information.

    • 0