Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jan 2012
    Posts
    7
    Member #
    30530

    I have many slides but got problem can't find the current number of slide!
    How to show current slide number? ex: ( 3 of 8 )
    Thanks for any idea!

    Here code:

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 560;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
    'float' : 'left',
    'width' : slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
    'marginLeft' : slideWidth*(-currentPosition)
    });
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    }

    var CurrenPageId = document.getElementById("CurrenPageId");
    CurrenPageId.innerHTML = "Page" + ??? + " ";
    });
    </script>

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Add 1 to position. That's your current slide.
    numberOfSlides is your number of slides.

    You'll need to add some jQuery from there and probably a line of HTML so that you can insert position and number of slides.
    Lee Kimhuy likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Jan 2012
    Posts
    7
    Member #
    30530

    Hmm...I'm always update with new more slides

    is this? but it is count total pages manaully...

    var TotalPages = 8;
    var CurrenPage = 1;

    var CurrenPageId = document.getElementById("CurrenPageId");
    CurrenPageId.innerHTML = "Page" + CurrenPage + " of 8";

    <span id="CurrenPageId">Page 1 of 8</span>

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    CurrenPageId.innerHTML = "Page" + eval (position + 1) + " of " + numberOfSlides;

    Try that instead.
    Lee Kimhuy likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Jan 2012
    Posts
    7
    Member #
    30530
    Thanks Bro!!
    But it's still do nothing....

    here:
    http://jsfiddle.net/VbHEB/18/

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    It's all in where you put it, buddy.
    Code:
    // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls(position){
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
        //This is I want to show the Current Page Number (ex: page 3 of 8).  This has to stay in the manageControls function or it won't get called.
        var CurrenPageId = document.getElementById("CurrenPageId");
        CurrenPageId.innerHTML = "Page " + eval (position + 1) + " of " + numberOfSlides;
      }
    That's directly from your jsfiddle.net page. You have to make it part of the manageControls function because it's called every time the siider is activated.

    Now...there is a more efficient way to do those last two lines using jQuery, but I'll leave that for homework for you.
    Lee Kimhuy likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Jan 2012
    Posts
    7
    Member #
    30530
    Ohhh now it work perfectly with this:

    Those two lines I'm get #CurrenPageId and update its innerHTML, just move into the "manageControls" function.
    here:
    http://jsfiddle.net/VbHEB/20/

    haha


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com