I have created a webpage that allows a user to update multiple iframes based on their input in a text box. I'd like to extend the functionality of this page to allow the user to enter multiple values at once.
These values would be separated by a new line, I would like to display all the values in some kind of side bar menu and I would like the user to be able to select values by clicking them and/or cycle through values by "next" or "previous" buttons.
This is how the current page is working:
<input type="text" id="user">
<iframe id="frame1" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame2" width="450px" height="880px" src="" frameborder=0></iframe>
<iframe id="frame3" width="450px" height="880px" src="" frameborder=0></iframe>
<div class="button">Submit</div>
// Clicks submit button if enter key is pressed
$("#user").keyup(function(event){
if(event.keyCode == 13){
$(".button").click();
}
});
// If submit button is pressed, update iframes with contents of text box
$(".button").click(function(){
$('#user').val(function(n,c){
$('#frame1').attr('src', "url" + c);
$('#frame2').attr('src', "url" + c);
$('#frame3').attr('src', "url" + c);
$('#user').attr('value',c);
return c
});
});
From what I understand, I'd need to add the user input to an array by splitting the values based on new line, as described here. Then display them using something like what's described here.
What I'm really struggling with is how to then get these array values into some kind of sidebar menu that the user can interact with. Hopefully if I can do that, I can just use click handlers to update the iframes.
Any help would be greatly appreciated, thanks!
