Question

Мои знания Javascript довольно просты, поэтому, возможно, решение здесь очевидно. Я пытался добавить wmode = "opaque" к элементам Flash, в частности к аудиоплеерам, созданным Tumblr. У меня есть фиксированный заголовок и элементы Flash перекрываются при прокрутке в Windows и Linux. Javascript был предоставлен дизайнером тем, который использует тот же хак в своей собственной теме.

Любая помощь будет очень признательна. На этом я теряю терпение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <title>Escapology</title>
   <meta name="Robots" content="index,follow" /> 
   <meta name="description" content="This be a webjournalblog dedicated to experimental post-noise-ambivalent-pseudo-classical rock everywhere." /> 
  <link rel="shortcut icon" href="http://static.tumblr.com/txv6iau/xVhlhbgf4/favicon.ico"/>

<meta http-equiv="X-UA-Compatible" content="IE=8" />

  <!--Designed by Andrew West (theandrewwest.com) -->  

        <style type="text/css">


             /*-------RESET-------*/
             html, body, div, span, applet, object, iframe,
             h1, h2, h4, h5, h6, pre,
             a, abbr, acronym, address, big, blockquote, cite, code,
             del, dfn, em, font, img, ins, kbd, q, s, samp,
             small, strike, strong, sub, sup, tt, var,
             dl, dt, dd, fieldset, form, label, legend,
             table, caption, tbody, tfoot, thead, tr, th, td {
             margin: 0;
             padding: 0;
             border: 0;
             outline: 0;
             font-weight: inherit;
             font-style: inherit;
             font-size: 100%;
             font-family: inherit;

             }

             /* remember to define focus styles! */
             :focus {
              outline: 0;

             }

             /* tables still need 'cellspacing="0"' in the markup */
             table {
             border-collapse: separate;
             border-spacing: 0;

             }

             caption, th, td {
             text-align: left;
             font-weight: normal;

             }

             blockquote:before, blockquote:after,
             q:before, q:after {
             content: "";

             }

             blockquote, q {
             quotes: "" "";

             }

            /* GENERAL*/
            body {
            font-size: 11px;
            font-family: Helvetica, Arial, sans-serif;
            text-align: center;
            background: #FFF;

            }

             #content {
            margin: 180px 0 0;
            padding: 0 0 10px 0;
            width: 960px;
            text-align: left;
            /*background: url("http://static.tumblr.com/txv6iau/sA5lgb8lj/16_col.gif"); 
            background-position: center top;*/
            position: relative;
            z-index: 1;

            }

            h3 {
            font-size: 11px;
            font-family: Courier New, monospace;
            font-weight: bold;
            padding: 0;
            margin: 1.6364em 0 0;
            line-height: 1.8em;

            }

            a {
            color: #000;
            font-weight: normal;

            }

            a:hover {

            }

            P {
            font-size: 1em;
            margin: 0 0 1.8em;
            line-height: 1.8em;

            }

           /*-------NAVBAR-------*/

           #headerbox {
           position: fixed;
           font-family: Courier New, monospace;
           color: #FFF;
           background: #000;
           font-size: inherit;
           margin: 0;
           padding: 0;
           width: 100%;
           height: 119px;
           top: 0;
           z-index: 5;

           }

           #navbar {
           position: relative;
           font-family: Courier New, monospace;
           color: #FFF;
           background: #000;
           font-size: inherit;
           margin: 0 10px 28px 10px;
           padding: 0;
           width: 940px;
           height: 119px;
           z-index: 5;

           }

           #navbar a {
           text-decoration: none;

           } 

           #navbar hr {
           display: block; 
           clear: left; 
           margin: -0.66em 0 0;
           visibility: hidden;

           }

           h1 {
           background: #000;
           position: relative;
           width: 200px;
           z-index: 5;

           }

           h1 img {
           margin: 0;
           padding: 34px 20px 10px 20px;
           width: 160px;
           float: left;

           }

           ul#menu {
           width: 780px;
           padding: 0;
           margin:  0 0 0 220px;

           }

           #menu li {
           border-left: 1px dotted #FFF;
           float: left;
           list-style-type: none;
           margin: 9px 0 0;         
           width: 239px;
           padding: 0;
           height: 119px;

           }

           #menu .link {
           color: #FFF;
           text-transform: uppercase;
           text-decoration: underline;
           float: left;
           display: block;
           line-height: 1.5em;
           margin: 0 0 10px 20px;
           clear: both;
           text-align: left;
           font-weight: bold;

           }

           #menu .link:hover {
           text-decoration: none;

           }

           #menu .summary {
           font-family: Helvetica, Arial, sans-serif;
           text-align: left;
           display: block;
           float: left;
           width: 160px;
           padding: 0;
           margin: 0 100px 0 20px;
           color: #FFF;
           line-height: 1.5em;
           font-size: 11px;

           }

           /*-------SIDEBAR-------*/

           #sidebar {
           text-transform: uppercase;
           float: right;
           width: 220px;
           margin: 0 0 0 20px;

           }

           #rightsidebar {
           text-transform: uppercase;
           float: right;
           width: 220px;
           margin: 0 10px 0 20px;

           }

           #sidebar h3, #rightsidebar h3 {
           border-bottom: 1px dotted #000; 
           line-height: 1.8em; 
           padding-bottom: .2em;

           }

           #sidebar p, #rightsidebar p {
           text-transform: none;
           margin-top: 12px;

           }

           #sidebar a, #rightsidebar a {
           font-weight: normal;

           }

            #sidebar a:hover, #rightsidebar a:hover {

           }

           #sidebar ul, #rightsidebar ul {
           margin: 12px 0 0;
           padding: 0;
           list-style: none;

           }

           #sidebar li, #rightsidebar li {
           margin: 0 0 9px;
           padding: 0;

           }

           #sidebar ul a {

           }

           #sidebar #text {
           font-size: 12px;
           padding: 0 0 3px 20px;
           margin: 9px 0 36px;
           width: 190px;
           border: 0;
           background: url("http://static.tumblr.com/txv6iau/Svwla0rks/magnifier.gif") no-repeat;

           }

           #sidebar #leftlinks {
           float: left;

           }

           #sidebar #rightlinks {
           float: left;
           margin-left: 30px;

           }

           /*-------POSTINFO-------*/
           .postinfo {
           font-size: 11px;
           font-family: Courier New, monospace;
           border-bottom: 1px dotted #000;
           margin: 1.6364em 0 0;
           line-height: 1.8em;
           text-transform: uppercase;

           }

           .postinfo a {
           font-weight: bold;

           }

           .postinfo hr {
           display: block; 
           clear: left; 
           margin: -0.66em 0 0;
           visibility: hidden;

           }

           .leftinfo {
           float: left;
           width: 220px;

           }

           .rightinfo {
           float: right;

           }

           /*-------POSTS-------*/
           #posts {
           margin: 0 0 0 10px;
           padding: 0;
           width: 460px;

           }

           #posts h3 {
           font-weight: bold;
           text-transform: uppercase;
           font-size: 12px;

           }

           li.text, li.photo, li.photoset, li.audio, li.chat, li.quote, li.link, li.video, li.reblog {
           margin: 12px 0 108px;
           list-style: none;
           width: 460px;
           line-height: 18px;
           list-style: none;

           }

           #posts .photo .caption, #posts .audio .caption, #posts .video .caption, #posts .quote .source  {
           margin-top: 18px;

           }

           #posts h3 a {
           font-weight: bold;
           text-decoration: none;

           }

           #posts h3 a:hover {
           text-decoration: underline;

           }

           .media-container {
           position: relative;
           z-index: 1;

           }

           #posts .quote .quotetext {
           font-family: Courier New, monospace;
           font-size: 14px;
           font-weight: normal;
           line-height: 14px;
           text-align: justify;

           }

           .reblog {
           margin-top: -90px;
           margin-bottom: 108px;

           }

           /*TEXT*/
           .text li {
           padding-bottom: 5px;

           }


           .text ul {
           margin-left:0;
           padding-left: 0;
           list-style-type: none;

           }

           blockquote {
           line-height: 18px;
           font-style: italic;
           margin: 10px 0 10px 80px;

           }

           .text ol {
           list-style-type: decimal;

           }

           .text img {
           padding: 0;
           margin: 0 20px 9px 0;
           float: left;
           width: 140px;

           }

           /*AUDIO*/
           .audio {

}

 .audio hr {
           display: block; 
           clear: left; 
           margin: -0.66em 0 0;
           visibility: hidden;

           }

.audio h1 {
    margin:0 auto;
    padding:0 auto;
    width:181px;
    margin-top:17px;
}

.artist {

}

.albumart {
    width:181px;
    height:181px;
    background: #000;

}

.albumart img {
    width:181px;
    height:181px;
    background: #000;

}

.album-container {
float: left;
position: relative;
margin: 0;

}


.playerbox {
height: 27px;
width: 220px;
background: #000;

}

.audioplayer {


}
.right {
float: right;

}

.audio-info {
width: 220px;

}

.audio-info span {
font-weight: bold;

}

.audio-info p {
line-height: 1em;

}

.audio .caption {
width: 220px;

}

           /*CHAT*/
           #posts .chat li {
           margin: 0 0 10px 0;

           }

           #posts .chat .label {
           font-weight: bold;

           }

           /*PHOTO*/
           #posts .photo img {
           width: 460px;

           }

            #posts .proofs .photo img {
           width: 700px !important;

           }          

           /*PHOTOSET*/
           #posts .photoset {

           }

           #posts .photoset .photosetpic {
           margin: 0;
           padding: 0;

           }

           #posts .photoset img {
           width: 460px;
           margin: 0;

           }

           /* ABOUT */
           .about span {
           font-weight: bold;

           }


           /* FOOTER*/
           #footerbox {
           clear: both;
           width: 100%;
           color: #000;
           margin: -30px 0 0;
           padding: 0 0 40px 0;
           text-align: left;

           }

           #footer {
           margin-left: 10px;
           line-height: 1.8em;
           border-top: 1px dotted #000;
           width: 460px;

           }

           #footer a {
           color: #000;
           font-weight: normal;
           text-decoration: none;

           }

           #footer a:hover {
           color: #000;
           text-decoration: underline;

           }      

           #footer .next_page a {
           color: #000;
           float: right;

           }


           #footer .footertext {
           float: right;
           display: block;

           }

            /* STREAMPAD*/
           #player {
           position: fixed !important;
           margin: 0 auto !important;

           }

           div#streampadBottomBar {
           font-family: Courier New, monospace !important;
           width: 100% !important;
           margin: 119px auto;
           top: 0 !important;
           border-top: 1px dotted #FFF;

           }

           #streampadAudioCaption {
           font-family: Courier New, monospace !important;
           font-weight: normal !important;

           }

           #streampadPlayerClickToPlay {
           font-family: Courier, monospace !important;

           }

          div#streampadBottomBar a {
          background-image: none !important;

          }

          #streampadPlayerFullScreenButton, #streampadProfileButton, #streampadAudioPlays, #streampadPlayerBorderNum1, #streampadPlayerBorderNum2, #streampadPlayerBorderNum3 {
          display: none !important;

          }

          /* TUMBLR BUTTONS */
          input img {
          position: fixed !important;

          }


         </style>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5045560-8']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!--[if lte IE 7]>

<style type="text/css">

</style>

<![endif]-->

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
$('.player').each(function() {
 var html = $(this).html();
 var newPlayer = html.replace(/<embed\s/i, "<embed wmode='opaque' ");
 $(this).html(newPlayer);
});
</script> 




<script id=" player" type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&amp;f=/_media/sp/sp-player-tumblr.js&amp;expsec=86400&amp;ver=11&amp;bgcolor=#000000&amp;clicktext=ACTIVATE%20PLAYLIST&amp;clickimg=true&amp;showpop=false&amp;progresscolor=FFFFFF&amp;progressbackcolor=FFFFFF&amp;showplaylistbutton=false&amp;drawersize=0&amp;showvolumebutton=false&amp;btncolor=white-gray"></script>

    </head>  

    <body>

  <div id="headerbox">
        <div id="navbar">

                <h1><a href="/"><img src="http://static.tumblr.com/txv6iau/WyOlh9sa5/escapology.gif" alt="Escapology" /></a></h1>

        <ul id="menu">
        <li><a href="/about"><span class="link">About</span><span class="summary">What is this place and who are these people? Get educated.</span></a></li>
        <li><a href="/rss"><span class="link">Feed</span><span class="summary">Feeling hungry? Or maybe you just can’t be arsed to visit us.</span></a></li>
        <li><a href="/archive"><span class="link">Archive</span><span class="summary">Go ahead and dive into our early work. Before we sold out.</span></a></li>
        </ul>
        <hr />
        </div>
        </div>

        <div id="content">
 {block:IndexPage}<div id="rightsidebar">
 <h3>Hello</h3>
   <p>This be a webjournalblog dedicated to experimental post-noise-ambivalent-pseudo-classical rock everywhere.</p>

   <p>Enjoy. Or leave.</p>

        <h3>Submissions</h3>
