lrullo/soundmap_theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
master
soundmap_theme/carnaval/soundmanagerv297a-20130101/doc/generated/demo/flashblock/flashblock.html

212 lines
12 KiB
HTML
Raw Permalink Normal View History

Theme for worpdress 4.6.1
2016-11-29 01:18:17 +01:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>flashblock.css</title>
<meta name="robots" content="noindex" />
<link rel="stylesheet" href="http://jashkenas.github.com/docco/resources/docco.css">
</head>
<body>
<div id='container'>
<div id="background"></div>
<div id="jump_to">
Jump To &hellip;
<div id="jump_wrapper">
<div id="jump_page">
<a class="source" href="../360-player/script/360player.html">360player.js</a>
<a class="source" href="flashblock.html">flashblock.css</a>
<a class="source" href="../mp3-player-button/script/mp3-player-button.html">mp3-player-button.js</a>
<a class="source" href="../mpc/script/mpc.html">mpc.js</a>
<a class="source" href="../page-player/script/page-player.html">page-player.js</a>
<a class="source" href="../play-mp3-links/script/inlineplayer.html">inlineplayer.js</a>
<a class="source" href="../../script/soundmanager2.html">soundmanager2.js</a>
<a class="source" href="../../src/SoundManager2.html">SoundManager2.as</a>
<a class="source" href="../../src/SoundManager2_AS3.html">SoundManager2_AS3.as</a>
<a class="source" href="../../src/SoundManager2_SMSound_AS3.html">SoundManager2_SMSound_AS3.as</a>
</div>
</div>
</div>
<table cellspacing=0 cellpadding=0>
<thead>
<tr>
<th class=docs><h1>flashblock.css</h1></th>
<th class=code></th>
</tr>
</thead>
<tbody>
<tr id='section-SoundManager_2_+_useFlashBlock'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-SoundManager_2_+_useFlashBlock">&#182;</a>
</div>
<h2>SoundManager 2 + useFlashBlock</h2>
<p>Flash positioning and flashblock / clicktoflash handling</p>
</td>
<td class=code>
<div class='highlight'><pre><span class="nf">#sm2-container</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-2'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>where the SM2 flash movie goes. by default, relative container.
set relative or absolute here, and don&rsquo;t touch it later or bad things will happen (see below comments.)</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
<span class="c">/* screw IE 6, just make it display nice */</span>
<span class="n">_overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-3'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<p>the actual SWF movie bit.
important: The SWF needs to be able to be moved off-screen without display: or position: changes.
changing display: or position: or overflow: here or on parent can cause SWF reload or other weird issues after unblock
e.g., SM2 starts but strange errors, no whileplaying() etc.</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="c">/* some flash blockers may also respect this rule */</span>
<span class="k">max-width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="k">max-height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="p">{</span>
<span class="c">/* expand to show the timed-out SWF content */</span>
<span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_timedout</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-4'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
<p>when SM2 didn&rsquo;t start normally, time-out case. flash blocked, missing SWF, no flash?
48px square flash placeholder is typically used by blockers.</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">min-width</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="k">min-height</span><span class="o">:</span> <span class="m">48px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="p">{</span>
<span class="c">/* SWF unblocked, or was never blocked to begin with; try to collapse container as much as possible. */</span>
<span class="k">width</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_loaded</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_loaded</span> <span class="nt">embed</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span>
<span class="c">/* hide flash off-screen (relative to container) when it has loaded OK */</span>
<span class="k">left</span><span class="o">:</span> <span class="m">-9999em</span><span class="p">;</span>
<span class="k">top</span><span class="o">:</span> <span class="m">-9999em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.swf_error</span> <span class="p">{</span>
<span class="c">/* when there is a fatal error (flash loaded, but SM2 failed) */</span>
<span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_timeout</span> <span class="p">{</span>
<span class="c">/* &quot;high performance&quot; case: keep on-screen at all times */</span>
<span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
<span class="k">position</span><span class="o">:</span> <span class="k">fixed</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance</span> <span class="p">{</span>
<span class="k">overflow</span><span class="o">:</span> <span class="k">hidden</span><span class="p">;</span>
<span class="n">_top</span><span class="o">:</span> <span class="m">-9999px</span><span class="p">;</span> <span class="c">/* IE 6 hax, no position:fixed */</span>
<span class="n">_left</span><span class="o">:</span> <span class="m">-9999px</span><span class="p">;</span>
<span class="k">bottom</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
<span class="k">left</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span></pre></div>
</td>
</tr>
<tr id='section-5'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
<p>special case: show at first with w/h, hide when unblocked.
might be bad/annoying.
try to stay within ClickToFlash &ldquo;invisible&rdquo; limits (so it won&rsquo;t be blocked.)</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">z-index</span><span class="o">:</span> <span class="m">99</span><span class="p">;</span> <span class="c">/* try to stay on top */</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="p">{</span>
<span class="k">z-index</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span></pre></div>
</td>
</tr>
<tr id='section-6'>
<td class=docs>
<div class="pilwrap">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>8x8px is required minimum to load in fx/win32 in some cases(?)
6x6+ good for fast performance, even better when on-screen via position:fixed
also, clickToFlash (Safari &lt;5.1) may auto-load &ldquo;invisible&rdquo; SWFs at this size</p>
</td>
<td class=code>
<div class='highlight'><pre> <span class="k">height</span><span class="o">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="p">{</span>
<span class="c">/* stay bottom/left */</span>
<span class="k">top</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="k">bottom</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
<span class="k">left</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_loaded</span> <span class="nt">embed</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">object</span><span class="o">,</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_unblocked</span> <span class="nt">embed</span> <span class="p">{</span>
<span class="c">/* high-performance case must stay on-screen */</span>
<span class="k">left</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="k">top</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
<span class="p">}</span>
<span class="nf">#sm2-container</span><span class="nc">.high_performance.swf_timedout</span> <span class="p">{</span>
<span class="k">z-index</span><span class="o">:</span> <span class="m">99</span><span class="p">;</span> <span class="c">/* try to stay on top */</span>
<span class="p">}</span></pre></div>
</td>
</tr>
</table>
</div>
</body>
Reference in New Issue Copy Permalink