0

example3 Hi,

I have been sitting with this problems for days, I'm not very good with javascript as I am still learning, would really appriciate it if someone could help me.

I've got a slidedeck with a number counter which works perfect together, now I'm trying to add another slidedeck without a counter but with the same navigation buttons. with the code I have at the moment it only slides the first slidedeck and not both with the counter.

Can someone please look at my code and help me.

HTML

<div id="slidedeck_slide_number" class="lato">

                    </div>

                    <div id="principles_slidedeck_frame2">

                        <dl class="slidedeck arno">
                            <dt>Entrepreneurs</dt>
                            <dd>Efficient and Effective delivery of Interactive Documents to mobile phones</dd>
                            <dt>Entrepreneurship</dt>
                            <dd>Entrepreneurship is Management</dd>
                            <dt>Validated</dt>
                            <dd>Validated Learning</dd>
                            <dt>Innovation</dt>
                            <dd>Innovation Accounting</dd>

                        </dl>


                    <div id="principles_slidedeck_frame">

                        <dl class="slidedeck arno">
                            <dt>Entrepreneurs</dt>
                            <dd>Efficient and Effective delivery of Interactive Documents to mobile phones</dd>
                            <dt>Entrepreneurship</dt>
                            <dd>Entrepreneurship is Management</dd>
                            <dt>Validated</dt>
                            <dd>Validated Learning</dd>
                            <dt>Innovation</dt>
                            <dd>Innovation Accounting</dd>

                        </dl>



                        <div class="slidedeckNav" style="display: none;">
                            <a class="nav prev" href="#prev">Prev</a>
                            <a class="nav next" href="#next">Next</a>
                        </div>
                        </div>

Javascript

<script type="text/javascript">
                     /*
     * Navigation for the Principles SlideDeck.
     * This function binds the prev/next commands 
     * to the buttons below the deck.
     */
    var principlesDeckElem = $('#principles_slidedeck_frame dl')[0];
    $('#principles_slidedeck_frame .slidedeckNav a').bind('click', function(event){
        event.preventDefault();
        if( this.href.split("#")[1] == 'prev' ){
            if( deckCurrentNumber > 1 ){
                principlesDeckDirection = 'backward';
                principlesDeck.prev();
            }
        }else if( this.href.split("#")[1] == "next" ){
            if( deckCurrentNumber < principlesDeck.slides.length ) {
                principlesDeckDirection = 'forward';
                principlesDeck.next();
            }
        }
    });

    var principlesDeck2Elem = $('#principles_slidedeck_frame2 dl')[0];
    $('#principles_slidedeck_frame2 .slidedeckNav a').bind('click', function(event){
        event.preventDefault();
        if( this.href.split("#")[1] == 'prev' ){
            if( deckCurrentNumber2 > 1 ){
                principlesDeck2Direction = 'backward';
                principlesDeck2.prev();
            }
        }else if( this.href.split("#")[1] == "next" ){
            if( deckCurrentNumber2 < principlesDeck2.slides.length ) {
                principlesDeck2Direction = 'forward';
                principlesDeck2.next();
            }
        }
    });

    /*
     * Setup the numbering for the SlideDeck.
     * This function generates some spans that populate 
     * the circular number so they can be faded in/out.
     */
    $('.slidedeckNav').show();
    if( $('#slidedeck_slide_number').length ){
        $('#principles_slidedeck_frame dl.slidedeck dd').each(function(i){
            $('#slidedeck_slide_number').append('<div class="number-'+(i+1)+'" style="display: none;">'+(i+1)+'</div>')
        });
        $('#slidedeck_slide_number div:eq(0)').show();
        $('#principles_slidedeck_frame .slidedeckNav a.prev').addClass("disabled");
    }

    $('.slidedeckNav').show();
    if( $('#slidedeck_slide_number').length ){
        $('#principles_slidedeck_frame2 dl.slidedeck dd').each(function(i){
            $('#slidedeck_slide_number').append('<div class="number-'+(i+1)+'" style="display: none;">'+(i+1)+'</div>')
        });
        $('#slidedeck_slide_number div:eq(0)').show();
        $('#principles_slidedeck_frame2 .slidedeckNav a.prev').addClass("disabled");
    }

                        var principlesDeck = $('#principles_slidedeck_frame dl').slidedeck({
                            hideSpines: true,
                            scroll: false,
                            keys: false,
                            speed: 250,

                            before: function(deck){
                                $('#slidedeck_slide_number div').fadeOut();
                                if( principlesDeckDirection == 'forward' ){
                                    deckCurrentNumber = (deck.current + 1);
                                    $('#slidedeck_slide_number .number-' + deckCurrentNumber).fadeIn();
                                }else{
                                    deckCurrentNumber = (deck.current - 1);
                                    $('#slidedeck_slide_number .number-' + deckCurrentNumber).fadeIn();
                                }
                            },
                            complete: function(deck){
                                $('#principles_slidedeck_frame .slidedeckNav a').removeClass("disabled");
                                if( deck.current == deck.slides.length ){
                                    $('#principles_slidedeck_frame .slidedeckNav a.next').addClass("disabled");
                                }
                                if( deck.current == 1 ){
                                    $('#principles_slidedeck_frame .slidedeckNav a.prev').addClass("disabled");
                                }
                            }
                        });


                        var principlesDeck2 = $('#principles_slidedeck_frame2 dl').slidedeck({
                            hideSpines: true,
                            scroll: false,
                            keys: false,
                            speed: 250,

                            before: function(deck2){
                                $('#slidedeck_slide_number div').fadeOut();
                                if( principlesDeck2Direction == 'forward' ){
                                    deckCurrentNumber2 = (deck2.current + 1);
                                    $('#slidedeck_slide_number .number-' + deckCurrentNumber2).fadeIn();
                                }else{
                                    deckCurrentNumber2 = (deck2.current - 1);
                                    $('#slidedeck_slide_number .number-' + deckCurrentNumber2).fadeIn();
                                }
                            },
                            complete: function(deck2){
                                $('#principles_slidedeck_frame2 .slidedeckNav a').removeClass("disabled");
                                if( deck2.current == deck2.slides.length ){
                                    $('#principles_slidedeck_frame2 .slidedeckNav a.next').addClass("disabled");
                                }
                                if( deck2.current == 1 ){
                                    $('#principles_slidedeck_frame2 .slidedeckNav a.prev').addClass("disabled");
                                }
                            }
                        });
                    </script>

Edited by Annuscha: attached example

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Airshow
0

HTML tags are out of balance. 4 divs opened, only 3 closed.

Also, the javascript expects one slidedeckNav per slidedeck_frame but in the HTML there is only one slidedeckNav in total.

You need to sort out the HTML before anyone can help with the javascript.

Edited by Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.