PDA

View Full Version : 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:


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
$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:


<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
I tried using the Javascript one, and it didn't work.

This one does:


<!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:


<!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?


<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:



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


Then in javascript do this:


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.

jscheuer1
06-27-2008, 05:59 AM
josephhamilton1 has some reasonable basic ideas there, but I'm not too keen on using innerHTML and accessing everything by id. Although, if you have a very specific layout in mind, it might not be too bad.

Anyways, the main reason that I see that the page you linked to is not working, is that the target element, the one with the id of 'output' must be hard coded, as it is in my example (you've got that - it's a table cell, but that should be fine), and contain just one &nbsp; character (that part you don't have).

But, if you (as you say) want to populate several table rows and cells, fixing that won't accomplish that goal. It does give rise to a few questions though.

Do you want to (1, 2, or 3):


Populate an existing table without adding any rows or cells to it.
Work from an existing table and add rows and cells to it.
Make the table from scratch and populate it with rows and cells.


?

Agent Moose
06-27-2008, 08:56 PM
The third one might be the best one, at least to my knowlage.

jscheuer1
06-28-2008, 05:33 AM
<!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">
<!--
#tbl_con {
display:none;
}
#tbl_con table {
width:20em;
}
#tbl_con td {
text-align:center;
}
#tbl_con input {
display:block;
margin-top:1px;
}
#nxt {
float:right;
margin-right:0.5ex;
}
#prev {
float:left;
margin-left:0.5ex;
}
-->
</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[6] = ["text7","Blah7"];
texts[7] = ["text8","Blah8"];
texts[8] = ["text9","Blah9"];
texts[9] = ["text10","Blah10"];
texts[10] = ["text11","Blah11"];
texts[11] = ["text12","Blah12"];
texts[12] = ["text13","Blah13"];
texts[13] = ["text14","Blah14"];
texts[14] = ["text15","Blah15"];
texts[15] = ["text16","Blah16"];
texts[16] = ["text17","Blah17"];
texts[17] = ["text18","Blah18"];
texts.factor = 3; //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].cells[0].firstChild.nodeValue = texts[texts.num + i][0];
texts.el[i].cells[1].firstChild.nodeValue = texts[texts.num + i][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(){
for (var t = document.createElement('table'), i = texts.factor; i > 0; --i){
var r = t.insertRow(0);
var c1 = r.insertCell(0);
c1.appendChild(document.createTextNode('\xa0'));
var c2 = r.insertCell(0);
c2.appendChild(document.createTextNode('\xa0'));
}
t.border = 1;
var ctrl = t.insertRow(t.rows.length);
var ctrlc = ctrl.insertCell(0);
ctrlc.setAttribute('colspan', 2, 0);
var i1 = document.createElement('input');
i1.id = 'prev';
i1.type = 'button';
i1.value = 'Previous';
i1.onclick = texts.p;
var i2 = document.createElement('input');
i2.id = 'nxt';
i2.type = 'button';
i2.value = 'Next';
i2.onclick = texts.n;
texts.el = t.rows;
ctrlc.appendChild(i2);
ctrlc.appendChild(i1);
document.getElementById('tbl_con').appendChild(t);
texts.n();
'tbl_con'.reveal();
}
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="tbl_con"></div>
</body>
</html>

Agent Moose
07-15-2008, 03:26 AM
Sorry for bumping this topic

Think you can make it easier for me to accually make it more custom? like use documemt.getElementById and such, just so I can accaully add the classes, and stuff like that myself.

Also, why do i have to make it so that the number is even, so it shows the same amount each time?

jscheuer1
07-15-2008, 04:52 AM
It has been about half a month, just what do you want to do? The code in my previous post in this thread uses "documemt.getElementById and such", so I don't see what exactly you are after.

Agent Moose
07-15-2008, 03:13 PM
I just want the table to look like this:

http://smcodes.smfforfree3.com/pages/smcodes/affiliates.php

I just want to be able to move through the arrays.

The width of the first cell is 15%, the second one is 85%.

I don't know how to edit the code above to make it so that it will be like the table in the link.

jscheuer1
07-15-2008, 03:32 PM
Something could be arranged. However, the example page displays not pairs of texts, rather pairs of linked images in one cell and text in the other. Things would have been much more straightforward if you had stated that at the beginning. Then again, is that what you want? And what about this next/previous stuff? I didn't see any of that in the example page. I'm confused.

Agent Moose
07-17-2008, 02:16 AM
Here's how I have the coding for the table: (part of the table)


<script>
var s = 0;
var affy = new Array();
affy[s++]=["iFusion","One of the Best places to get your InvisionFree/IPBFree/Zetaboard Codes!","http://forum.ifcode.com","http://www.ifcode.com/topsites/button.php?u=webworldx"];
affy[s++]=["Ultimate Graphics","A Graphics forum where you can show off your graphics and more!","http://ultimategraphics.smfforfree3.com/index.php","http://tinyurl.com/36xvav"];

var Affiliates = "";
for(q=0;q<affy.length;q++){
Affiliates += "<tr><td class='windowbg' width='15%'><center><a target='_blank' href='" + affy[q][2] + "' mce_href='" + affy[q][2] + "' title='" + affy[q][0] + "'><img src='" + affy[q][3] + "' mce_src='" + affy[q][3] + "' alt='" + affy[q][0] + "' /></a></center></td><td class='windowbg2' width='85%'>" + affy[q][1] + "</td></tr>";
};

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'>" + Affiliates + "</table></div></div><br>");
</script>

I would imagine that it would be around the same thing, just with more arrays(can't think of what each individual part of the array is called).

For the previous/next, the reason why you don't see it there is because I didn't know how to do it, I tried, but didn't work at all, so I just took it off.

Now, one thing, Im guessing that I would be able to make it so that the buttons are more links, with an onclick function. something like this:

<a href='javascript:void(0)' onclick='nxt()'>+</a>
Something that I would just beable to put in any place I would like.

And sorry for not telling exactly how I wanted the code/table.

Nile
07-17-2008, 02:44 AM
I tried using the Javascript one, and it didn't work.

I know this won't help you anymore, but the correction to my 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+1)'>Next</button> |";
} else if(x==array.length){
document.getElementById('div').innerHTML+=" | <button onClick='operate(tell-1)'>Previous</button>";
} else {
document.getElementById('div').innerHTML+="<button onClick='operate(tell+1)'>Next</button> | <button onClick='operate(tell-1)'>Previous</button>";
}
}
operate(tell);
</script>

