Is sIFR 3 compatible with the jQuery Cycle Plugin?

Question

I am a newbie and I have been struggling with this for awhile. I am try to create a scrolling div using the jQuery Cycle Plugin with sIFR 3 text within the scrolling div. I can get it to work properly in Firefox and that's about it. Any suggestions or help would be greatly appreciated!

Here's my link: http://dev.bandspecial.com/test.html

jQuery:

$(document).ready(function() {
$('#slideshow').cycle({
 fx: 'scrollLeft',
 cleartypeNoBg:  true
});
});

sIFR:

sIFR.replace(rockwell, {
 selector: 'h1',
      css: [ '.sIFR-root { color:#ffffff; }' ,'a { text-decoration: none }' ,'a:link { color: #E31824 }' ,'a:hover { color: #E31824 }' ], wmode: 'transparent'
    });

Body Code:

<div id="slideshow">
  <div> <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" height="200" width="200">
    <h1>St Andrews State Park - Panama City, FL</h1>
    <p>This park is one of the most popular outdoor recreation spots in Florida. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" height="200" width="200">
    <h1>Located in the Florida panhandle,</h1>
    <p> the 1,260 acre park is situated on a scenic peninsula and is well known for its sugar white sands and brilliant blue water. </p>
  </div>
  <div> <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" height="200" width="200">
    <h1>The ocean provides opportunity for endless fun. </h1>
    <p>From boogie boarding to snorkeling to  swimming and boating, there is always something to do.</p>
  </div>
</div>

Answer 1

If you divs that are hidden that you are trying to scroll to have a display:none; on page load, sifr will not replace that text.

Answer 2

So what is the fix for this? I am in the same jam. after some research I came across a solution which proposes that you set the scrolling divs with the following:

    position: absolute;
    left: -10000px;

even then, it doesnt work for me. here is my ful cod:

div.panes3 div.panel {
    position: absolute;
    left: -10000px; 
}

Answer 3

I use the Innerfade Jquery plugin so the changes may be a little different.

Here is what I did:

Innerfade uses .hide() to hide all items in a list. This is the root of the problem. Solution: instead of having your plugin utilize .hide(), use .addClass("hide") and define the CSS position: absolute; left:-10000px.

Using this method. .removeClass("hide") will make your post appear again. In addition to this, if you are using an effect like fade or slide don't forget to removeClass there as well.

I hope this makes sense. BTW: I am using SIFR 3

Answer 4

I used the jquery cycle option 'after' to call the sIFR function once each transition is completed:

$(document).ready(function(){
    $('#div').cycle({
        fx: 'fade',
        after: function(){
            sIFR.replace(alberta, {
            selector: '.flash-text',
            wmode: 'transparent'
            });
        }
    });
});