Ограничение показов блоков на 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();
?>

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

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

	Ограничение показов блоков на jquery 01.02.2013, 00:24. Показов 1286. Ответов 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