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)](http://jsfiddle.net/cparliaros/cZV9Q/1/ “”) working together just fine. Also I have 1,2,2.5 [(jsFiddle)](http://jsfiddle.net/cparliaros/8V4ux/ “”) 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.
You can use any part of my code you may find useful.
A few things about your code:
Use the `var` keyword more, it makes it easier to find the scope of a variable and it’s best practice.
You use `elements.removeClass(‘selected’);`, while only one element can has that class at the same time, I think it’s more efficient to remember the selected element as a variable and use that function only on that element (for example, take `curElement` outside the click listener).
Why did you put the click listeners on the img elements and not on the div with the class `.element` itself?
Nice piece of work by the way, I’ll use it as an inspiration in case I ever need something with functionality like this :)
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….
Don’t know anything about filtering and live searches, I’m curious about how you’re gonna implement that :)
I’m sure you can figure out how to put the click listener back on the img, at least then you can make the document click listener to unselect work again.
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
I added back already the document click listener, I had to fix first something on the css, where the
#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.
Getting the JSON data takes a lot time, maybe you can try to make that load the first 15 movies first, and then load all the rest asynchronously after the page has loaded. I wouldn’t know how, but that could be a major performance boost.
The functionality about pressing a alphabetical key sounds great, you can even expand that by remembering all the keystrokes so it becomes a search function. You can even extend the search to the movies array so not only the loaded elements but also the elements that are not loaded yet can be found (and of course loaded when needed, first result of every additional keystroke, or all results if there are less then loadLimit). Keep us updated :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".