Jump to content
Sign in to follow this  
mxbrainwrong

JQuery click making display disappear

Recommended Posts

Okay, here is the problem, the background to it is a little bit lengthy but please bear with me as I think it's probably essential to getting to the root of it. I'm trying to design an on-site navigation system using straight javascript and jquery. The site is for a photographer who has a number of galleries of her images she wants to put up. These are displayed on the page as a series of thumbnails which are arranged in a grid (lets say 3 by 3 here for simplicity's sake). The idea is that these can either be displayed in order of size or in order of the date the gallery was updated. There are two buttons at the top of the page 'size' and 'date' and whenh one of these is clicked the thumbnails should animate into the new position. I've reduced the arrays to their essential parts for the purposes of this question. They're defined in the header of the page as follows: //order: id, gallery size, gallery date (UK format), thumbnail url. x position (px), y position (px) var galDate = new Array();galDate[0] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galDate[1] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; galDate[2] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galDate[3] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galDate[4] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galDate[5] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galDate[6] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galDate[7] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galDate[8] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; var galSize = new Array();galSize[0] = [2, 32, 3-8-2011,"images/image3.jpg", 300, 200]; galSize[1] = [7, 14, 4-8-2011,"images/image6.jpg", 200, 200]; galSize[2] = [8, 11, 10-6-2011,"images/image2.jpg", 100, 300]; galSize[3] = [4, 10, 24-1-2012,"images/image8.jpg", 300, 100]; galSize[4] = [3, 7, 3-4-2011,"images/image4.jpg", 300, 300]; galSize[5] = [0, 7, 12-2-2012,"images/image5.jpg", 100, 100]; galSize[6] = [5, 5, 1-6-2011,"images/image1.jpg", 200, 300]; galSize[7] = [9, 3, 11-12-2011,"images/image7.jpg", 100, 200]; galSize[8] = [6, 2, 1-2-2012,"images/image0.jpg", 200, 100]; Displaying the thumbnails and the animation is handled by three functions: which are defined in the <head> section of the page as follows: 'Swap' loops through the all the rows in array 1 defining the id, x position and y position as variables id1, x1 and y1 (please forgive the 'document writes' this was part of an earlier debugging attempt) function swap(array1, array2){for(i=0; i<array1.length; i++){var id1 = array1[0];document.write ('id1: ' + id1);document.write ('<br />');var x1 = array1[3];document.write ('x1: ' + x1);document.write ('<br />');var y1 = array1[4];document.write ('y1: ' + y1);document.write ('<br />'); // For each row in the first array, 'Swap' then loops through the second array. When the ids are equal, this triggers the 'animate' function, which then should handle the actual animation for(j=0; j<array2.length; j++){var id2 = array2[j][0];document.write ('id2: ' + id2 );document.write ('<br />');var x2 = array2[j][3];document.write ('x2: ' + x2 );document.write ('<br />');var y2 = array2[j][4];document.write ('y2: ' + y2 );document.write ('<br />'); if (id2==id1){animate(x2, y2);} //close if else {document.write('for loop i should continue');document.write ('<br />'); } } //close for j } // close for i } // close function // 'Animate' is triggered when the ids from each of the arrays correspond and performs the animation (nb – this isn't working perfectly at the moment but the basic animation functionality is working – getting the right thumbnals to animate to the right places is something I have to come back to but its not the main problem at the moment). function animate(x2, y2){$("#"+i).animate({left:x2, top:y2},"slow");document.write ('animate function triggered');document.write ('<br />');} // The actual displaying of the thumbnails is handled by a third function called, surprisingly, 'display' which is as follows. function display (array) {for (i=0, max = array.length; i<max; i++){ $('#container').append('<div id="'+array[0]+'" style="position: absolute; left:'+array[6]+'px; top: '+array[7]+'px;"><a href="#"><img src='+array[5]+' height=75px width=75px></a></div>');}} I have all of the above in the this order in the header of the page. Finally, I have the jquery click function call which is as follows: $(document).ready(function() {$('#size').click(function() {swap (galSize, galDate);}); $('#date').click(function() {swap (galDate, galSize);}); display(galDate); }); The body of the page is as follows: <body><button id="size">Size</button> <button id="date">Date</button><div id="container"></div><script>display (galDate);</script></body> Just to be clear, I realise that some of the actual functionality isn't going to churn out the desired result in terms of positioning etc. The fact of the matter though is that the 'swap' function works in as far as it animates the images (I know because I've tested it!) :-) The problem I have (and thanks to those who've stayed with me thus far!) is that as soon as I click on one of the buttons (size or date) the displayed thumbnails disappear. The swap function is still working because all the 'document writes' display on the page and, similarly the animate function is triggered as well. Its just thet there are no thumbnails anymore and they're sort of central to the whole undertaking. As you can probably tell, I'm pretty new to this and there is no doubt an obvious explanation. The thing is, I don;t know what it is. Any ideas or nods in the right direction would be much appreciated. CheersStef

Share this post


Link to post
Share on other sites

Do you have a link to the page online? Have you used the browser developer tools to check the error console or network tab to make sure it's not looking for files that don't exist?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...