<p>Something we should hear? Shoot <a href="mailto:theandrewwest@gmail.com?subject=Check%20This%20Noise">Andrew</a> an email. He's a man of the people.</p>
        </div>

          <div id="sidebar">

          <h3>Writing</h3>
        <ul id="leftcategories">
        <li><a href="/tagged/articles">Articles</a></li>
        <li><a href="/tagged/interviews">Interviews</a></li>
        <li><a href="/tagged/updates">Updates</a></li>
        </ul>

                 <h3>Music</h3>
        <ul id="categories">
        <li><a href="/tagged/ambient">Ambient</a></li>
        <li><a href="/tagged/bass">Bass</a></li>
        <li><a href="/tagged/brass">Brass</a></li>
        <li><a href="/tagged/electronic">Electronic</a></li>
        <li><a href="/tagged/live">Live</a></li>
        <li><a href="/tagged/melancholy">Melancholy</a></li>
        <li><a href="/tagged/minimal">Minimal</a></li>
        <li><a href="/tagged/post rock">Post Rock</a></li>
        <li><a href="/tagged/strings">Strings</a></li>
        <li><a href="/tagged/vocals">Vocals</a></li>

        </ul>


        </div>{/block:IndexPage}

        <ul id="posts">
              {block:Posts}
              {block:IndexPage}<li><div class="postinfo">
         <div class="leftinfo">By <a href="/{PostAuthorTitle}">{PostAuthorTitle}</a> on <a href="{Permalink}">{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a></div><div class="rightinfo">{block:HasTags}Buzzwords: {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
{/block:HasTags}</div>
        <hr />
             </div></li>{/block:IndexPage}

                {block:Text}
                    <li class="text">
                        {block:Title}
                            <h3>{Title}</h3>
                        {/block:Title}

                        <div class="{TagsAsClasses}">{Body}</div>
                        {block:More}
    <a href="{Permalink}">Read On...</a>
{/block:More}
                    </li>
                {/block:Text}

                {block:Photoset}
                <div class="{TagsAsClasses}">
                    <li class="photoset">

                        <script type="text/javascript">
RawPhotosetMaker(
    '{Name}',
    '{PostID}',
    {JSPhotoset-500},
    'caption-before',
    'high-res'
);
</script>
                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                    </div>

                {/block:Photoset}

                           {block:HighRes}
                    <div class="{TagsAsClasses}">
                    <li class="photo">
                        <a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></a>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                    </div>

                {/block:HighRes}


                {block:Quote}
                    <li class="quote">
                        <div class="quotetext">{Quote}</div>

                        {block:Source}
                            <div class="source"><p>- {Source}</p></div>
                        {/block:Source}
                    </li>
                {/block:Quote}

                {block:Link}
                    <li class="link">
                        <h3><a href="{URL}" class="link" {Target}>{Name} »</a></h3>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
                {/block:Link}

                {block:Chat}
                    <li class="chat">
                        {block:Title}
                            <h3>{Title}</h3>
                        {/block:Title}

                        <div class="dialogue">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}

                                    {Line}
                                </li>
                            {/block:Lines}
                        </div>
                    </li>
                {/block:Chat}


               {block:Audio}
                  <li class="audio">


                   {block:AlbumArt}<div class="album-container"><div class="albumart"><img src="{AlbumArtURL}" alt="album art"/></div></div>{/block:AlbumArt}



                  {block:AlbumArt}<div class="right">{/block:AlbumArt}
                      <div class="audio-info">

                     <div class="playerbox">


                  <div class="player">{AudioPlayerBlack}</div>


                  </div>{block:AlbumArt}</div>{/block:AlbumArt}
                                        {block:Caption}
                           <div class="caption">{Caption}</div>
                        {/block:Caption}           

                          </div>
                        <hr></hr>
                        </li>
               {/block:Audio}

                {block:Video}
                    <li class="video">
                      <div class="media-container">{Video-400}</div>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Video}
                <br />
                 {block:RebloggedFrom}<div class="reblog">- via <a href="{ReblogParentURL}">{ReblogParentName}</a></div>{/block:RebloggedFrom}

            {/block:Posts}
        </ul>

        {block:IndexPage}{block:Pagination}
