Grow your CSS skills. Land your dream job.

iMDb – Personal Movies Database webapp – test drive

  • # February 26, 2013 at 12:50 pm

    here I is my first 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. It is not complete, missing navbar with filters and search. But I would like you to test it and report here bugs and possible fixs. There are some known issue that I am working on. The code is open, you can use developer tools.

    Work only in chrome and safari!

    [iMDb](http://cparliaros.com/imdb/ “”)

    # February 26, 2013 at 4:22 pm

    When I open the page it shows 15 items which span 3 rows, which is not enough for a scrollbar to appear, no additional items get loaded. Only way to get more items to load is by clicking one of those 15, and then scroll down. I’d call that a bug :P Imagine some one on an even larger screen, where no scrollbar appears even after clicking an item.

    I didn’t see that coming either while working in codepen.

    Other then that, it looks awesome! :)

    # February 26, 2013 at 6:28 pm

    @CrocoDillon thanks for your help one more time. There few others bug, one you can see very easy is on the ratingMeter plugin which I builded first. At that time I was using a single movie id and there was no problems but now with many of them on after the other I can see few problems. First when you select a movie and then select another on the same row, it does not reset width and color (I tried to add a reset unsuccessfully-you have to close the info) but it takes the value from the previous movie as initial which is not that bad actually but in that case I should avoid to fadeOut and then fadeIn the ratingMeter container and that means I have to change the css of the info. Then the most bold bug is that for some reason when you use 4-5 times the ratingMeter, the counting freezes in some wrong number but the progress-bar keeps working.

    I think I can fix the problem you mention by taking info for user’s screen size before set the limit. Also I am gonna add content-rating based on the user’s country.

    # February 26, 2013 at 6:53 pm

    If you want to fix the first bug you can remove the transition because you have no control over that and add the animation using jQuery.

    Second bug… yeah ouch! I’ll have to take my time to look into that, but I need sleep now.

    No need to increase the limit, just keep loading elements till there is a scrollbar (something like comparing document? height to window? height??? :P )

    # February 26, 2013 at 7:15 pm

    Second bug, definitely maybe something with clearing your interval at line 431… your interval id is added to global scope. What happens when another interval starts while one is still running? The interval id gets overwritten so there is no way to stop the running interval. I think that’s the problem here.

    You need a way to stop any running intervals before starting a new one. And add var, `var interval = …`, it’s always a good practice to not pollute global scope.

    # February 26, 2013 at 7:51 pm

    You are right again, that totally fixed this problem. :) As I said the ratingMeter was the first javascript code that I wrote and maybe is too messy, I never checked the code again before add it to the final js file.

    # March 1, 2013 at 11:20 am

    @CrocoDillon I have update the code on the [iMDb](http://cparliaros.com/imdb/ “”) and now you can search through loaded movies, even if you load more the search will update to include them. Just one question, does anyone know how to disable the enter function from the text input which makes the page to reload?

    # March 1, 2013 at 11:34 am

    It works nicely on my Firefox

    # March 1, 2013 at 11:43 am

    really? all the transition and shadows I have used are just for webkit broswer like chrome and safari, I just tested and it works without these properties. I may add them later.

    # March 1, 2013 at 1:07 pm

    Hey, I’ll have a look tonight. Meanwhile… my first guess is hook up an event listener to that form’s submit event and prevent default behavior.

    # March 1, 2013 at 2:42 pm

    I did that but doesn’t work. I had something like when keycode (enter code) is down return false.

    EDIT: I fixed it, I had the input inside the form and all I had to do was to replave the form with a simple div or you can include onsubmit="return false;" inside the form tag.What the use actual of form by the way?

    # March 1, 2013 at 2:51 pm

    What CrocoDillon suggests works fine in Chrome’s console . . .

    $(‘#title-search-form’).submit(function(e) {
    e.preventDefault();
    });

    # March 1, 2013 at 5:08 pm

    I don’t like inline JavaScript, feels like inline styles to me :P

    One issue I found by the way is that if you use the search till the scroll bar disappears you can’t get more movies to load (same issue as before).

    Another issue is that if that scroll bar disappears and you click a movie to get that scroll bar back (to load more movies), everything goes fubar, try clicking around a bit.

    # March 2, 2013 at 2:07 pm

    I have decide that I dont like the loadMoreMovies as scroll down functionality inside the code for many reason but the most important was that when I am searching the library I want all the movies to be there as in itunes.

    I created a backup copy and I start rebuilding the code from the top, I will keep most of the old function but as I want to take out this functionality I have to put one by one the rest functions back and make sure that everything works.

    So I got out the scroll load but I created a new fuctionality. Now when you load the page, all the movie-elements append inside the movies-cointainer but without images. Then only the elements inside the window will load their images and as you scroll down more images will load. This way I keep the speed boost from the old function as the loading of the images was the main problem. I have the code of the new function, works fine but I am wondreing if it is possible to be more simple or efficient:


    loadCovers(); // initial load

    function loadCovers() {
    //for each element/movie
    $(".element").each(function(){
    // if element inside the window and if has no cover already
    if ( $(this).position().top < $('#main-container').scrollTop() + $(window).height() ) {
    if ( $(this).children('.cover').children().length == 0 ) {
    var id = $(this).attr('id'); //get its id and use it to load the image
    $(this).children('.cover').append('');
    $('.cover img').load(function() { $(this).css("opacity","1"); });
    }
    // when reach the first element out of the window break the forloop
    } else { return false; }
    });
    }

    $('#main-container').scroll(function() {
    loadCovers();
    });

    EDIT:
    [jsfiddle](http://jsfiddle.net/cparliaros/7QmWr/1/ “”)

    # March 2, 2013 at 5:30 pm

    Again I would keep a var (outside the loadCovers function) of all the elements so you don’t need the jQuery selector in the function (which gets called a lot if you scroll fast I think), and a var to keep track of how many images are already loaded so you won’t need to iterate over the whole list each time (or the index of the next element to load the image for, which is the same as how many images are already loaded anyway). That would be cleaner and easier to read then `if ( $(this).children(‘.cover’).children().length == 0 )`

    You might also consider to keep things that won’t change inside the function as a var, so you don’t need to calculate the same number for again and again. Like `$(‘#main-container’).scrollTop() + $(window).height()`

    And also bind the function to the resize event, because that could reveal unloaded images as well.

    Didn’t know you can break out of the `.each` function, I got to remember that :)

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

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