Javascript – Calling javascript from sifr replaced anchor tags

flashjavascriptjquerysifrunobtrusive-javascript

I'm using sIFR to replace my navigation text with a new font:

<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">reel</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">archive</a></li>
    <li><a href="#">login</a></li>
</ul>

sIFR.replace(futura, {
    css: [
        '.sIFR-root { background-color:transparent; color: #999999; cursor:pointer; font-size:26px; text-transform:uppercase; }',
        'a { color: #999999; text-decoration:none; }',
        'a:hover { color: #CCCCCC; text-decoration:none; }'
    ],
    fitExactly:true,
    forceClear:true,
    forceSingleLine:true,
    selector: '#navigation ul li',
    transparent:true
});

That works just fine. I'm then trying to add some actions to the navigation using jQuery:

$(document).ready(function(){
    $("#navigation ul li a").click(function(event){
        event.preventDefault();
        alert("nav clicked");
    });
});

These actions don't seem to be working though because the anchor tags are hidden by sIFR when the content is replaced. How does one add some jQuery code to replaced tags? I'd rather not do something like the following (and let javascript be called from Flash) as it sort of defeats the whole purpose of unobtrusive javascript:

<a href="javascript:gotoSection('about');">about</a>

Edit (generated HTML):

<ul>
    <li style="" class="sIFR-replaced"><object width="88" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_0" name="sIFR_replacement_0" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_0&amp;content=%253Ca%2520href%253D%2522/home/about%2522%2520target%253D%2522%2522%253EABOUT%253C/a%253E&amp;width=55&amp;renderheight=37&amp;link=/home/about&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_0_alternate"><a href="/home/about">about</a></span></li>
    <li style="" class="sIFR-replaced"><object width="58" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_1" name="sIFR_replacement_1" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_1&amp;content=%253Ca%2520href%253D%2522/home/reel%2522%2520target%253D%2522%2522%253EREEL%253C/a%253E&amp;width=42&amp;renderheight=37&amp;link=/home/reel&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_1_alternate"><a href="/home/reel">reel</a></span></li>
    <li style="" class="sIFR-replaced"><object width="116" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_2" name="sIFR_replacement_2" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_2&amp;content=%253Ca%2520href%253D%2522/home/contact%2522%2520target%253D%2522%2522%253ECONTACT%253C/a%253E&amp;width=76&amp;renderheight=37&amp;link=/home/contact&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_2_alternate"><a href="/home/contact">contact</a></span></li>
    <li style="" class="sIFR-replaced"><object width="110" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_3" name="sIFR_replacement_3" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_3&amp;content=%253Ca%2520href%253D%2522/archive%2522%2520target%253D%2522%2522%253EARCHIVE%253C/a%253E&amp;width=72&amp;renderheight=37&amp;link=/archive&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_3_alternate"><a href="/archive">archive</a></span></li>
<a href="/archive">    </a><li style="" class="sIFR-replaced"><object width="80" height="37" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_4" name="sIFR_replacement_4" data="/swf/bfuturah.swf" style=""><param name="flashvars" value="id=sIFR_replacement_4&amp;content=%253Ca%2520href%253D%2522/login%2522%2520target%253D%2522%2522%253ELOGIN%253C/a%253E&amp;width=50&amp;renderheight=37&amp;link=/login&amp;target=&amp;size=26&amp;css=.sIFR-root%257Bcolor%253A%2523999999%253B%257Da%257Bcolor%253A%2523999999%253Btext-decoration%253Anone%253B%257Da%253Ahover%257Bcolor%253A%2523CCCCCC%253Btext-decoration%253Anone%253B%257D&amp;cursor=pointer&amp;tunewidth=0&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;fitexactly=true&amp;preventwrap=false&amp;forcesingleline=true&amp;antialiastype=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;flashfilters=&amp;opacity=100&amp;blendmode=&amp;selectable=true&amp;fixhover=true&amp;events=false&amp;delayrun=false&amp;version=436"/><param name="wmode" value="transparent"/><param name="bgcolor" value="transparent"/><param name="allowScriptAccess" value="always"/><param name="quality" value="best"/></object><span class="sIFR-alternate" id="sIFR_replacement_4_alternate"><a href="/login">login</a></span></li>
</ul>

Best Answer

According to 626595 and 801642, the click event doesn't get propagated out. If you're using sIFR 3, there's an onRelease callback you can pass into sIFR.replace(), which gets given a FlashInteractor object. From there you can use getAncestor() to get access to the replaced element.

So, your code will probably look something like the following. (this is untested by me)

sIFR.replace(futura, {
    /* the rest of your replace params */
    selector: '#navigation ul li',
    transparent:true,
    onRelease: function(fi) { liClick( fi.getAncestor() ); }
});

function liClick(li) {
    var $li = $(li),
        $a = $(li).find('a');
    //$li points at a jQuery'd list item
    //$a points at the original anchor
}

Mark Wubben's answer in this forum post was very enlightening for getAncestor and onRelease

Related Topic