0

我目前正在开发一个移动应用程序/网站,我正在使用 jquery 移动框架以及在这里找到的 SC Minimal 自定义播放器:

https://github.com/soundcloud/soundcloud-custom-player/blob/master/examples/sc-player-minimal.html

自定义播放器播放正常,这不是问题,我似乎遇到的问题是它所在的页面似乎将主体更改为某种 iframe,并在屏幕右侧添加了滚动条。这是一个示例页面

http://www.blackburnravers.com/test/media/blackburnravers/blackburnravers_hypedup.html

我的服务器上还安装了最新的 jquery,我似乎在任何地方都找不到任何冲突的东西

这是我正在使用的代码:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blackburn Ravers - Hyped Up Mix</title>
    <link rel="stylesheet" href="../../css/themes/blackburnravers.mob-3.0.0.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
    <link rel="stylesheet" href="../../_assets/css/jqm-brctemplates.css">
    <link rel="shortcut icon" href="../../favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <script src="../../js/jquery.js"></script>
    <script src="../../_assets/js/index.js"></script>
    <script src="../../js/jquery.mobile-1.3.2.min.js"></script>
    <script src="https://w.soundcloud.com/player/api.js"></script>
    <script src="//connect.soundcloud.com/sdk.js"></script>


    <script type="text/javascript" src="../../js/soundcloud.player.api.js"></script>
    <script type="text/javascript" src="../../js/sc-player.js"></script>
    <link rel="stylesheet" href="../../css/sc-player-minimal.css" type="text/css" />
</head>
<body>

<div data-role="page" class="jqm-brctemplates" data-quicklinks="true">

    <div data-role="header" class="jqm-header">
        <h1 class="jqm-logo"><a href="#wedowhatwewant" data-transition="flip" data-inline="true" data-rel="popup" data-position-to="window"><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></a></h1>

        <div data-role="popup" id="wedowhatwewant" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
            <div data-role="content" data-theme="f">
                <center>
                    WE DO WHAT WE WANT!
                </center>
            </div>
        </div>

        <a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
        <a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>

        <div class="jqm-search">
            <ul class="jqm-list">

            </ul>
        </div>

    </div><!-- /header -->

    <div data-role="content" class="jqm-content">

        <h1>Hyped Up Mix</h1>

        <p>
            Re-recording of our set from Hyped up from Friday 14/06/2013.<br />
            Fantastic night and superb bunch down there.
            <p>
                <a href="https://soundcloud.com/blackburnravers/hypedupmix" class="sc-player">Hyped Up Mix</a>
            </p>        
            <br />
            <div data-role="collapsible" data-theme="b" data-content-theme="c">
            <h4>Tracklist</h4>
                    <ol data-role="listview">
                        <li>Scott Brown - All About Elysium (Al Storm Remix)</li>
                        <li>Darren Styles & Squad-E - Party People</li>
                        <li>Asa & S1 Feat. Lou Lou - Makin� Me Wanna Dance (Sy & Unknown Remix)</li>
                        <li>Ben Xtreme & Mc Ortie - Looking Down (Dj Kurt Remix)</li>
                        <li>Darren Styles - Take Me Away</li>
                        <li>Darren Styles - Save Me (Re-Con Remix)</li>
                        <li>Dougal & Gammer Feat. Lisa Abott - Something Good</li>
                        <li>Gusto - Discos Revenge (Breeze's Filthy Hardcore Mix)</li>
                        <li>Joey Riot & Chaos - I Wanna Freak U Bby</li>
                        <li>Paradise - Angel (Sy & Unknown Remix)</li>
                        <li>Re-Con Feat. Sophie may - Dont hold calling back (Azzyd Vox Booty)</li>
                        <li>Anon - How Low (Naughty is Nice Remix)</li>
                        <li>Scott Brown - Rock You Softly (UFO & Supreme Remix)</li>
                        <li>Dj Kurt - Right About Now</li>
                        <li>Starkillers - Discoteka (Dougal & Gammer Remix)</li>
                    </ol>
            </div>
            <br />
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <center><a href="#screenshot" data-rel="popup" data-position-to="window" data-theme="b" data-inline="true" data-transition="fade"><img width="150px" src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix"></a></center>
                    <div data-role="popup" id="screenshot" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
                        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="img_covers/blackburnravers_hypedup_disc.png" alt="Hyped Up Mix">
                    </div>
                </div>
                <div class="ui-block-b">
                    <center><a href="#screenshot2" data-rel="popup" data-position-to="window" data-theme="b" data-inline="true" data-transition="fade"><img width="150px" src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix"></a></center>
                    <div data-role="popup" id="screenshot2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15" >
                        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img src="img_covers/blackburnravers_hypedup_back.png" alt="Hyped Up Mix">
                    </div>
                </div>
            </div><!-- /grid-b -->
            <br />
            <div class="ui-grid-a">
                <div class="ui-block-a"><a href='https://soundcloud.com/blackburnravers/hypedupmix' data-role="button" data-theme="g">SoundCloud</a></div>
                <div class="ui-block-b"><a href="#share-panel" data-role="button" data-theme="a">Share</a></div>
            </div><!-- /grid-b -->
        </p>


    </div><!-- /content -->

    <div data-role="footer" class="jqm-footer">
        <p><span class="copyright">&copy;</span> 2013 The Blackburn Ravers - 
            <a href="#aboutapp" data-transition="fade" data-inline="true" data-rel="popup" data-position-to="window">DJ NJ & Dj Upalnite</a>
            <div data-role="popup" id="aboutapp" data-overlay-theme="f" data-theme="f" data-tolerance="15,15" class="ui-content">
                <div data-role="content" data-theme="f">
                    <center><img src="../../_assets/img/blackburnravers-logo.png" alt="The Blackburn Ravers - DJ NJ & Dj Upalnite"></center>
                    <br />
                    App Version - <i>v3.0.0</i><br />
                    App Creator - <i>Dj Upalnite</i><br />
                    Bugs - <a href="mailto:blackburnravers@gmail.com"><i>Please email us</i></a><br />
                    Website - <a href="http://www.blackburnravers.com" target="_blank"><i>www.blackburnravers.com</i></a><br /><br />
                </div>
            </div>
        </p>
    </div><!-- /footer -->

    <!-- Here are a bunch of panels at the end, just before the close page tag  -->

    <!-- main navigation panel -->
    <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="a">
        <ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">
            <li data-role="list-divider">Main Links</li>
            <li data-filtertext="Home" data-ajax="false"><a href="../../">Home</a></li>
            <li data-filtertext="Media" data-ajax="false"><a href="../../media/">Mixes</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="../../socialnetworks/">Social Sites</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a data-ajax="false" href="../../events/">Events</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="../../contactus/">Contact Us</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="http://www.blackburnravers.com/">Main Website</a></li>

            <li data-role="list-divider">Mix Section</li>
            <li data-filtertext="ajax navigation navigate event method"><a href="./">Blackburn Ravers</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="../djupalnite/">Dj Upalnite</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="../djnj/">DJ NJ</a></li>
            <li data-filtertext="ajax navigation navigate event method"><a href="../madforit/">Mad For It</a></li>

        </ul>
    </div>
    <!-- /main navigation panel -->

    <div data-role="panel" id="share-panel" data-display="reveal" data-position="right" data-theme="a">
        <ul data-role="listview" data-theme="a" data-divider-theme="f" data-icon="false" class="jqm-list">

            <li data-role="list-divider">Share this page</li>
            <li><a href="http://twitter.com/share?text=Hyped%20Up%20Mix&url=https://soundcloud.com/blackburnravers/hypedupmix" onclick="window.open('http://twitter.com/share?text=Hyped%20Up%20Mix&url=https://soundcloud.com/blackburnravers/hypedupmix','twittershare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Twitter</a></li>
            <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://soundcloud.com/blackburnravers/hypedupmix" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=https://soundcloud.com/blackburnravers/hypedupmix','facebookshare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Facebook</a></li>
            <li><a href="https://m.google.com/app/plus/x/?v=compose&content=https://soundcloud.com/blackburnravers/hypedupmix" onclick="window.open('https://m.google.com/app/plus/x/?v=compose&content=https://soundcloud.com/blackburnravers/hypedupmix','gplusshare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Google +</a></li>
            <li><a href="mailto:?subject=I wanted you to listen to this mix&amp;body=Check out this mix https://soundcloud.com/blackburnravers/hypedupmix" title="Share by Email" onclick="window.open('mailto:?subject=I wanted you to listen to this mix&amp;body=Check out this mix https://soundcloud.com/blackburnravers/hypedupmix','email','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;">Email</a></li>
        </ul>
    </div><!-- /panel -->

</div><!-- /page -->
</body>
</html>

有什么我可能错过的吗?希望有人可以帮助我,

谢谢,

布莱克本流浪者队。

4

2 回答 2

0

我正在查看它,然后刷新了页面,似乎代码已更改,所以我认为您正在使用它。我不确定,但在更改之前,我相信 .sc.scrubber div 似乎是问题所在。尝试使用 max-width: 100%(或者我相信是 95%)而不是仅使用 width:100%。

于 2013-08-11T17:39:48.013 回答
0

解决它。出于某种原因,有 2 个“内容”类发生冲突并导致其过度缩放并调整页面大小。我从我的代码中删除了它,它运行良好。

谢谢你花时间帮我看。干杯。布莱克本流浪者队。

于 2013-08-12T02:44:04.213 回答