Forums

  • # 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 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 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: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 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 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 2:47 pm

    cheers @CrocoDillon !!

    # November 7, 2014 at 4:39 am

    http://jsfiddle.net/silpa/9wftgt6j/1/

    This is the solution for when I click on first row last element and then second row last element the appending div is adding for the last row.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag