JavaScript - Onclick Paginate Records

Hi,

I have written this program:
Code:

var scores=[];
function sortScores(scoreRecs){
	for(i=0;i<scoreRecs.length;i++)
		scores.push(scoreRecs[i]);
	for(var i=0;i<scores.length;i++)
	{
		for(var j=i+1;j<scores.length;j++)
		{
			if(Number(scores[i])>Number(scores[j]))
			{
				tempValue=scores[j];
				scores[j]=scores[i];
				scores[i]=tempValue;
			}
		}
	}
	alert(scores);
}
sortScores(["5","6","5","7","7"]);

to take an array of variables in calling the function (ie sortScores), place these variables into an empty array("scores"), apply the bubble sort to scores, and then alert scores in sorted form. When I use test values like I have above, where they are all just numbers, this program works perfectly and alerts the "scores" array, correctly sorted. However, what I would like to do is to call the function with an array of records, each containing two fields, and apply the same sort to the array of records, based on the value in the first field of each record.To illustrate, i'd like to be able to call the function thus:
Code:

sortScores([{sco 0,index:0},{sco 2, index:1},{sco 1,index:2}]);

and for it to sort the records in descending order of the value of the "score" field. So the above call would alert:
Code:

[{sco 2,index:1},{sco 1,index:2},{sco 0,index:0}]

however, i'm not sure how i'd reference the numeric part of the f1 of each record in the sort?

Hopefully you can see what I'm trying to achieve...any ideas would be greatly appreciated.

I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab.
How do I individually create a pagination for each tab?


<?php
// Begin session, initiate database connection, etc.
require_once('./includes/base.php');

// If logging out, delete session variables
if($_GET['logout'] == 1){
@$_SESSION = array();
@session_unregister($_SESSION['userID']);
@session_unregister($_SESSION['userName']);
@session_unregister($_SESSION['userUser']);
@session_unregister($_SESSION['userPass']);
@session_destroy();
}
// Display header
require("./templates/$template/header.php");

?>

<div id="blurb" align="right">

<script language="javascript">
function isClear()
{
document.myForm[0].value='';
return true;

}
</script>
<!-- new search -->
<?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?>
</div>
<br>
<div id="blurb" align="justify">
<em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah....
</div>
<br>

<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>Blogs</span></a></li>
<li><a href="#fragment-14"><span>Links</span></a></li>
<li><a href="#fragment-15"><span>Images</span></a></li>

</ul>
<div id="fragment-13">
<?php



$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time = reltime($row['postTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
</table><br>

</div>';}
?>

<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>


</div>


<div id="fragment-14">
<?php
$sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time1 = reltime($row['linksTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
</table><br>

</div>';}

?>


<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>

</div>
<div id="fragment-15">
<?php
// test
grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

?>

</div>
</div>


<?php

// Display footer
require("./templates/$template/footer.php");
?>

<table align="center"><tr><td align="center">
<script type="text/javascript" defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>

Thank you .......

Ok, basically I am using the script bellow to produce a javascript slideshow similar to this: http://www.valvesoftware.com/ but instead of the red boxes I want an image representing each slide.

My problem is, I can't figure out how to call in a different image for each of these tabs (Paginates).

Any help would be much appreciated, thanks.

HEAD: Code:

<style type="text/css">
/*<![CDATA[*/

#tst {
  position:relative;width:880px;height:400px;
}

#paginate {
  position:absolute;z-Index:4;left:760px;top:15px;height:20px;
}

#paginate .default {
  position:relative;width:100px;height:50px;margin-bottom:27px;border:solid black 1px;background:url(images/imagehold.png);
}

#paginate .active {
  background:url(images/imagehold_o.png);
}

/*]]>*/
</style><script type="text/javascript">
// Animate (24-June-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// The functional code size is 1.39K

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// whe 
//  A           = a global variable                                                               (variable)
//  parameter 0 = the mode(see Note 1).                                                           (string)
//  parameter 1 = the unique ID name or element object.                                           (string or element object)
//  parameter 2 = the initial value.                                                              (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// whe 
//  A           = the global referencing the script instance.                                 (variable)
//  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
//  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
//  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
//  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
//                 field 0 the minimum value. (digits)
//                 field 1 the maximum value. (digits)
//  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//  Note 2:  The default units(excepting opacity) are 'px'.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  The scale is of particular use when re-calling the effect
//           in mid progression to retain an constant rate of progression.
//  Note 4:  The current effect value is recorded in A.data[0].
//  Note 5:  A function may be called on completion of the effect by assigning the function
//           to the animator intance property .Complete.
//           e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
  d=Math.max(d,s<0||f<0?d:0);
  this.data[0]=d;
  this.apply();
  if (ms<this.mS){
   this.to=setTimeout(function(){oop.cng(); },10);
  }
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

</script>

BODY: Code:

<script  type="text/javascript">
/*<![CDATA[*/

function zxcFadeSlideShow(o){
 var obj=document.getElementById(o.ID),imgs=obj.getElementsByTagName('IMG'),z0=0,ary=[],ms=o.FadeDuration,hold=o.Hold,srt=o.AutoStart,pag=document.getElementById(o.PaginateID),pary=[],z1=0;
 for (;z0<imgs.length;z0++){
  imgs[z0].style.position='absolute';
  imgs[z0].style.zIndex=z0>0?'0':'2';
  imgs[z0].style.left='0px';
  imgs[z0].style.top='0px';
  zxcOpacity(imgs[z0],z0>0?0:100);
  ary[z0]=new zxcAnimate('opacity',imgs[z0],z0>0?0:100);
 }
 if (pag){
  this.cls=['default','default active'];
  for (;z1<ary.length;z1++){
   pary[z1]=document.createElement('DIV');
   pary[z1].className=this.cls[z1>0?0:1];
   pag.appendChild(pary[z1]);
   this.addevt(pary[z1],'mouseup','page',z1);
  }
 }
 this.ary=ary;
 this.pary=pary;
 this.lstp=pary[0];
 this.ms=typeof(ms)=='number'?ms:1000;
 this.hold=(typeof(hold)=='number'?hold:1000)+this.ms;
 this.srt=typeof(srt)=='number'?srt+this.ms:false;
 this.to=null;
 this.cnt=0;
 this.lst=ary[this.cnt];
 this.Auto(this.hold);
}

zxcFadeSlideShow.prototype={

 Next:function(cnt,goto){
  this.Pause();
  if (this.lstp){
   this.lstp.className=this.cls[0];
  }
  this.lst.obj.style.zIndex='0';
  this.lst.animate(this.lst.data[0],0,this.ms,[0,100]);
  this.lst=this.ary[cnt];
  this.lst.obj.style.zIndex='2';
  this.lst.animate(this.lst.data[0],100,this.ms,[0,100]);
  if (this.pary[cnt]){
   this.lstp=this.pary[cnt];
   this.lstp.className=this.cls[1];
  }
  this.cnt=cnt;
  if (goto&&this.srt){
   var oop=this;
   this.to=setTimeout(function(){ oop.auto(); },this.srt);

  }
 },

 page:function(nu){
  this.Next(nu,true);
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 },

 Auto:function(ms){
  var oop=this;
  this.to=setTimeout(function(){ oop.auto(); },ms||500);
 },

 Pause:function(){
  clearTimeout(this.to);
 },

 auto:function(){
  this.Pause();
  var oop=this,cnt=this.cnt;
  cnt=++cnt%this.ary.length;
  this.to=setTimeout(function(){ oop.Next(cnt); oop.auto(); },this.hold);
 }


}

S=new zxcFadeSlideShow({
 ID:'tst',              //(optional) unique ID name of the paent DIV.                   (string )
 PaginateID:'paginate', //(optional) unique ID name of the paginate DIV.                (string, default = no pagination)
 FadeDuration:1000,     //(optional) the fade duration in milli seconds.                (number, default = 1000)
 Hold:6000,             //(optional) the 'hold' between auto rotation in milli seconds. (number, default = 1000)
 AutoStart:2000         //(optional) auto start after goto.                             (number, default = no auto start)
});

x=new zxcAnimate('opacity',document.getElementById('tst'))
//x.animate(0,100,1000)
/*]]>*/
</script>

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.