I have some code in the <head> of my page as follows:
Code:
$(document).ready(function() {
$('#size').click(function() {
swap (galSize, galDate);
});
$('#date').click(function() {
swap (galDate, galSize);
});
display(galVar);
});
function animate(x1, y1){
$("#"+i).animate({left:x1, top:y1},"slow");
document.write ('animate function triggered');
document.write ('<br />');
}
function swap(array1, array2){
for(i=0, max = array1.length; i<max; i++){
var id1 = array1[i][0];
var x1 = array1[i][6];
var y1 = array1[i][7];
for(j=0, max = array2.length; j<max; j++){
var id2 = array2[j][0];
var x2 = array2[j][6];
var y2 = array2[j][7];
if (id2==id1){
animate(x1, y1);
} //close if
} //close for j
} // close for i
} // close function
function display (array) {
for (i=0, max = array.length; i<max; i++){
$('#container').append('<div id="'+array[i][0]+'" style="position: absolute; left:'+array[i][6]+'px; top: '+array[i][7]+'px;"><a href="#"><img src='+array[i][5]+' height=75px width=75px></a></div>');
}
}
The code refers to two two-dimensional arrays which contain information about galleries of images. One is ordered by date, the other by size [i][0] refers to the row id, [i][6] to the x coordinate and [i][7] to the y coordinate. [j] refers to the second array. The idea is that when a button in the html is clicked the thumbnails displayed on screen wil animate into the new order.
The problem I have is when the button is clicked, the thumbnails disappear from the screen.
The html is simply:
Code:
<button id="size">Size</button>
<button id="date">Date</button>
<div id="container"></div>
Does anyone have any idea why jquery would be doing this. The 'animate' function definitely triggers. It just seems to make everything disappear though.
Before you post, read our: 
