html5 - Jquery Mobile slider not working JQM 1.3.2 and Jquery 1.10.2 -
i working jquery mobile first time design mobile web application. application has 1 page has header , navigation bar placed @ fixed position . onclicking tabs on navigation bar page loads on same page below nav bar within div left blank . seems on calling new pages on same page via ajax makes jquery mobile effect not work. none of data-theme, data-role , range , other data-attribute work. trying implement slider page "journal" shows text box 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 using jquery mobile 1.3.2 , jquery 1.10.2 !
here html code page. see many repetition code coz not connected complete database once connect database wud 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> 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>
i put copies of mockup files created out on pastebin you.
html page
external javascript
Comments
Post a Comment