Grow your CSS skills. Land your dream job.

iMDb – Personal Movies Database webapp – test drive

  • # March 2, 2013 at 10:30 pm

    I did the changes you suggested [jsFiddle](http://jsfiddle.net/cparliaros/7QmWr/3/ “”) is that you had in mind?

    # March 3, 2013 at 6:42 am

    Close, you can move the `viewport` var inside the function and do the math there (inside the function but outside the iteration).

    Get rid of this `if ( $(this).children(‘.cover’).children().length === 0 )`, since you’re using `startfrom` you already know those covers are not loaded anyway. However you’re setting `startfrom` to the index of the element in the sliced collection (you need to set it to the index of the element in `elements` + 1, or just do `startfrom++;`)

    I updated the [jsFiddle](http://jsfiddle.net/7QmWr/4/), kept your var names to avoid confusion but they could be more descriptive… `viewport` isn’t really the viewport (no better suggestions though), and `startfrom` could be `coversLoaded` or something instead (it’s outside the `loadCovers()` function so `startfrom` could really be anything).

    Also note that you don’t need a wrapper function as event callback if all you do is call another function inside of it anyway.

    On a sidenote, I love jQuery… but `$(this).attr(‘id’)` seems so bloated compared to `this.id`, you happen to know if the latter got any compatibility issues or something?

    # March 3, 2013 at 6:55 am

    There is some lag when scrolling fast because of all the DOM manipulation I guess (it’s mostly recalculating layout if I look at the timeline in Chrome). Too bad I don’t know how to optimize these kind of things :(

    # March 3, 2013 at 8:29 am

    Me again.

    Just wanted to tell you that if you click on a movie a bit below it brings you back at the top.

    Firefox 19.

    Also can you help me out ? I need a script for loading content when you scroll down below on a wordpress static homepage(it won’t contain posts but static divs). Can you tell me where to put it and where can I get the script

    # March 3, 2013 at 8:54 am

    Getting the same problem as @markomarkogame on chrome 27 with the page scrolling to top whenever I click on a title. Not too bad initially. Bit of a pain once scrolled down a long way.

    I can’t imagine anyone having the patience to scroll down to titles later in the alphabet. I know you’re working on filtering/tabs, so I’ll leave it at that :-)

    Finally, you have spelled “Genre”, “Gerne”.

    It’s a pretty and tidy application. What is it intended to be used for?

    # March 3, 2013 at 11:54 am

    Hello guys, I am not very experienced with javascript this is my first project on this scripting language and its completly experimental and for personal use but as I have mentioned before if anyone want to use any part of the code he is free to do it. @CrocoDillon has helped a lot with this code!

    @markomarkogame thanks for pointing out this bug, I am wokring on it… I am currently rebuilding the entire code in order to work better with search and filters. I have no idea about wordpress but I guess should be few wordpress plugings for doing just that. If you know how to build a plugin for wordpress the idea behide the “load more as you scroll” is quite simple.

    @BenWalker thanks for pointing out the spelling mistake. I think that I answeredyour question about the purpose of this webapp above.

    @CrocoDillon thanks one more time for your help, I tried to get rid the $(this).children('.cover').children().length === 0 ) but for some reason it was not working very well, propably I was not using the startfrom var properly. You are right, I dont like the names either but it was late and I wanting just to test it and get some sleep. Also I am trying to detect when you scroll down or up, and trigger the loadCovers function only when is down or even record in a var the lowest position in the case you go down – up and down again.

    Letter this evening (london time) I am gonna update the webapp on the same link http://cparliaros.com/imdb

    EDIT:
    here is the function which detects when you scroll lower than the last lowerst position and only then it will call the function with the loop.

    var lastLowestTop = 0;
    $('#main-container').scroll(function(){
    var scrollPos = $(this).scrollTop();
    if (scrollPos > lastLowestTop){
    lastLowestTop = scrollPos;
    loadCovers();
    }
    });

    # March 3, 2013 at 12:08 pm

    > I think that I answeredyour question about the purpose of this webapp above.

    You say above what it is, but not why it is:

    > webapp which get info from personal database with collection of movies and gets also info for each one of them from tmdb API. It looks and work like itunes with some extra tools created by me.

    Is it just for your personal use, then? Is it your personal DVD collection? Or is the idea for people to create their own lists of films for the app to display? Or, going further down the iTunes line, is the plan to enable people to buy these films via the app?

    # March 3, 2013 at 1:05 pm

    by above I meant the top from my previous reply:
    “Hello guys, I am not very experienced with javascript this is my first project on this scripting language and its completly experimental and for personal use”

    Yes they are my personal movies collection. No I am not interested on selling dvds and I am not gonna add any fuctionality for selling.

    # March 4, 2013 at 1:49 pm

    new quiz :)

    I created a new search function and looks like itunes, where as you type it searches the library and results are appended in a search-result window below the search-input. As you continue typing, you narrow down the results. It does the work but I again I was wondring if anyone has any better way to do this. Please have a look to the code [here](http://jsfiddle.net/cparliaros/sfwtc/4/ “”) and more specific to the search function.

    It’s a bit buggy, sometimes does not display all the results even if on the counting you can see it has all of them. If you start spelling again propably will fix, but usually works. The other bug which I cant fix is that seems has someproblem with number on the title, if you try search for movie “300” nothing will come, if you search for “2” there are gonna be few movies which include the number 2 in their title but not the movie “2012” which is only number. I have no idea why this is happening.

    # March 4, 2013 at 6:42 pm

    Try on line 95:

    if (movies.title.search(new RegExp(filter, “i”)) > -1) {

    # March 4, 2013 at 7:43 pm

    @BenWalker cheers mate, that fixed it!

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

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