I have a problem which is hard to explain but likely there is an example: Google images where when you click on a image you get it’s info with a slide down div. If you check the code when this is happening you will see that a new div is place, not after the selected element but after the last element in the row where the selected is. Even if you scale up window’s width it will be updated. (Told you hard to explain).
Well I want to do someone like that to the web-app I am building. There is an empty container which, once you load the page, gets data from a google spreadsheet and fill it with divs which each one is a cover of a movie and its title and I want with a click function to slide down its info but has to be exactly as in google-images. Is there any project you know around close to that? I can’t find anything.
Thanks in advance for any help or ideas.
well here is my own [fix](http://jsfiddle.net/cparliaros/JfcAu/1/ “fix”) in JSFiddle!!
I am gonna try to improve it a bit by adding an update when the window is resized and make it more clean.
I will appreciate any help with the window resize update, so when ever the window’s width changes the selection is always the last element on the same row with the clicked/active element.
Again, I fixed my self (here is the [update](http://jsfiddle.net/cparliaros/JfcAu/2/ “update”)) but I want new problem rises. When the selected element is on the last row which is not full, has to select the last element which seems easy. I will updated on the same link.
i have everything in place with few updates to have the functionality that google images have but i am missing one thing. If you check the code, you will see that when info is open and then click in another box, simultaneously will close the current and open another in the position. Which look ok, but when you click another box in the same row, looks bad. I want first slideUp() the old and then slideDown() the new. How I do that in my (http://jsfiddle.net/cparliaros/JfcAu/4/ “update 4”)?[code](http://jsfiddle.net/cparliaros/JfcAu/4/ “update 4”)?
here is the final [version](http://jsfiddle.net/cparliaros/JfcAu/7/ “final”) with fixed width this time, works better for me. One last extra question, how can I have the small triangle thing which points to the selected element? You can see it as google image and itunes. cheers
well I took it a bit [further](http://jsfiddle.net/cparliaros/JfcAu/8/ “update”) and now I have the triangle pointer.
When you click elements on the same row the pointer is on the right position **but** on the first click in a row below (for some reason only below) the pointer points to the next element of what you have clicked.
If you click again, it will be fixed.
I created some console.logs and it seems that problem is on the selected element and its index. I am sure I have done something stupid but I have no idea for now.
Select first 0 element and then 4 and you will see on the log that it has selected 5. Then try again 4 and it will give you 4 this time. Then try select any element from the above row, its going to give your the right one. It drives me crazy, please help.
I think that I found the problem but I dont know how to fix it for now. The problem is when i declare the
var selectedPos = $(this).index(); in line 9,
because it does not get its index from the elements array but from the parent which will include the new div created on the line 42, that why when I select an element below the new info div, I will get position by one number greater. How to fix this?
**EDIT 3 – Solution**
Another update, I think I am talking to myself but I fixed it.
I will keep all the edits for future reference in case that someone will face the same problem. All I had to do is to change this:
var selectedPos = $(this).index(); to this
var selectedPos = $(this).index('.box'); which will filter the results.
Thanks for any help, everyone!
You must be logged in to reply to this topic.