Jquery Mobile 1.3 customized CSS styling

StackOverflow https://stackoverflow.com/questions/15682193

Question

I am trying to style a page in jquery using CSS but it doesn't seem to work. Currently am using jquery 1.3.0 css however I am unable to align my #navgroup to the centre of the footer and I am also unable to remove the additional counter in white from the slider. 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;
    }
    </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>

Was it helpful?

Solution

This should do it.

Working example: http://jsfiddle.net/Gajotres/YKY3y/

#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;           
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top