Ограничение показов блоков на jquery

@nevai · Регистрация: 18.01.2013

Author24 — интернет-сервис помощи студентам

Добрый вечер! Такое задание передомно стало, что не могу сам реализовать. Прошу помощи.

Есть значит на сайте заметки, а к ним комментарии. Комменты расположены в блоках див.

Теперь постает вопрос, а если будет 100 комментов тогда страница розтянется сильно длинная.

Вот к примеру в вк там подгружается по мере прокрутки страници, или можно реализовать кнопкой все комментарии, только с jquery без перезагрузки страници.

Можно эт реализовать или нет? Вообще ума не приложу как сделать.

Ваши варианты?

@senya_wtf · 01.02.2013, 11:36

Можно все чего угодно. И бесконечную прокрутку и кнопку.
Второе проще, первое немного сложнее, но не более 50 строк)
Первое - ставишь маркер, вычисляешь его положение относительно ползунка прокрутки.

Javascript

БЛОК_С_Прокруткой.scroll(function(){ //вешаем событие прорутки скролла
                   if ( БЛОК_С_Прокруткой.height() >= $(МАРКЕР).position().top) { /если маркер появился в области видимости
                        БЛОК_С_Прокруткой.unbind('scroll'); //удаляем обработчик
                        getData(); //запускаем функцию получения данных с сервера                                                  
                    }  
                });

@nevai · 01.02.2013, 21:51 **[ТС]**

Извиняюсь за мою тупость а в маркер что прописать. Что-то я не совсем понял. Вот пример можно посмотреть в исходном коде как сделано на сайте http://aydar.pp.ua

Я только начинаю осваивать jquery

@senya_wtf · 01.02.2013, 22:17

Маркером может быть что угодно. К примеру <div>.
Суть в том, что нужно вычислить положение этого маркера относительно видимой области страницы.
Как только маркер появляется в области видимости, происходит установленное событие, догружается контент, маркер перемещается снова в самый низ страницы. И так до тех пор, пока будет нечего подгружать.

@nevai · 01.02.2013, 22:41 **[ТС]**

Сделал вот так вот

Javascript

post_div.scroll(function(){ //вешаем событие прорутки скролла
                   if (post_div.height() >= $('comment_style').position().top) { //если маркер появился в области видимости
                        post_div.unbind('scroll'); //удаляем обработчик
                        getData(); //запускаем функцию получения данных с сервера                                                  
                    }  
                });

Но ничего не происходит может ошибился где?

@senya_wtf · 01.02.2013, 22:44

Стоп стоп. Это же просто пример самого принципа)
А где же обработчик на сервере?

@nevai · 01.02.2013, 23:58 **[ТС]**

PHP

<?
include ("blocks/bd.php");
// Запрет на кэширование
header("Expires: Mon, 23 May 1995 02:00:00 GTM");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GTM");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//****
 
$log =="";
$error="no"; //флаг наличия ошибки
 
require_once 'JsHttpRequest.php';
$JsHttpRequest =& new JsHttpRequest("utf-8");
 
//Короткие имена переменных и обрезка пробелов img_title
$text = trim($_POST['text']);
$author = trim($_POST['author']);
$id = trim($_POST['id']);
 
//Проверка email адреса
 
if($author == ''){
    $log .= "Пожалуйста, введите Ваше имя<br>";
    $error = "yes";
}
 
 
//Проверка наличия введенного текста комментария
if (empty($text)){
    $log .= "Необходимо указать текст сообщения!<br>";
    $error = "yes";
}
else{
    //Должнен быть хоть один символ на русском языке
    $spam=1;  
 
    for($i=0;$i<strlen($text);$i++){
        if((ord($text[$i])>=192) && (ord($text[$i])<=255)){$spam=0;break;}
    }
 
    if ($spam == 1) {
        $log .= "Ваше сообщение не содержит ни одной русской буквы.<br>";
        $error = "yes";    
    } 
 
}
session_start();
if($_POST['kapcha'] != $_SESSION['rand_code'])
{ $log .= "Капча введена неверно!<br>";
$error = "yes";
}
 
//Проверка длины текста комментария
if(strlen($text)>1000){
    $log .= "Слишком длинный текст, в вашем распоряжении 1000 символов!<br>";
    $error = "yes";
}
     
