Move Through Arrays?

**Agent Moose** · 06-24-2008, 12:21 AM

I want to create a code that moves through arrays. It will have a previous and next button, and of course, change through arrays. Example:

Code:

var array = new Array();
array[0] = ["text1","Blah1"];
array[1] = ["text2","Blah2"];
array[2] = ["text3","Blah3"];
array[3] = ["text4","Blah4"];
array[4] = ["text5","Blah5"];

When you first visit the page, it will show array[0] and array[1]. Then, there will be a next button, if clicked, it will go to the next two arrays, array[2] and array[3].

Get it?

Sorry but that is bascily as well as I can explain it, I hope it is good enough to know what Im talking about.

Thanks

**Nile** · 06-24-2008, 12:38 AM

Here's a simple PHP Version, I'll be putting a javascript version in 2 seconds:

PHP Code:


<?php
$test = array("1","2","3");
for($i=0;$i<=count($test);$i++){
if($_GET['array'] == $i){
echo $test[$i];
$p = $i-1;
$n = $i+1;
echo "<br /><a href='?array=$p>Previous</a> | <a href='?array=$n'>Next</a>";
}
}
?>

Here's the js:

HTML Code:

<div id="div">null</div>
<script type="text/javascript">
var tell = 0;
var x = 0;
function operate(b){
var array = new Array();
array[0] = ["text1","Blah1"];
array[1] = ["text2","Blah2"];
array[2] = ["text3","Blah3"];
array[3] = ["text4","Blah4"];
array[4] = ["text5","Blah5"];
tell = b;
for(i=0;i<=tell;i++){
x = i;
document.getElementById('div').innerHTML = array[i]+"<br />";
}
if(x===0){
document.getElementById('div').innerHTML+="<button onClick='operate(tell++)'>Next</button> |";
} else if(x==array.length){
document.getElementById('div').innerHTML+=" | <button onClick='operate(tell--)'>Previous</button>";
} else {
document.getElementById('div').innerHTML+="<button onClick='operate(tell++)'>Next</button> | <button onClick='operate(tell--)'>Previous</button>";
}
}
operate(tell);
</script>

**Agent Moose** · 06-24-2008, 02:43 PM

I tried using the Javascript one, and it didn't work.

**jscheuer1** · 06-24-2008, 11:06 PM

Originally Posted by Agent Moose

I tried using the Javascript one, and it didn't work.

This one does:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- 
#output, #controls {
display:none;
width:9em;
text-align:center;
}
 -->
</style>
<script type="text/javascript">
<!-- 
var texts = [];
texts[0] = ["text1","Blah1"];
texts[1] = ["text2","Blah2"];
texts[2] = ["text3","Blah3"];
texts[3] = ["text4","Blah4"];
texts[4] = ["text5","Blah5"];
texts.num = -1;
texts.p = function(){
texts.num = --texts.num > -1? texts.num : texts.length - 1;
texts.d();
};
texts.n = function(){
texts.num = ++texts.num < texts.length? texts.num : 0;
texts.d();
};
texts.d = function(){
'prev'.vis(texts.num > 0? 0 : 1);
'nxt'.vis(texts.num < texts.length - 1? 0 : 1);
texts.el[0].nodeValue = texts[texts.num][0] + ':';
texts.el[2].nodeValue = texts[texts.num][1];
}
String.prototype.reveal = function(){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.display = 'block';
};
String.prototype.vis = function(h){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.visibility = h? 'hidden' : 'visible';
};
texts.init = function(){
texts.el = document.getElementById('output').childNodes;
'output controls'.reveal();
texts.n();
}
if(typeof window.addEventListener!='undefined')
window.addEventListener('load', texts.init, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', texts.init);
// -->
</script>
</head>
<body>
<div id="output">
&nbsp;<br>&nbsp;
</div>
<div id="controls">
<input id="prev" type="button" value="Previous" onclick="texts.p();"> 
<input id="nxt" type="button" value="Next" onclick="texts.n();">
</div>
</body>
</html>

**Agent Moose** · 06-26-2008, 08:19 AM

Thanks, that worked, but not exactly what I wanted.

That code only shows one arrary, but I want to beable to show how ever many I want, like show array 0 and 1 at the same time.

**jscheuer1** · 06-26-2008, 03:24 PM

Well, that would be pretty easy to do. If that is, you can decide how many. If it's two each time though, why not just combine the two into one, etc. If the number keeps changing, that would be harder, but still doable.

**Agent Moose** · 06-26-2008, 03:34 PM

I accually want around 10 or 15 arrays showing at once...

**jscheuer1** · 06-26-2008, 03:56 PM

Well, try out this version. It requires that the total number of arrays be evenly divisible by the number showing at once (texts.factor), it will alert you if you mess that part up:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- 
#output, #controls {
display:none;
width:9em;
text-align:center;
}
 -->
