CODEWITHSUNDEEP
jquerycssjquery-mobile
Kern Elliott
Kern Elliott

Reputation: 1659

jQuery Mobile CSS issues

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:

<!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="#" 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="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="#songOptionsPage" id="songOptionsButton" data-role="button" data-iconpos="top" data-icon="gear" data-iconpos="notext" data-rel="dialog" data-inline="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 4906

Answers (1)

Gajotres
Gajotres

Reputation: 57309

If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.

You can fix your problem if you load your css inside a first HTML file or move your STYLE block inside a BODY content.

Here's an example how you can include your styles inside a BODY block:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <style>
        #content-test {
            background: red !important;
        }
    </style>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="index3.html#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content" id="content-test">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>  
</body>
</html>

Also, I have described this problem in my other answer with more details and few examples: https://stackoverflow.com/a/15431229/1848600

Upvotes: 1

Related Questions