Я тестирую следующий фрагмент кода, чтобы реализовать его в своем проекте, который в основном предназначен для мобильных устройств. Мир переместился на мобильные, и я хочу сделать свое приложение максимально мобильным. Итак, прямо к сути, следующий код для INFINITE SCROLLING, который отлично работает на настольном компьютере, но не работает, когда я пытаюсь прямо с моего мобильного телефона (Redmi Note 7 Pro - то, что я использую). Что показывает, что есть некоторый код, который не совместим с мобильными устройствами, и я попытался, но не смог выяснить, какой код является тем, который не позволяет бесконечной прокрутке работать на мобильных устройствах. Пожалуйста, помогите мне разобраться с исправлением кода для мобильных устройств.
Во-вторых, я использую немного кода, чтобы показать или скрыть текст в соответствии с количеством символов в абзаце. Это работало нормально, пока я не реализовал код бесконечной прокрутки и не переместил выборку записи цикла while на внешнюю страницу для работы через AJAX, после чего функция show или hide просто перестала работать. Кнопка Show more для раскрытия текста больше не активируется и, следовательно, больше не работает.
Вот коды.
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax Infinite scroll using jQuery - InfoTuts</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
#demoajax .data-container {
width: 700px;
margin:10px auto;
font-family:Tahoma,Arial,Verdana,sans-serif;
font-size:13px;
padding:4px;
border:1px solid #d1d1d1;
overflow:hidden;
}
#demoajax .data-container p {
width:200px;
padding: 8px;
float:left;
text-transform:capitalize;
}
#loading {
display:none;
position:fixed;
left:50%;
top:50%;
width: 40px;
height: 40px;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 55px;
}
.showContent {
line-height: 1em;
height: auto;
}
.showContent {
height: auto;
}
.show-more span {
cursor: pointer;
color: #27aae1;
}
.text-container {
padding: 10px;
background: #fff;
}
.text-container p {
line-height: 1.5;
}
</style>
</head>
<body>
<img id="loading" src="images/loader.gif" class="loading-image">
<div id="demoajax"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var ajax_arry=[];
var ajax_index =0;
var sctp = 100;
$(document).ready(function () {
$('#loading').show();
$.ajax({
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response){
$('#loading').hide();
$('#demoajax').html(response);
}
});
$(window).scroll(function(){
var height = $('#demoajax').height();
var scroll_top = $(this).scrollTop();
if(ajax_arry.length>0){
$('#loading').hide();
for(var i=0;i<ajax_arry.length;i++){
ajax_arry[i].abort();
}
}
var page = $('#demoajax').find('.nextpage').val();
var isload = $('#demoajax').find('.isload').val();
if (($(window).scrollTop() == $(document).height() - $(window).height()) && isload=='true'){
$('#loading').show();
setTimeout(function(){
var ajaxreq = $.ajax({
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page="+page,
cache: false,
success: function(response){
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
}
});
}, 1000);
ajax_arry[ajax_index++]= ajaxreq;
}
return false;
});
// Show More / Show Less Text in Paragraph
$('.content').each(function(k,v){
if($(v).text().length < 200){
$(v).removeClass('hideContent');
$(v).next().hide();
$(".content p").css('margin','0px 0px 5px');
}
});
$(".show-more span").click(function() {
var $this = $(this);
var $content = $this.parent().prev(".content");
var linkText = $this.text().toUpperCase();
if(linkText === "SHOW MORE"){
linkText = "Show less";
$content.toggleClass('hideContent showContent');
}else {
linkText = "Show more";
$content.toggleClass('showContent hideContent');
};
$this.text(linkText);
});
});
</script>
</body>
</html>
scroll.php
<?php
include('config/db.php');
$limit = 20;
$page = $_POST['page'];
if($page == 1){
$start = 0;
}else{
$start = ($page-1)*$limit;
}
$sql = $pdo->prepare("SELECT * FROM user_content ORDER BY uc_id DESC LIMIT $start, $limit");
$sql-> execute();
$sc = $sql->rowCount();
while($row = $sql->fetch()){
?>
<div class="data-container">
<p><?php echo $row['uc_id']; ?></p>
<div class="text-container">
<div class="content hideContent">
<p><?php echo $row['uc_desc']; ?></p>
</div>
<div class="show-more">
<span>Show more</span>
</div>
</div>
</div>
<?php } ?>
<input type="hidden" class="nextpage" value="<?php echo $page+1; ?>">
<input type="hidden" class="isload" value="<?php if($sc > 0){ echo "true"; }else{ echo "false"; } ?>">
Пожалуйста, помогите мне исправить эту ошибку. Любая помощь будет оценена.