Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Cool Previous-Next Buttons for an iframe

    I am trying to display testimonials on my website in an iframe. This way I can utilize the scrolling feature if needed and keep the page from changing sizes due to the length of the testimonial. I can also change the testimonials order and content easily.

    I am trying to make a "next" and "previous" button that will sit on the main page (not in the iframe) and cycle through the testimonials. However I am having trouble with this as I am trying to use an array.

    This is my current code for the Next button. The idea is to check to see if the testimonial is on the last document. If so display the first testimonial in the array. "Else" change to the next testimonial in the array.

    Code:
    var myTests=new Array();
    	myTests[0]="test001.html";       
    	myTests[1]="test002.html"; 
    	myTests[2]="test003.html"; 
    var numTests = myTests.length;
    var curTests = 0
    
    function nextTests()
    {
    	if (curTest <= numTests)						
    		document.getElementById("testFrame").src=myTests(1);
    	else
    		document.getElementById("testFrame").src=myTests[0];
    }
    Then I am using a simple button to call the function "onclick"
    Code:
    <button type="button" onclick="nextTests()">next</button>
    PS I am a beginner at this so I apologize if I am making silly mistakes. However, I would really appreciate any direction you can give me! Thanks so much!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No, won't work. You *never* change the value of curTests so you will *always* be loading in myTests[1]. Well, you would be if you used [1] instead of (1). JavaScript uses [n] for array element indexing, square brackets instead of parentheses. (You had it right assigning the elements...need to be consistent.)

    Simple change:
    Code:
    // an easier way to initialize an array
    var myTests=[ "test001.html", "test002.html", "test003.html" ];
    
    var numTests = myTests.length;
    var curTests = 0
    
    function nextTests()
    {
        ++curTests; // add one to the testimonial number
        if ( curTests >= numTests ) curTests = 0; // but if too many, back to zero
        document.getElementById("testFrame").src=myTests[ curTests ]; // put THAT one in place
    }
    NOTE: You might need/want to put the third line of that function first. That is, don't change the curtest number until after it has been displayed. Can't tell without seeing the rest of your page.

    Also: Note that the .length of an array is ONE MORE than it's highest index number. That is, if you have array elements 0,1, and 2, then the length is 3. So your original "if" test was wrong in any case.

  • Users who have thanked Old Pedant for this post:

    Chrys (08-19-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Old Pedant: Thank you so much for the help and mostly thank you for taking the time to explain to me my errors! That is the only way I will learn! I have tried to duplicate the next button to make the previous button, however, it is acting very strange. Once I press the previous button it goes to the next testimonial(+1). Then when I press it again it starts going backwords. VERY STRANGE! Any ideas as to why that is happening?

    Code:
    function prevTests()
    {
    document.getElementById("testFrame").src=myTests[curTests];
    --curTests;
    }
    I also just noticed... If you press the next button it works beautifully. However, if you go to the previous button then hit next... It does the name thing as above. It goes backwords (-1) then when you press next again it starts going forward from there.
    Last edited by Chrys; 08-19-2011 at 02:47 AM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ahh...that's because you need to do the increment/decrement *before* you drop the testimonial in place.

    Let's do it all with one function, anyway.
    Code:
    // an easier way to initialize an array
    var myTests=[ "test001.html", "test002.html", "test003.html" ];
    
    var numTests = myTests.length;
    var curTests = 0; 
    
    function nextTests(direction)
    {
        if ( direction != null ) curTests += direction;    
        curTest = ( curTests + numTests ) % numTests; // this works both directions
        document.getElementById("testFrame").src=myTests[ curTests ]; // put THAT one in place
    }
    Now, you can use something like
    Code:
    <input type="button" value="Next" onclick="nextTests(1);"/>
    <input type="button" value="Previous" onclick="nextTests(-1);"/>
    And to drop the first testimonial in place when the page starts, use nextTests(0) or nextTests() (the check for null will make the call default to zero, so "don't move"). Or you can use
    Code:
        window.onload = nextTests;
    Same thing.

  • Users who have thanked Old Pedant for this post:

    Chrys (08-19-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thank you so much for your reply. It works perfectly!

    I never would have gotten to this on my own... It is back to the tutorials for me! I think I need a better understanding of Javascript!

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •