Grow your CSS skills. Land your dream job.

Mixing complex scripts to work together

  • # February 19, 2013 at 3:06 pm

    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.

    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.

    # February 19, 2013 at 5:34 pm

    Your code looks good and clean, at least that makes it easier to understand what’s going on :) Do you have a bin with the (broken) combined javascript? I think it could be an issue with not initializing the click listeners on elements that gets loaded after scrolling. I might put something together out of boredom but it’s easier if you show what you’ve tried so far.

    A few things about your code:

    Don’t need to remove ‘px’ from a string you parse as integer, [`parseInt` does that for you](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt).
    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 :)

    # February 19, 2013 at 9:36 pm

    Working solution: http://codepen.io/CrocoDillon/pen/mauCE (I’m a bit of a control freak with programming so I rewrote all JavaScript :P )

    # February 19, 2013 at 9:59 pm

    Just wanted to say that app looks pretty neat.

    # February 20, 2013 at 6:15 am

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

    # February 20, 2013 at 10:16 am

    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.

    Most important changes I made is the elements list, where all the loaded elements are added to after they are initialized in `loadElements()`. I used a temporary `new` class for that, don’t know if that’s the best solution. I added a direct reference to the selected, wrap and info elements, this way it’s more efficient working with them instead of using classes. I kept the `selected` and `wrap` classes for debugging and so you can style them, but they aren’t necessary for the JavaScript. As a bonus I added a listener to hide the info box on clicking the `esc` key, same as Google images. I’m not too happy about the `select()` and `unselect()` functions, they aren’t being inconsistent about taking responsibility for the wrap element. But it was late and I wanted to sleep :P

    # February 20, 2013 at 1:31 pm

    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.

    # February 20, 2013 at 2:29 pm

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

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

You must be logged in to reply to this topic.

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