Skip to main content


This topic contains 7 replies, has 0 voices, and was last updated by  cparliaros 6 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #42855


    Hi, I am building an app for personal use. Its main factionality is:
    1) Get data from a spreadsheet with movies and store them in an array.
    2) Loop through the array and create html elements.
    3) User can select with mouse or keyboard arrows any movies by its cover and get its info/metadata.

    extra 2.5) Load only the first 15 elements and go to step 3. If the user scroll to the end of the page, load 15 more elements and go to step 3 again.

    Well I have 1 ,2,3 [(jsFiddle)]( “”) working together just fine. Also I have 1,2,2.5 [(jsFiddle)]( “”) working together just fine. The problem is to make them work together, always something will break.
    Please help as it drives me crazy. Also
    I am trying to make the code as efficient as possible, so if you find anything that can be done in a simpler way, please let me know.

    In both link of jsFiddle, the html and css are the same. Only the javascript is different.

    You can use any part of my code you may find useful.



    Just wanted to say that app looks pretty neat.



    @CrocoDillon thank you very much for your advices and your help. Control freak is a good thing for me :) – I am comeming from python and c++, but this is my first javascript project thats why may I have. About your last questions [Why did you put the click listeners on the img elements and not on the div with the class .element itself?], my initial idea was to make it look like itunes, and because I am a freaky on details I noticed that when you click on the title does not open, only on the image. I had the .element on my first version. I am going to study your code, that always the best way to learn.

    @chrisburton thanks

    Now I have to put the last pieces in the puzzle. Get the info from the selected movie from tmdb API, which I have that already. I want also to create some options, filtering (year range slider, initial letter, quality, format) and for first time I want to create a live search. I have not idea how to do the last part, if you have any links from similar jobs….



    actually the new was the fix to my problem but I learn a lot more from your code. Also you did what I had in my plans to do later, but eralier is always better :), to put in functions things like select(), unselect(), hideInfo() etc.

    I added back already the document click listener, I had to fix first something on the css, where the #main-container and #movies-container, were not updating their height as you scroll down. Now they do and when you click in any of these two elements it uses the unselect() function. Also I added back the fade-in using css when you scroll down and new covers are loading which I found it on Apple’s Trailers app and I like it. Thanks for the esc, I am thing to add more keyboard fuctionalities like pressing any key from alphabet and select the first movies starting from this letter. So far everything works without any problem and the overall loading time have been decreased below 4 seconds – when it was loading all the movies the loading time was 7+ seconds.

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star