2011-03-08 45 views
0

我對JavaScript的瞭解很基本,所以解決方案在這裏很明顯。我一直試圖將wmode =「opaque」添加到Flash元素,特別是Tumblr渲染的音頻播放器。我有一個固定的頭文件,在Windows和Linux上滾動的Flash元素重疊。 Javascript由主題設計師提供,他在自己的主題中使用了相同的黑客技巧。用Tumblr中的簡單替換添加WMode =「Opaque」

任何幫助將非常感激。我對這件事忍無可忍。

<!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:[email protected]?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> 

回答

1

我花了很多小時來親自摸清這一塊,現在還不是100%。即便如此,我會分享我所知道的。

我即將在envato市場發佈此主題Essentia,並希望將音頻播放器從默認矩形欄更改爲類似圓形按鈕的內容。閒逛,我發現下面的代碼工作得很好(這看起來非常相似,你的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); 
} 

你只找到這段代碼工作當在Tumblr語法中使用{AudioPlayerWhite}時 - 不要問我爲什麼,但我花了很多小時試圖修復它無濟於事。

還是讓我知道,如果它可以幫助:)

+0

啊,非常感謝。我以爲我失去了理智。我做了一些調整,切換到白色音頻播放器,並且(據我所知),它似乎正在工作。 – Andrew 2011-03-08 23:49:03

+0

很酷,很高興我可以幫助:) – 2011-03-09 01:21:06

0

我嘗試過很多辦法也一樣,然後我在這個特定的順序鏈接在一起的方法。這似乎解決了問題

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