<div id="footerbox"><div id="footer">

{block:PreviousPage}
<a href="{PreviousPage}">&#171; Go Back</a>{/block:PreviousPage}

                 {block:NextPage}
                <span class="next_page"><a href="{NextPage}"> Onward &#187;</a></span>
                </div>
                </div>
            {/block:NextPage}
        {/block:Pagination}
        {/block:IndexPage}


</body>
</html>

Tiny Giant Studios · Answer 1 · 08 марта 2011

Я потратил много часов на то, чтобы разобраться в этом сам, и это все еще не 100%. Тем не менее, я поделюсь тем, что знаю.

Я собираюсь выпустить эту тему, Essentia , на торговой площадке envato и хотел изменить аудиоплеер с прямоугольной панели по умолчанию на нечто, напоминающее круглую кнопку. Оглядываясь, я обнаружил, что следующий код работает довольно хорошо (который, если подумать, очень похож на ваш код jquery):

if(post.hasClass('audio')) {
var parent = post.find('.audio_player');        
var html = parent.html();
var newEmbed = html.replace(/<embed\s/i, "<embed wmode='opaque' ");
parent.html(newEmbed);
}

НО

Этот код работает только при использовании {AudioPlayerWhite} в синтаксисе Tumblr - не спрашивайте меня, почему, но я потратил много часов, пытаясь исправить его безрезультатно.

Дай мне знать, поможет ли это:)

bullzito · Answer 2 · 30 июля 2011

Я тоже пробовал много способов, затем я связал методы вместе в этом конкретном порядке. Кажется, это решает проблему

$('embed')
 .css('display','none')
 .attr('wmode', 'transparent')
 .css('display','block');

Добавление WMode = "Непрозрачный" с простой заменой в Tumblr

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Добавление WMode = "Непрозрачный" с простой заменой в Tumblr

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы