Adding WMode="Opaque" with a Simple Replace in Tumblr
My knowledge of Javascript is pretty basic, so maybe the solution is obvious here. I've been trying to add wmode="opaque" to the Flash elements, specifically the audio players, rendered by Tumblr. I have a fixed header and the Flash elements overlap on scroll on Windows and Linux. The Javascript was supplied by a theme designer who is using the same hack in his own theme.
Any help would be very much appreciated. I'm at the end of my patience on this one.
<!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&f=/_media/sp/sp-player-tumblr.js&expsec=86400&ver=11&bgcolor=#000000&clicktext=ACTIVATE%20PLAYLIST&clickimg=true&showpop=false&progresscolor=FFFFFF&progressbackcolor=FFFFFF&showplaylistbutton=false&drawersize=0&showvolumebutton=false&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}">« Go Back</a>{/block:PreviousPage}
{block:NextPage}
<span class="next_page"><a href="{NextPage}"> Onward »</a></span>
</div>
</div>
{/block:NextPage}
{/block:Pagination}
{/block:IndexPage}
</body>
</html>
I spent many an hour figuring this one myself, and it's still not a 100%. Even so, I'll share what I know.
I'm about to release this theme, Essentia, on the envato marketplace and wanted to change the audio player from the default rectangular bar to something that resembles a circular button. Poking around, I found that the following code works quite well (which looks quite similar to your jquery code when I think about it):
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);
}
BUT
You'll only find this code working when using {AudioPlayerWhite} in the Tumblr syntax - Don't ask me why, but I've spent many hour trying to fix it to no avail.
Lemme know if it helps :)
I tried many ways too, then I chained methods together in this particular order. This seems to fix the issue
$('embed')
.css('display','none')
.attr('wmode', 'transparent')
.css('display','block');
加载中,请稍侯......
精彩评论