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.
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.
@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.
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 )
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.
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.
@CrocoDillon I have update the code on the 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?
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.
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?
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.
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('<img src="img/thumbnails/'+ id +'.jpg"/>');
$('.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();
});
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 :)
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, 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?
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 :(
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
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?
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();
}
});
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?
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.
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 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.
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
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! :)
@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.
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 )
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.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.
@CrocoDillon I have update the code on the 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?
It works nicely on my Firefox
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.
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.
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
inputinside the form and all I had to do was to replave theformwith a simpledivor you can includeonsubmit="return false;"inside theformtag.What the use actual of form by the way?What CrocoDillon suggests works fine in Chrome's console . . .
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.
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 loadEDIT: jsfiddle
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
.eachfunction, I got to remember that :)I did the changes you suggested jsFiddle is that you had in mind?
Close, you can move the
viewportvar 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 usingstartfromyou already know those covers are not loaded anyway. However you're settingstartfromto the index of the element in the sliced collection (you need to set it to the index of the element inelements+ 1, or just dostartfrom++;)I updated the jsFiddle, kept your var names to avoid confusion but they could be more descriptive...
viewportisn't really the viewport (no better suggestions though), andstartfromcould becoversLoadedor something instead (it's outside theloadCovers()function sostartfromcould 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 tothis.id, you happen to know if the latter got any compatibility issues or something?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 :(
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
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?
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 thestartfromvar 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.
You say above what it is, but not why it is:
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?
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.
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 and more specific to the
searchfunction.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.
Try on line 95:
@BenWalker cheers mate, that fixed it!