Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery causes images to disappear

    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>&nbsp;&nbsp;
    <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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Why on earth are you using document.write()? I hope you know better ways to output something on a screen using jQuery, otherwise it would be like driving on the highway on a three wheeler.

    document.write() will ALWAYS create a new document when applied after page load and thus overwrite the existing document!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •