[英]Expand the div to “read more”
I come across a problem in my site to which I am finding a solution. 我在我的网站上遇到了一个问题,我正在寻找解决方案。 Posts are fetched from the MySQL database.
帖子是从MySQL数据库中提取的。 If it contains a few lines,it is displayed completely.But,if it contains too many lines (thus taking more space on the browser screen),then I want it to be displayed as a single line followed by dots (for example, your too long posts....) with a "see more" option by clicking which the entire post is displayed (as seen in facebook,twitter etc).
如果它包含几行,则会完全显示。但是,如果它包含太多行(从而在浏览器屏幕上占用更多空间),那么我希望它显示为单行后跟点(例如,您的太长的帖子....)通过点击显示整个帖子的“看到更多”选项(如在facebook,twitter等中所见)。 Is it a client-side solution by javascript or jquery or can be handled server-side by PHP.
它是javascript或jquery的客户端解决方案,还是PHP可以在服务器端处理的。 Your advice is much appreciated!
非常感谢您的建议!
The entire post is fetched from MySQL and I straightway echo it: 整个帖子都是从MySQL获取的,我直接回应它:
<?php
//code
while($row=mysql_fetch_array($result))
{
echo $row['posts'];
}
?>
At this moment I simply fetch the entire post from database and echo it.I want here a javascript solution to do the rest. 此时我只是从数据库中获取整个帖子并回显它。我想在这里使用javascript解决方案来完成剩下的工作。
You can do it with jquery :- 你可以用jquery做到: -
<div class="columns">
your text goes here. Try long text here....
</div>
a.morelink {
text-decoration: none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
<script>
var showChar = 120;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$(".columns").each(function () {
var content = $(this).html();
if (content.length > showChar) {
var first = content.substr(0, showChar);
var second = content.substr(showChar - 1, content.length - showChar);
var html = first + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + second + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
</script>
HTML & PHP : HTML和PHP :
<?php
$text = '. . .';
$limit = 100;
?>
<div class="text">
<?php
if (strlen($text) < $limit) {
echo $text;
} else {
echo substr($text, 0 , $limit);
echo "<br/><a href='#' onclick='showMore()'>read more</a>";
}
?>
</div>
jQuery : jQuery :
<script>
function showMore() {
var text = '<?php echo $text; ?>'
$(".text").html(text);
}
</script>
you can try this. 你可以试试这个。
<?php
$str = 'simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's';
$limit = 40;
if(strlen($str)>$limit){
$stringCut = substr($str, 0, $limit);
$serRpos = strrpos($stringCut, ' ');
$first_part = substr(substr($str, 0, $limit), 0,$serRpos);
$last_part = substr($str,$serRpos);
echo $first_part;
echo '<span style="cursor: pointer" onclick="showText(this)"> ...<span class="hide-text" style="display: none;">'.$last_part.'</span></span>';
}
else{
echo $str;
}
?>
and the script(i used jquery) 和脚本(我使用jquery)
<script type="text/javascript">
function showText(e){
$(e).html($(e).find('.hide-text').html());
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.