sandbox_slider.htm

<html>
<head>

<style type="text/css">

</style>


<!-- load the css used by the jquery-mobile library -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />


<!-- load the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- load the js that binds to various jqm events here, BEFORE loading jqm -->
<script src="sandbox_slider.js"></script> // can be obtained from: http://pastebin.com/iQsagrmt

<!-- load the jquery-mobile (jqm) library -->
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>


</head>
<body>


<!-- all css, script, and page content for this page GO INSIDE THIS DIV
     Caution: any script is executed each time the page is displayed (cached or new)
              so this is not a good place to bind events
-->
<div data-role="page" id="example_page_one" data-theme="b" data-content-theme="b">

    <div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
    </div>

    <style type="text/css">
        .example1 {color: red;}
    </style>

    <p>This is the content for <span class="example1">example page one</span>!</p>

    <p>A link to <a href="#example_page_two">example page two</a></p>

    <p>A link to <a href="#example_page_three">example page three</a></p>

    <div style="float:left" data-role="fieldcontain">
    <label for="slider-fill_page1">Input slider:</label>
    <input type="range" name="slider-fill_page1" id="slider-fill_page1" min="0" max="100" data-highlight="true" />
    </div>

    <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
    </div>

    <script>
        console.log('script in the content area of #example_page_one');
        /*
        Strange Behavior Note:
          js code placed here will get executed:
          -- JUST ONCE if this is the very first page that is loaded and never again when returning to this page
          -- EVERY TIME this page is displayed if this page was NOT the very first page that was loaded
        */
        // .. do stuff here
    </script>


</div>


<div data-role="page" id="example_page_two" data-theme="b" data-content-theme="b">

    <div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
    </div>

    <!-- note that the example1 css style does not exist in this page because it was defined in
         the page content area for example page 1. -->

    <p>This is the content for <span class="example1">example page two</span>!</p>

    <p>A link to <a href="#example_page_one">example page one</a></p>

    <p>A link to <a href="#example_page_three">example page three</a></p>

    <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
    </div>

    <script>
        console.log('script in the content area of #example_page_two');
        // .. do stuff here
    </script>


</div>


<div data-role="page" id="example_page_three" data-theme="b" data-content-theme="b">

    <div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
    </div>


    <!-- note that the example1 css style does not exist in this page because it was defined in
         the page content area for example page 1. -->

    <p>This is the content for <span class="example1">example page three</span>!</p>

    <p>A link to <a href="#example_page_one">example page one</a></p>

    <p>A link to <a href="#example_page_two">example page two</a></p>

    <div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
    </div>

    <script>
        console.log('script in the content area of #example_page_three');
        // .. do stuff here
    </script>


</div>

 </body>
</html>