//Проверка на наличие длинных слов
$mas = preg_split("/[\s]+/",$text);
foreach($mas as $index => $val){
    if (strlen($val)>40)  {
        $log .= "Слишком длинные слова (более 40 символов) в тексте записи!<br>";
        $error = "yes";
        break;
    }
}
    
//Экранирование и преобразование опасных символов
if (!get_magic_quotes_gpc()){
    $text = addslashes($text);
    $author = addslashes($author);
    $cod = addslashes($cod);
}
 
$text = htmlspecialchars($text);
$author = htmlspecialchars($author);
$cod = htmlspecialchars($cod);
//Если нет ошибок добавляем в базу  
 
if($error=="no"){
    $date = date("Y-m-d");
    $result2 = mysql_query("INSERT INTO comments (post,author,text,date) VALUES ('$id','$author','$text','$date')",$db);
    //**** Выводим комментарий на странице
    $ok="<div class='post_div'> <p class='post_comment_add'>Комментарий от: <strong>".$author." </strong><br /> Дата: <strong>".$date."</strong></p><div class='avatar_comments'><img src='img/nopic.jpg' /></div><br /><br /><span class='arrow-up'></span><div class='comment_style'><p>".$text."</p></div></div>";
    
    //Помещаем результат в массив
    $GLOBALS['_RESULT'] = array(
    'error' => 'no',
    'ok' => $ok
    );
 
}
else {//если ошибки есть
    $log = "<div><strong><font color='red'> Ошибка! </font></strong><br>".$log."</div>";
    //Отправляем результат в массив
    $GLOBALS['_RESULT'] = array(
    'error' => 'yes',      
    'er_mess' => $log);
}  
// отправим на почту
$address = "admin@aydar.pp.ua";
$subject = "Новый комментарий на блоге";
$result5 = mysql_query ("SELECT title FROM data WHERE id='$id'",$db);
$myrow5 = mysql_fetch_array ($result5);
$post_title = $myrow5["title"];
$message = "Появился комментарий к заметке - ".$post_title."\nКомментарий добавил(а): ".$author."\nТекст комментария: ".$text."\nСсылка на заметку: http://aydar.pp.ua/posts.php?id=".$id."";
mail($address,$subject,$message,"Content-type:text/plain; Charset=utf-8\r\n");
 
echo "<html><head>
<meta http-equiv='Refresh' content='0; URL=posts.php?id=$id'>
</head></html>";
exit();
?>

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
		1
	Ограничение показов блоков на jquery 01.02.2013, 00:24. Показов 1131. Ответов 6 Метки нет (Все метки) Добрый вечер! Такое задание передомно стало, что не могу сам реализовать. Прошу помощи. Есть значит на сайте заметки, а к ним комментарии. Комменты расположены в блоках див. Теперь постает вопрос, а если будет 100 комментов тогда страница розтянется сильно длинная. Вот к примеру в вк там подгружается по мере прокрутки страници, или можно реализовать кнопкой все комментарии, только с jquery без перезагрузки страници. Можно эт реализовать или нет? Вообще ума не приложу как сделать. Ваши варианты? 0

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34
	01.02.2013, 21:51 [ТС]	3
	Извиняюсь за мою тупость а в маркер что прописать. Что-то я не совсем понял. Вот пример можно посмотреть в исходном коде как сделано на сайте http://aydar.pp.ua Я только начинаю осваивать jquery 0

@senya_wtf 1 / 1 / 0 Регистрация: 01.02.2013 Сообщений: 17
	01.02.2013, 22:17	4
	Маркером может быть что угодно. К примеру <div>. Суть в том, что нужно вычислить положение этого маркера относительно видимой области страницы. Как только маркер появляется в области видимости, происходит установленное событие, догружается контент, маркер перемещается снова в самый низ страницы. И так до тех пор, пока будет нечего подгружать. 0

@senya_wtf 1 / 1 / 0 Регистрация: 01.02.2013 Сообщений: 17
	01.02.2013, 22:44	6
	Стоп стоп. Это же просто пример самого принципа) А где же обработчик на сервере? 0

	01.02.2013, 23:58