jscheuer1
07-17-2008, 04:42 AM
OK, I didn't realize that was your page. Try this out:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<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" id="theaffytable"><tbody></tbody></table></div></div><br>

<script type="text/javascript">

var s = 0;
var affy = new Array();
affy[s++]=["iFusion","One of the Best places to get your InvisionFree/IPBFree/Zetaboard Codes!","http://forum.ifcode.com","http://www.ifcode.com/topsites/button.php?u=webworldx"];
affy[s++]=["Ultimate Graphics","A Graphics forum where you can show off your graphics and more!","http://ultimategraphics.smfforfree3.com/index.php","http://tinyurl.com/36xvav"];
affy[s++]=["AnimeHouse","Forum for all anime lovers! Also for all people out there","http://.animehouse.smfforfree2.com/index.php","http://i302.photobucket.com/albums/nn93/LayoutMaker_Betina/aNIMEFORBETINA.gif"];
affy[s++]=["Musicinsanity","Musicinsanity Is a place for people with A common interest In Music And The Music Charts!","http://Musicinsanity.smfforfree2.com/index.php","http://i218.photobucket.com/albums/cc7/bunnypal911/Music.gif"];
affy[s++]=["Free Rice","Help end World Hunger","http://www.freerice.com","http://i277.photobucket.com/albums/kk51/jssmiles/freerice.gif"];
affy[s++]=["Freeland","100% free webmaster resources at your fingertips","http://freelandforum.com","http://209.85.62.24/54/116/0/p11655/oie_oie_lightning.gif"];
affy[s++]=["Graphic Geeks","A Place For Everyone To Request Graphics, Show Off Graphics And Discuss Graphics!","http://graphicgeeks.smfforfree2.com","http://img204.imageshack.us/img204/6650/graphicgeeksaffiliatexj7.gif"];
affy[s++]=["XGRAPHICSX","An amazing graphic site with friendly members and staff ","http://xgraphicsx.co.uk","http://xgraphicsx.co.uk/images/XGraphicsX_Affiliate.gif"];
affy[s++]=["Red Moon Rising","Vampire RPG site (for 16 and up)","http://redmoon.smfforfree2.com/index.php","http://i2.photobucket.com/albums/y10/Squabbit/icon.jpg"];
affy[s++]=["Aetus Designs","Graphic and web design community","http://aetus.net","http://i242.photobucket.com/albums/ff244/9861_omikron/affy.png"];

