Grow your CSS skills. Land your dream job.

SlideToggle info like google-images – FIXED

  • # February 14, 2013 at 6:53 pm

    Hello forum,

    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.

    # February 14, 2013 at 9:18 pm

    @cparliaros Do you have any code you can show us? Perhaps a CodePen link or a JSFiddle?

    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.

    # February 14, 2013 at 10:22 pm

    @srig99 thanks for the reply, I have some code knowledge of javascript and jQuery in general. Maybe I wasn’t clear, I know about the slideToggle() and how to do it, the tricky part is how to have the info under the row of the selected element. I will try to reproduce an example on JSFiddle. Untill then, I found someone asking the same [question](http://stackoverflow.com/questions/11401024/determine-wrap-location-in-floated-elements “question”) and there are some solutions there to the right direction but not complete.

    # February 14, 2013 at 11:35 pm

    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.

    EDIT:

    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.

    # February 15, 2013 at 4:19 am

    Just compare breakat with boxes.length… `if (breakat >= boxes.length) breakat = boxes.length – 1;`

    # February 15, 2013 at 9:24 am

    @CrocoDillon yes, this is what I did :) thanks

    # February 15, 2013 at 10:45 am

    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″)?

    # February 15, 2013 at 11:23 am

    Why not do it just like google images? If you click a box in the same row it just substitutes the box without animation, looks good to me :)

    # February 15, 2013 at 11:28 am

    @CrocoDillon hmm, you are right. I will try that. But in general, in the case I want commands to be executed one after the other, do I have to use only jquery queue?

    # February 15, 2013 at 11:51 am

    Don’t need a queue, you can use the callback function from slideUp. Bit of a hassle to get that to work only when it’s the same row though and I have little time at the moment else I’d give it a shot.

    # February 15, 2013 at 4:58 pm

    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

    # February 15, 2013 at 5:11 pm

    .selected:after {
    content: “”;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 42px;
    width:0;
    height:0;
    border-width: 0 8px 10px;
    border-style: solid;
    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)

    # February 15, 2013 at 9:23 pm

    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.

    **EDIT**
    I found the problem but I can’t fix it! I have now idea why it does that. I have few logs inside the code and you can check the javascript console. Here is the [link](http://jsfiddle.net/cparliaros/JfcAu/9/ “”).

    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.

    **EDIT 2**

    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!

    # February 16, 2013 at 4:30 am

    `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

    # February 16, 2013 at 4:31 am

    http://jsfiddle.net/JfcAu/11/

    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 :)

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".