CODEWITHSUNDEEP
jqueryhtmljquery-mobileslider
Sidharth
Sidharth

Reputation: 35

Jquery Mobile slider not working JQM 1.3.2 and Jquery 1.10.2

I am working with Jquery Mobile for the first time to design a mobile web application. The application has one page which has header and navigation bar which are placed at the fixed position . Onclicking the tabs on the navigation bar the page loads up on the same page below the nav bar within the div which is left blank initially . It seems that on calling new pages on the same page via ajax makes the Jquery mobile effect not work. None of the data-theme, data-role , range and other data-attribute work. I am trying to implement a slider for a page "journal" but it only shows up a text box with a value in it

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

I am using Jquery Mobile 1.3.2 and Jquery 1.10.2 !

Here is the html code for the page. You would see many repetition code coz its not connected to the complete database once I connect it to the database then it wud be little less messy.

  <body>
<link href="css/description.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style (2).css" type="text/css" rel="stylesheet" />
<script src="js/custom.js"></script>
<script src="js/jquery.raty.js"></script>

<script>
$(document).ready(function(e){
    $('#star').raty({
  cancel   : true,
  cancelOff: 'images/cancel-off-big.png',
  cancelOn : 'images/cancel-on-big.png',
  half     : true,
  size     : 30,
  starHalf : 'images/star-half-big.png',
  starOff  : 'images/star-off-big.png',
  starOn   : 'images/star-on-big.png'
});

    $('#add_journal').click(function(e) {
        $('#add_journal').hide();
        $('#journal_content').show();
    });
    });



</script>

<style>
#journal_content
{
    display:none;
}

</style>



<div data-role="content" data-theme="a">

    <div style="text-align:center; margin:10px; margin-bottom:10px;">
        <a href="#" data-role="button" id="add_journal" style="text-decoration:none; background-color:#67222e; padding:10px; color:#fff;">New Journal Entry</a>
    </div>

    <div id="journal_content">
        <div class="data">
            <h3> My Ratings: </h3>
            <div id="star"></div>
        </div>

        <div class="data">
            <div style="float:left">
                <h3> Tasting Notes: </h3>
            </div>
            <div style="float:right; padding-top:20px;">
                <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
             </div>
             <div style="clear:both" id="notes">

            </div>
       </div>

       <div class="data">
            <h3> Appearance </h3>
            <hr>
            <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Color Match: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>



      <div class="data">
            <h3> Aroma </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Aroma Wheel: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>

        <div class="data">
            <h3> Taste: </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Tasting Wheel: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>
             <hr>
             <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>


           <div class="data">
            <h3> Body/Structure: </h3>
            <hr>

            <div class="data_inside">
                <div style="float:left">
                    <h4> Descriptor Words: </h4>
                </div>
                <div style="float:right; padding-top:20px;">
                    <a href="tasting_notes.php"><img src="images/plus.fw.png" /></a>
                 </div>
                <div style="clear:both" id="notes">

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

                <div style="clear:both" id="notes">

                </div>
             </div>

      </div>








    </div> 





</div>



</body>

Upvotes: 1

Views: 723

Answers (1)

Drew
Drew

Reputation: 4373

I put copies of the mockup files I created out on pastebin for you.

HTML page

sandbox_slider.htm

External Javascript

sandbox_slider.js

Upvotes: 1

Related Questions