function affysubgroup(start){
while (start > affy.length - 1)
start -= affy.length;
while (start < 0)
start += affy.length;

var subaffy = [];
subaffy.length = 0;
for(var i = start; i < start + affysubgroup.count; ++i){
if(i < affy.length)
subaffy[subaffy.length] = affy[i];
else
subaffy[subaffy.length] = affy[i - affy.length];
affysubgroup.counter++;
}
while(document.getElementById('theaffytable').rows.length > 0)
document.getElementById('theaffytable').deleteRow(0);
for(var r, c1, cc, a, im, c2, i = 0; i < subaffy.length; ++i){
r = document.getElementById('theaffytable').insertRow(-1);
c1 = r.insertCell(-1);
c1.className = 'windowbg';
c1.width = '15%';
cc = document.createElement('center');
a = document.createElement('a');
a.target = '_blank';
a.href = a.mce_href = subaffy[i][2];
a.title = subaffy[i][0];
im = document.createElement('img');
im.src = im.mce_src = subaffy[i][3];
im.alt = subaffy[i][0];
a.appendChild(im);
cc.appendChild(a);
c1.appendChild(cc);
c2 = r.insertCell(-1);
c2.className = 'windowbg2';
c2.width = '85%';
c2.appendChild(document.createTextNode(subaffy[i][1]));
};
};
affysubgroup.count = 3; // Set to the number of affiliates to show at once, must be less than the total
affysubgroup.counter = 0;
affysubgroup(0);
</script>
<a href="javascript:updateAffy('next');" onclick="affysubgroup(affysubgroup.counter);return false;">next</a>
<a href="javascript:updateAffy('prev');" onclick="affysubgroup(affysubgroup.counter = affysubgroup.counter - 2 * affysubgroup.count);return false;">previous</a>
</body>
</html>

I'm not to keen on what a mce_src or mce_href is. Unless you know, they can probably be dropped. Also, wherever you define the windowbg and windowbg2 classes, if they only refer to the cells in this table, you can define the widths there and remove the width designations from the code.

There's only one thing you need to set at the end of the above script:


affysubgroup.count = 3; // Set to the number of affiliates to show at once, must be less than the total


I think it is pretty self explanatory.

The href values for the next and previous links are throw aways, they don't exist, and will never get executed. They will appear in the status bar in many browsers and so are descriptive of what the link will do.

You could hard code a row into the table:


<tr><td>Javascript Required for this Affiliates Table</td></tr>

It will be overwritten once the script starts.

jscheuer1
07-17-2008, 05:28 AM
I looked up this mce_whatever stuff, and it just doesn't appear to be for the web, so I got rid of it and made a few other efficiencies like I mentioned, added in most of the styles, validated the HTML and css, plus made the code a little better as well:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font-family : verdana, sans-serif;
font-size:13px;
}
td.windowbg {
width : 15%;
color : #000000;
background-color : #e0e0e0;
text-align : center;
height : 50px;
}
td.windowbg2 {
width : 85%;
color : #000000;
background-color : #ededed;
}
.tborder {
padding : 1px;
border : 1px solid #adadad;
background-color : #ffffff;
}
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
background : url(http://i234.photobucket.com/albums/ee299/smcodes/ForeverBlue/catbg.png) repeat-x;
color : #ebeeee;
padding-left : 10px;
padding-right : 10px;
}
.bordercolor {
background-color : #adadad;
padding : 0;
}
-->
</style>
</head>
<body>
<div class="tborder"><div class="catbg" style="padding: 6px; vertical-align: middle; text-align: center;">Our Affiliates</div><div><table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor" id="theaffytable"><tbody><tr><td>Javascript Required for this Affiliates Table</td></tr></tbody></table></div></div><br>

<script type="text/javascript">
<!--
var s = 0;
var affy = new Array();
affy[s++]=["iFusion","One of the Best places to get your InvisionFree/IPBFree/Zetaboard Codes!","http://forum.ifcode.com","http://www.ifcode.com/topsites/button.php?u=webworldx"];
affy[s++]=["Ultimate Graphics","A Graphics forum where you can show off your graphics and more!","http://ultimategraphics.smfforfree3.com/index.php","http://tinyurl.com/36xvav"];
affy[s++]=["AnimeHouse","Forum for all anime lovers! Also for all people out there","http://.animehouse.smfforfree2.com/index.php","http://i302.photobucket.com/albums/nn93/LayoutMaker_Betina/aNIMEFORBETINA.gif"];
affy[s++]=["Musicinsanity","Musicinsanity Is a place for people with A common interest In Music And The Music Charts!","http://Musicinsanity.smfforfree2.com/index.php","http://i218.photobucket.com/albums/cc7/bunnypal911/Music.gif"];
affy[s++]=["Free Rice","Help end World Hunger","http://www.freerice.com","http://i277.photobucket.com/albums/kk51/jssmiles/freerice.gif"];
affy[s++]=["Freeland","100% free webmaster resources at your fingertips","http://freelandforum.com","http://209.85.62.24/54/116/0/p11655/oie_oie_lightning.gif"];
affy[s++]=["Graphic Geeks","A Place For Everyone To Request Graphics, Show Off Graphics And Discuss Graphics!","http://graphicgeeks.smfforfree2.com","http://img204.imageshack.us/img204/6650/graphicgeeksaffiliatexj7.gif"];
affy[s++]=["XGRAPHICSX","An amazing graphic site with friendly members and staff ","http://xgraphicsx.co.uk","http://xgraphicsx.co.uk/images/XGraphicsX_Affiliate.gif"];
affy[s++]=["Red Moon Rising","Vampire RPG site (for 16 and up)","http://redmoon.smfforfree2.com/index.php","http://i2.photobucket.com/albums/y10/Squabbit/icon.jpg"];
affy[s++]=["Aetus Designs","Graphic and web design community","http://aetus.net","http://i242.photobucket.com/albums/ff244/9861_omikron/affy.png"];

