ugrás a tartalomhoz

mCustomScrollbar probléma

cszlak · 2014. Ápr. 16. (Sze), 08.37
Sziasztok

Olyan problémám lenne, hogy az oldalamon van egy mCustomScrollbar ami görgeti a tartalmat. (Maga az oldal nem gördül, csak a benne lévő tartalom!!)
Szeretnék bele rakni egy AJAX-ot, de nem tudom, hogyan kell.

Teszt.php

<!doctype html>
<html><head></head> <body>
 <div id="content">
<div id="blog_left" class="blog_content">

<div id="blog_box">
 <div class="blog_date">    <h1>11</h1>
    <h3>April</h3>
    <h2>2014</h2>    
    </div>

<!-- Ez persze  többször -->
  <div class="blog_text">
  <h1>new website</h1>
  <h2>Category:  news</h2>
    <img src="image/blog_news1.png" width="552" /> 
    <p>Flagler Data<a href="" target="_blank">I want to know more ...</a>
    </p>   
</div>


 <div id="blog_box" class="infinite-item  infinite-container">
 <p class="info">Scroll percentage: <span class="scroll-pct"></span></p>
    <a href="other.php" class="infinite-more-link">More</a>

</div>
  
</div>


<script>
		(function($){
			
			$(window).load(function(){
				var totalScrollOffsetH=$(".totalScrollOffset").height();
				$("#blog_left").mCustomScrollbar({
					scrollButtons:{	enable:true	},
					callbacks:{
						whileScrolling:function(){ WhileScrolling(); }, 
						onTotalScroll:function(){
							appendTextOnTotalScroll();
						},
						onTotalScrollOffset:totalScrollOffsetH
					}
				
				}); 
				
				<?php if(isset($_GET['kiir'])){  ?>
				  var szam = (<?php echo $_GET['kiir']; ?>-1)*200;				  
				$("#blog_left").mCustomScrollbar("scrollTo",szam);
				<?php } ?>
			
			function WhileScrolling(){
				$(".info .scroll-pct").text(mcs.topPct+"%");
				}
				
			function appendTextOnTotalScroll(){
					var c=$("#blog_left").find(".mCSB_container #blog_box:last");

// ez helyett kellene az ajax ->
					var h='<div id="blog_box"><div class="blog_date"><h1>12</h1><h3>April</h3><h2>2013</h2></div><div class="blog_text"><h1>new website Teszt</h1><h2>Category: Apple, apple, apple</h2> <img src="image/blog_news1.png" width="552" /><p>Flagler Data 4    <a href="" target="_blank">I want to know more ...</a></p></div><img src="image/blog_line.png" width="608" height="1" /></div>';
					c.after(h);
					$("#blog_left").mCustomScrollbar("update");
				}
// Ezt kellene valahogy bele rakni.
$.ajax({
                          type:"POST", 
                          url: "other.php", 
                          data: "id=" + id + "&pkat=" + pkat, 
                          success: function(response){
                           $('.infinite-container').append(response);
                                                        $('.infinite-container').listview('refresh'); 
                          }
                          });
			
			});
		
		})(jQuery);
              


	</script>
 </div> 
</body>
</html>
Ez lenne az ajax fájl.
Other.php

<?
 print_r($_GET); 
 print_r($_POST); 

 ?>
 <h1>new website 5</h1>
  <h2>Category: news</h2>
    <img src="image/blog_news1.png" width="552" /> 
    <p>Flagler Data <a href="" target="_blank">I want to know more ...</a>
    </p>
Kérdésm: Hogyan kell összehozni a mCustomScrollbar-ba beleépíteni egy Ajax fájl betöltőt.

Előre is köszönöm a válaszokat.
‹ reCaptcha modal windowban Adott pontra ugrás egy oldalon belül ›
 ■
1

AJAX

Poetro · 2014. Ápr. 16. (Sze), 10.43
A tartalmat gondolom a whileScrolling közben akarod betölteni AJAX-szal, tehát abban kell megfelelő feltételek esetén AJAX-szal a betölteni, majd meg kell hívni egy update-et a mCustomScrollbar-on ($("#blog_left").mCustomScrollbar("update");).
2

Oké de hogy?

cszlak · 2014. Ápr. 16. (Sze), 11.10
Ez a kérdésem!

ezzel próbálkoztam:

c.after(function(){					
					  /*$.ajax({
                          type:"POST", 
                          url: "other.php", 
                          data: "id=0&pkat=0", 
                          success: function(response){
                            $('.infinite-container').append(response);
                            $('.infinite-more-link').waypoint(opts);
                             $('.infinite-container').listview('refresh'); 
                          }
                          }); */
						  
						 c.load( "other.php?id=1" );  
					});
Ez betölti a tartalmat, de csak egyet.
És hogyan lehet neki paramétert adni, úgy mint az ajaxnál a 'date:'.
A ?id=1 nem működik.

Te erre gondoltál??:

function WhileScrolling(){
				$(".info .scroll-pct").text(mcs.topPct+"%");
				}
Itt a 'mcs.topPct' megadja hol tart a görgetés, de hogyan tudom neki megadni, hogy mikkor 90%.nál jár töltse be az ajax -al a következőt, majd újra és ujra, így hogy közben paraméterként átadja, hol is tart a betöltést az adatbázisból??