Web Analytics Made Easy -
StatCounter Previous-Next Buttons for an iframe - CodingForum

Announcement

Collapse
No announcement yet.

Previous-Next Buttons for an iframe

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    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.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      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; Aug 18, 2011, 10:47 PM.

      Comment


      • #4
        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.
        Be yourself. No one else is as qualified.

        Comment


        • #5
          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!

          Comment

          Working...
          X