Clash Royale CLAN TAG#URR8PPP

Next and Previous Page Buttons for iFrame content

I made a website where there are a bunch of links that load into an iframe. There are buttons that allow the user to navigate to the next and previous links in the list. I used this to do that.

var i = 0, links = $('a').toArray();
$('.next').click(function()
i++;
if(i === links.length) i = links.length - 1;
$('.frame').attr('src', links[i]);
);
//loads next link in iframe

$('.prev').click(function()
i--;
if(i < 0) i = 0;
$('.frame').attr('src', links[i]);
);
//loads previous link in iframe


The problem is that if a user clicks on say the 3rd link, and then clicks the next button, it does not go to the 4th link, but rather to the 2nd link, since the click function just changes the value of i which is set to 0 by default.

To solve this I thought of creating another variable that stored the current link loaded in the iframe as such:

var current = $('.frame').contents().get(0).location.href


and then setting the value of i according to the index value of the current link as such:

var i = links.indexOf(current)


Note: I am aware that

$('.frame').contents().get(0).location.href


will cause cross-domain errors. The links I am using are from the same domain so this won't be a problem.

Sadly, this doesn't work. Any clue where I'm going wrong? Here's a fiddle.

JSFiddle

I have to use only Javascript (Jquery is fine). Please keep in mind that creating an array with the links inserted manually is not an option since there are a large number of links and more being added.

1 Answer
1

Your problem is that your i variable keep the previous index from the previous clicking on the next/prev buttons. You should fixc your code, that when the user clicks any link, i will update, as follows:

i

i

var i = 0, links = $('a').toArray();

$('.next').click(function()
i++;
if(i === links.length) i = links.length - 1;
$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
);
//loads next lesson in iframe
$('.prev').click(function()
i--;
if(i < 0) i = 0;
$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
);
//loads previous lesson in iframe
$('a').click(function()
i = links.indexOf(this);
);

.nav
top: 0;

z-index: 2;
width: 100%;
background: #212121;

.nav button
font-size: 25px;
color: white;
padding: 10px;
width: 100px;
border-color: white;
border-radius: 8px;
background-color: #212121;
margin: 5px;

/*nav menu buttons*/

.frame
height: 50vh;
width: 100%;
border: solide white 1px;


body
background: #212121;
color: white;
font-family: 'Nanum Gothic', 'calibri';
margin: 5px;

/*body view*/

a
padding: 5px 0px 5px 30px;
display: block;
font-size: 20px;
color: white;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class= "nav">
<button class="prev">Prev</button>
<!--previous lesson button-->
<button class="next">Next</button>
<!--next lesson button-->
</div>

<iframe name="content" class="frame" src=""></iframe>

<ul>
<li><a href="/01.html" target="content">Link 1</a></li>
<li><a href="/02.html" target="content">Link 2</a></li>
<li><a href="/03.html" target="content">Link 3</a></li>
<li><a href="/04.html" target="content">Link 4</a></li>
<li><a href="/05.html" target="content">Link 5</a></li>
</ul>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.