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

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

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

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

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

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

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

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

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

@senya_wtf · 01.02.2013, 11:36

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

JavaScript
1
2
3
4
5
6
БЛОК_С_Прокруткой.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
1
2
3
4
5
6
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<?
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();
?>

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@nevai 2 / 2 / 1 Регистрация: 18.01.2013 Сообщений: 34

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

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

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

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