jQuery Forum

1. <div id='related'>
2. <ul>
3. <li id='rel1'><div/></li>
4. <li id='rel2'><div/></li>
5. <li id='rel3'><div/></li>
6. <li id='rel4'><div/></li>
7. <li id='rel5'><div/></li>
8. </ul>

1. $(function(){
2. arr = " postNumberID   postNumberID   postNumberID  ...".split(" ");
3. 
   
5.     var post1 = arr[Math.floor(Math.random() * arr.length)];
6.     var post2 = arr[Math.floor(Math.random() * arr.length)];
7.     var post3 = arr[Math.floor(Math.random() * arr.length)];
8.     var post4 = arr[Math.floor(Math.random() * arr.length)];
9.     var post5 = arr[Math.floor(Math.random() * arr.length)];
10.     $("#rel1>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post1);
11.     $("#rel2>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post2);
12.     $("#rel3>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post3);
13.     $("#rel4>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post4);
14.     $("#rel5>div").load("http://www.leitecompera.com/p/saasdfasdf.html #" + post5);
15. 
    
16. //this will make sure something has been loaded
17. 
    
18. check = setInterval(function () {
19.         $("#relacionados li").each(function () {
20.             $this = $(this);
21.             var c = $this.find(".thumbrel").size();
22.             if (c != 1) {
23.                 var b = arr[Math.floor(Math.random() * arr.length)];
24.                 $this.find("div:first").load("http://www.leitecompera.com/p/saasdfasdf.html #" + b)
25.             }
26.         });
27.         var a = $("#related").find(".thumbrel").size();
28.         if (a == 5) {
29.             window.clearInterval(check)
30.         }
31.     }, 2000);
32. 
    
33. //3D effect
34. 
    
35. $("#related li>div").hover(function () {
36.         $(this).stop().animate({
37.             width: 130,
38.             height: 190
39.         })
40.     }, function () {
41.         $(this).stop().animate({
42.             width: 114,
43.             height: 172
44.         })
45.     }); 
46. }):

1. <div id='navegador'>
2.       <input type="button" id="pp"/>
3.       <input type="button" id="pa"/>
4.       <div id='filtrar'>
5.             <div id='carregar'></div>
6.       </div>
7. </div>
8. <center>
9.       <div id='tela'>
10.             <img id='temp' height='410' src='http://dl.dropbox.com/u/30523456/Blog/tela.gif' width='544'/>
11.       </div>
12. </center>

2. $(function(){
3.       $('#carregar').load('http://www.leitecompera.com/search/label/troll face #post', function(){ //load posts
4.              $('#carregar .post_footer,.post_info,.post_author,div[style="position:relative"],.post-header-line-1').remove(); //remove trash
5.              $('#carregar #post').each(function(){ //get what is important
6.              $('h2.tit>a', this).appendTo($(this).parents('#filtrar'));
7.             $('.entry>center>img', this).appendTo($(this).parents('#filtrar'));
8. });
9. $('#filtrar a').each(function(){ //arrange and make it more editable
10.        $(this).html('<span>'+$(this).text()+'</span>')
11.       $(this).next('img').appendTo(this)
12.        $('span',this).css('marginTop',$('img',this).height()-$('span',this).height()-6);
13. });
14. $('#carregar').remove(); //remove more trash
15. $('#filtrar a').bind('click', function(e){ //loads post-image on click
16.        e.preventDefault();
17.        $('#temp').remove(); //remover holder
18.        var source = $('img', this).attr('src'); //get post-image source
19.        $('#tela').append('<div id="temp"><img src="' + source + '"/></div>') //creat post-image within holder
20. });
21. });
22. }); 

It load a bough of ugly html which contains all posts from a label to "#carregar" and them get's what is important using .appendTo("#filtrado") and make it more editable with some "<span>" and delete "#carregado" leaving what i want and them a code to fire when the user clicks a post.

This code will get the post-image source and creat a holder and a image in "#tela" displaying the whole image. If other post is clicked the holder is deleted leaving "#tela" empty so the process may restart.

As it is started project only some posts are loaded so far, but in the future it can get tricky and slow to load. Therefore i want to load 8 posts on pageload and plus 4 every time the user clicks '#pp' and i have no idea what would be the right way to do this.

The code-line which is currently loading the posts is in red.

Please help.

1. <div id='blogposts'>
2.       <div class='post' id='post'>
3.        <div class='post' id='post'>
4.       ...
5.        <div class='post' id='post'>
6.             <div class='post_top'>
7.             <div class='entry'>
8.             <div class='post_footer'>
9.                   <input type="button" class='showPlus'/>
10.                   <div class="pluscontent"><input type="button" class='hidePlus'</div>
11.             </div>
12.       </div>
13. </div>

2. $('.showPlus ').click(function(){
3. $('. showPlus,.pluscontent').toggle("slow");
4. });
5. $('.hidePlus').click(function(){
6. $('. showPlus,.pluscontent').toggle("slow");
7. });