Question

I am using supersized jQuery slider plugin which change one on clicking NAV anchor

supersize jQuery Plugin:::::::::>

    <script type="text/javascript">
        jQuery(function($){
            $.supersized({
                // Functionality
                slide_interval      :   8000,       // Length between transitions
                transition          :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed    :   1300,       // Speed of transition
                // Components                           
                slide_links         :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides              :   [           // Slideshow Images
                                                    {image : './lib/images/photos/image1.jpg'},
                                                    {image : './lib/images/photos/image2.jpg'},
                                                    {image : './lib/images/photos/image3.jpg'},
                                                    {image : './lib/images/photos/image4.jpg'}
                                            ],

                bullet: "bullet",
                bullet_active: "active",
                bullet_main: "bullet-main",
                bullet_main_active: "active",
                bullet_main_second: "bullet-main-second1",
                bullet_main_second_active: "active2"
            });
        });
    </script>

bullet_main_second_active: "active2" is ACTIVE ANCHOR.

Now Problem is CUFON's not working in after transition.. There is a bug... its not deactive previous anchor. after hover on previous anchor it change the color to default... slider plugin working fine on default font family.... its cufon bug

<script type="text/javascript">  
    Cufon('.block-right a h1');
    Cufon.replace('#nav li a');
    Cufon.replace('#rightcaption a', {
        hover: {
            color: '#f04037'
        }
        });
        Cufon.replace('ul.tabNavigation li a', {
        hover: {
            color: '#FFF'
        }
        });
</script>

CSS:::::::::::::>

#rightcaption {
    float:right;
    padding-top:25%;
    font-size:14px;
    color:#b5b5b5;
    margin-right:40px;}
#rightcaption a {
    background:url(../images/bullet1.png) no-repeat right 8px;
    height:8px;
    color:#b5b5b5;
    font-size:14px;
    margin:0 0 5px 0;
    padding:4px 40px 13px 13px;
    display:block;
    text-align:right;}
a.active2 {
    background:url(../images/bullet2.png) no-repeat right 8px #FFF !important;
    margin:0 20px 5px 0;
    color:#f04037;
    font-size:14px;
    padding:4px 40px 13px 13px !important;
    display:block;}

img:::::::::::::::::> http://i.stack.imgur.com/lyjvw.png

Was it helpful?

Solution

If I really understood your question then I would say that cuffon has a method that has to be used/called to take effect after any element has been changed (after any transition) and I think you are missing that, so you can call that after your transition has been completed

Cufon.refresh(); //Refresh elements that are using coffon font to apply new style

I think, somehow you have to invoke a callback function after each transition. Here is an answer on SO about cuffon and here is an answer on SO about supersized (answered by the author of the plugin), these could be helpful.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top