iMDb – Personal Movies Database webapp – test drive

[cparliaros]

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/ “”)

[cparliaros]

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

[cparliaros]

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.

[cparliaros]

@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?

[apart]

It works nicely on my Firefox

[cparliaros]

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.

[cparliaros]

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?

[cparliaros]

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/ “”)

[cparliaros]

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

[apart]

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

[cparliaros]

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();
}
});

[cparliaros]

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.

[cparliaros]

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.

[cparliaros]

@BenWalker cheers mate, that fixed it!

[Author]

Posts