</style>
<script type="text/javascript">
<!-- 
var texts = [];
texts[0] = ["text1","Blah1"];
texts[1] = ["text2","Blah2"];
texts[2] = ["text3","Blah3"];
texts[3] = ["text4","Blah4"];
texts[4] = ["text5","Blah5"];
texts[5] = ["text6","Blah6"];
texts.factor = 2; //Set to the number of texts to display
texts.num = -texts.factor;
texts.p = function(){
texts.num -= texts.factor;
texts.num = texts.num > -1? texts.num : texts.length + texts.num;
texts.d();
};
texts.n = function(){
texts.num += texts.factor;
texts.num = texts.num < texts.length? texts.num : texts.num - texts.length;
texts.d();
};
texts.d = function(){
if(texts.length%texts.factor){
alert('The number of texts must be evenly divisible by the factor');
return;
}
'prev'.vis(texts.num > 0? 0 : 1);
'nxt'.vis(texts.num < texts.length - texts.factor? 0 : 1);
for (var i = texts.factor - 1; i > -1; --i)
texts.el[i * 2].nodeValue = texts[texts.num + i].join(': ');
}
String.prototype.reveal = function(){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.display = 'block';
};
String.prototype.vis = function(h){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.visibility = h? 'hidden' : 'visible';
};
texts.init = function(){
for (var el = document.getElementById('output'), i = texts.factor; i > 1; --i){
el.appendChild(document.createElement('br'));
el.appendChild(document.createTextNode('\xa0'));
}
texts.el = el.childNodes;
'output controls'.reveal();
texts.n();
}
if(typeof window.addEventListener!='undefined')
window.addEventListener('load', texts.init, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', texts.init);
// -->
</script>
</head>
<body>
<div id="output">
&nbsp;
</div>
<div id="controls">
<input id="prev" type="button" value="Previous" onclick="texts.p();"> 
<input id="nxt" type="button" value="Next" onclick="texts.n();">
</div>
</body>
</html>

**Agent Moose** · 06-27-2008, 02:58 AM

It worked with me just putting it straight onto the page, but when I tried adding it to a table, it didn't work:
http://smcodes.smfforfree3.com/pages/smcodes/test.php

Also, how do I make it so that each array will be in <tr><td> tags?

Code:

<script type="text/javascript">
<!-- 
var texts = [];
texts[0] = ["text1","Blah1"];
texts[1] = ["text2","Blah2"];
texts[2] = ["text3","Blah3"];
texts[3] = ["text4","Blah4"];
texts[4] = ["text5","Blah5"];
texts[5] = ["text6","Blah6"];

texts.factor = 2; //Set to the number of texts to display
texts.num = -texts.factor;
texts.p = function(){
texts.num -= texts.factor;
texts.num = texts.num > -1? texts.num : texts.length + texts.num;
texts.d();
};
texts.n = function(){
texts.num += texts.factor;
texts.num = texts.num < texts.length? texts.num : texts.num - texts.length;
texts.d();
};
texts.d = function(){
if(texts.length%texts.factor){
alert('The number of texts must be evenly divisible by the factor');
return;
}
'prev'.vis(texts.num > 0? 0 : 1);
'nxt'.vis(texts.num < texts.length - texts.factor? 0 : 1);
for (var i = texts.factor - 1; i > -1; --i)
texts.el[i * 2].nodeValue = texts[texts.num + i].join(': ');
}
String.prototype.reveal = function(){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.display = 'block';
};
String.prototype.vis = function(h){
for (var a = this.split(' '), i = a.length - 1; i > -1; --i)
document.getElementById(a[i]).style.visibility = h? 'hidden' : 'visible';
};
texts.init = function(){
for (var el = document.getElementById('output'), i = texts.factor; i > 1; --i){
el.appendChild(document.createElement('br'));
el.appendChild(document.createTextNode('\xa0'));
}
texts.el = el.childNodes;
'output controls'.reveal();
texts.n();
}
if(typeof window.addEventListener!='undefined')
window.addEventListener('load', texts.init, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', texts.init);
// -->
</script>




<script type="text/javascript"><!--
document.write("<div class='tborder'><div class='catbg' style='padding: 6px; vertical-align: middle; text-align: center;' mce_style='padding: 6px; vertical-align: middle; text-align: center;'>The Affiliate Page</div><div><table border='0' width='100%' cellspacing='1' cellpadding='4' class='bordercolor'><tr><td class='titlebg'><a onclick='AddYours();'>Add Your Affiliate</a></td></tr><tr><td class='windowbg2' width='100%'><span id='AffiliateSec'>We are Currently Working on the affiliate page, please be patient during the change.</span></td></tr></table></div></div><br>");

function AddYours(){
document.getElementById("AffiliateSec").innerHTML = "In Order to add your affiliate to this page, you must be a <b>Member</b> of Simple Machine Codes, and  you must have at least <b>10 legit posts</b> on Simple Machine Codes.  If you don't, and you request to get your affiliate on this page, your post will get deleted, and your affiliate will not get added.<br /><br />If you do have <b>10 posts</b>, all you have to do is post in this topic: <a href='http://smcodes.smfforfree3.com/index.php/topic,688.0.html' mce_href='http://smcodes.smfforfree3.com/index.php/topic,688.0.html' style='cursor: pointer;' mce_style='cursor: pointer;'>Add Your Affiliate</a><br /><br />Oh, and one last thing, please follow the guidelines in the first post.  If you don't, your post will be deleted.";
};

document.write("<div class='tborder'><div class='catbg' style='padding: 6px; vertical-align: middle; text-align: center;' mce_style='padding: 6px; vertical-align: middle; text-align: center;'>Our Affiliates</div><div><table border='0' width='100%' cellspacing='1' cellpadding='4' class='bordercolor'><tr><td class='windowbg' id='output'><br mce_bogus="1" /></td></tr></table><table><table border='0' width='100%' cellspacing='1' cellpadding='4' class='bordercolor'><tr class='windowbg2'><td id='controls'><center><input id='prev' type='button' value='Previous' onclick='texts.p();' /> <input id='nxt' type='button' value='Next' onclick='texts.n();' /></center></td></tr></table></div></div><br>");
// --></script>

**josephhamilton1** · 06-27-2008, 03:10 AM

Are you trying to populate the cells in a table? Like this:

text1 | text2
text3 | text4

In a table structure?

If so, and you know the amount of elements beforehand then you can just put ids on your table cells and reference them directly like this:

Code:

<table>
<tr>
<td id="LeftCell1"></td>
<td id="RightCell1"></td>
</tr>
...
</table>

Then in javascript do this:

Code:

var leftCell1 = document.getElementById("LeftCell1");
leftCell1.innerHTML = myArray[0][0];
var RightCell1= document.getElementById("RightCell1");
RightCell1.innerHTML = myArray[0][1];

O is the first index or row in the array and then you reference the 1st index of the first row with another 0, next reference the 2nd index of the first row with a 1.

The real key to javascript though is to be able to access the specific elements you want to update. Then you can use the innerHTML property to insert text into it, like I did with the td tags.

Remember that a td is a cell in a table and that you want to just put text into that cell, so all you need to do is access the cell and put the text into it.

This gets the cell:
document.getElementById("LeftCell1")

This puts the text into the cell:
leftCell1.innerHTML = myArray[0][0];

You can get any HTML element using the document.getElementById function.

**Remember that JS is case sensitive.

Also, you should definitely download Firebug and learn to use it, It is a life saver. If you need help please contact me. I will gladly show you how to use Firebug.

Thread: Move Through Arrays?

Thread Tools

Search Thread

Move Through Arrays?

Bookmarks

Bookmarks

Posting Permissions