function affysubgroup(start){
while (start > affy.length - 1)
start -= affy.length;
while (start < 0)
start += affy.length;

var subaffy = [];
subaffy.length = 0;
for(var i = start; i < start + affysubgroup.count; ++i){
if(i < affy.length)
subaffy[subaffy.length] = affy[i];
else
subaffy[subaffy.length] = affy[i - affy.length];
affysubgroup.counter++;
}
while(document.getElementById('theaffytable').rows.length > 0)
document.getElementById('theaffytable').deleteRow(0);
for (var r, c1, a, im, c2, i = subaffy.length - 1; i > -1; --i){
r = document.getElementById('theaffytable').insertRow(0);
c2 = r.insertCell(0);
c2.className = 'windowbg2';
c2.appendChild(document.createTextNode(subaffy[i][1]));
c1 = r.insertCell(0);
c1.className = 'windowbg';
a = document.createElement('a');
a.target = '_blank';
a.href = subaffy[i][2];
a.title = subaffy[i][0];
im = document.createElement('img');
im.src = subaffy[i][3];
im.alt = subaffy[i][0];
a.appendChild(im);
c1.appendChild(a);
};
};
affysubgroup.count = 3; // Set to the number of affiliates to show at once, must be less than the total
affysubgroup.counter = 0;
affysubgroup(0);
// -->
</script>
<a href="javascript:updateAffy('next');" onclick="affysubgroup(affysubgroup.counter);return false;">next</a>
<a href="javascript:updateAffy('prev');" onclick="affysubgroup(affysubgroup.counter = affysubgroup.counter - 2 * affysubgroup.count);return false;">previous</a>
</body>
</html>

Agent Moose
07-17-2008, 03:42 PM
I tried the code, and it just froze my browser. (Im using FireFox)

And the mce_ stuff, for somereason I have to have that or it will not work for somereason, just how the stupid site editor thingy is.

jscheuer1
07-17-2008, 03:49 PM
Works fine here:

http://home.comcast.net/~jscheuer1/side/affy_h.htm

If that gives you problems, there is something wrong with your browser.

If you need more help, give me a link to your page where you are trying this.

If your editor sticks in mce_junk, turn it off in its configuration if you can, or get a better editor, or fix the code before uploading. It is invalid in both HTML and in XHTML.

Agent Moose
07-17-2008, 05:46 PM
Well, Im using a free hosting service (SMF For Free), so i can't really do anything about the mce_crap.

But if you want to see the page Im useing it on, here:
http://smcodes.smfforfree3.com/pages/smcodes/test.php

jscheuer1
07-17-2008, 06:50 PM
You've got a typo in your source code, but from the sort of error that it is, I can't imagine how it happened unless you did it on purpose, or you were mixing and matching my two versions and doing it poorly, or your editor or other program(s) that touched the code did it automatically for some weird reason. Anyways, you have:


for (var r, c1, a, im, c2, i = subaffy.length - 1; i > -1; i){

It should be:


for (var r, c1, a, im, c2, i = subaffy.length - 1; i > -1; --i){

Without the decrementing of the variable, it sends the whole thing into an endless loop writing to the page forever, no wonder it crashed FF. However, Opera just kept happily writing identical rows to the table and would have probably gone on doing so forever.

Agent Moose
07-19-2008, 03:34 AM
For some reason, it automaticly removes the -- from it, Don't know why.

Is there another way I can do it?

jscheuer1
07-19-2008, 03:43 AM
For some reason, it automaticly removes the -- from it, Don't know why.

Is there another way I can do it?

Define it (bold in the above). If it is your editor, use NotePad. The line could also be written:


for (var r, c1, a, im, c2, i = subaffy.length - 1; i > -1; i-- ){

or even:


for (var r, c1, a, im, c2, i = subaffy.length - 1; i > -1; i = i - 1){

Agent Moose
07-21-2008, 04:10 PM
STill not what Im looking for, but it will work :)

Thanks for your help

jscheuer1
07-21-2008, 05:56 PM
Geez, what are you looking for then? I thought that we had been over that enough to get that part all straightened out, apparently not.

The demo page looks like it is working fine with the new code. I would preload the images though, and possibly set a height style value for the table cell(s) containing the images.

Agent Moose
07-21-2008, 08:23 PM
I was hoping that in the code, if it got to the very ending of the variable, you would have to press previouse to go back, but the way you have it works fine :)