Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript SlideToggle info like google-images – FIXED

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42741
    cparliaros
    Member

    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.

    #124666
    cparliaros
    Member

    @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.

    #124674
    cparliaros
    Member

    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.

    #124744
    cparliaros
    Member

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

    #124758
    cparliaros
    Member

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

    #124767
    cparliaros
    Member

    @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?

    #124833
    cparliaros
    Member

    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

    #124844
    cparliaros
    Member

    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!

    #124906
    cparliaros
    Member

    cheers @CrocoDillon !!

    #187858
    silpa
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.