I have a page within jQuery mobile that I have some customized css within the page itself however when I call this page via ajax it doesn't load with the custom css. However if I refresh the page the page loads with the custom css. How can I stop this from happening as I only want the custom css to show when the page is called. My code is below:\[code\]<!doctype html><html lang="en"><head> <title>Player</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <style> #navgroup {text-align:center;} #navgroup div {display:inline-block;} .containing-element .ui-slider-switch { width: 100%; } input.ui-slider-input {display: none;} .slider-shit .ui-btn { margin-left: -15px; margin-top: -15px; } .slider-shit .ui-slider { width: 100%; top: 3px; margin: 0; opacity: 1; } .slider-shit { padding: 0 20px 0 0; } .ui-slider div { margin: 0 15px 0 38px !important; } .ui-slider div div { margin: 0 !important; } #posSlider { display: none; } #nextSong { border-right-width: 1px !important; border-bottom-right-radius: inherit; border-top-right-radius: inherit; } #songOptionsButton { position: absolute; bottom: 10px; right: 10px; border-left-width: 1px !important; border-bottom-left-radius: inherit; border-top-left-radius: inherit; } .ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner { padding: 37px 20px 0.5em; } </style></head><body> <!--Player for indivdual and playlist songs--> <div data-role="page" data-add-back-btn="true" id="player"> <div data-role="header" data-position="fixed"> <h1 id="songName">Nothing Playing...</h1> <a href="http://stackoverflow.com/questions/15732940/#" id="favourite" data-role="button" data-icon="star" data-iconpos="notext" class="ui-btn-right">mark as favourite</a> </div> <div data-role="content" style="height: 100%;" id="songPicture"> </div> <div data-role="footer" data-position="fixed"> <table style="margin-left: 5px; margin-right: 5px;"> <tr> <td><p id="songCurrentpos">0:00</p></td> <td width="100%" class="slider-shit"><input type="range" name="slider" id="posSlider" value="http://stackoverflow.com/questions/15732940/0" min="0" max="100" width="100%" data-theme="d" data-highlight="true"/></td> <td><p id="songDuration">0:00</p></td> </tr> </table> <div id="navgroup"> <div data-role="controlgroup" data-type="horizontal"> <a data-role="button" data-iconpos="top" data-icon="back" id="previousSong" data-inline="true">Previous</a> <a data-role="button" data-iconpos="top" data-icon="arrow-r" id="playSong" data-inline="true">Play</a> <a data-role="button" data-iconpos="top" data-icon="forward" id="nextSong" data-inline="true">Next</a> <a href="http://stackoverflow.com/questions/15732940/#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true"> </a> </div> </div> </div> </div></body>\[/code\]
jQuery Mobile CSS issues
- Thread starter 7331
- Start date