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.
Also, judging from what you told us, you can use jQuery to handle click events to the container that holds the movie pictures. Then, you can call a function when these events are fired and this function could use the `slideToggle()` method of jQuery to slide the `div` containing the information about the movie down.
Here’s a quick CodePen pen I made to help you out: http://codepen.io/srig99/pen/EKFoi.
For the pen above, I used jQuery’s click events as aforementioned to fade out all other information `divs` and then `slideToggle()` the selected `div’s` information.
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
border-width: 0 8px 10px;
border-color: red transparent;
and `position: relative;` on `.selected`, only problem is the triangle shows immediately after clicking while in google images it shows after the info box is expanded (which looks better). So you might want to use jQuery to add an element like that instead.
Also there are some bugs, for example if you click 1 ~ 4 and then click 8 (bugs with the jQuery that is)
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!
`pointerPos = $(this).position().left + $(this).width() / 2 – 10;` with `position: relative;` on `.container`, this always get’s the center of the selected box (-10 for the halfwidth of the pointer)… also I like it better without the extra top margin on `.info-bg` :P
This approach works for boxes with different widths, yours only works with boxes 100px width with 10px total margin between them.
Your solution also fixes the problem that when you click the first row and then the last box on the second row, the wrong element is found as `.edge` by the way :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".