» [WAPKA] Quote mở rộng giống xenforo |  Pham_loi
 Chức vụ:
14:18:31, 16-08-2016 |
Chào mọi người, comeback lần này hứa hẹn sẽ có nhiều điều thú vị gửi tới mọi người. Và để khởi động thì hôm nay xin share mọi người 1 mod nhỏ thôi đó là Quote expand giống xenforo cho wapka. Đó là khi nội dung quote quá dài thì sẽ giới hạn và click để xem toàn bộ nội dung quote.
See demo:
Cũng đơn giản thôi, hoạt động tốt trên các thiết bị hỗ trợ HTML5.
Đầu tiên, đó là CSS
.quote {
background: white;
border: 1px solid lightseagreen;
border-radius: 5px;
padding: 5px 10px;
font-size: 13px;
margin: 10px;
max-height: 200px;
overflow: hidden;
position: relative;
}
.quote2:after {
content: "Click to expand";
background: linear-gradient(transparent,lightseagreen);
width: 100%;
padding: 15px 0px;
position: absolute;
bottom: 0px;
left: 0px;
color: yellow;
text-align: center;
font-size: 15px;
cursor: pointer;
}
.quote:focus{
max-height:none;
}
.quote:focus:after{
display:none;
}
Copy code
background: white;
border: 1px solid lightseagreen;
border-radius: 5px;
padding: 5px 10px;
font-size: 13px;
margin: 10px;
max-height: 200px;
overflow: hidden;
position: relative;
}
.quote2:after {
content: "Click to expand";
background: linear-gradient(transparent,lightseagreen);
width: 100%;
padding: 15px 0px;
position: absolute;
bottom: 0px;
left: 0px;
color: yellow;
text-align: center;
font-size: 15px;
cursor: pointer;
}
.quote:focus{
max-height:none;
}
.quote:focus:after{
display:none;
}
Copy code
Lưu ý: Tag "quote" của bạn phải sử dụng class="quote", nếu không có thể tự sửa cho phù hợp
Cuối cùng, add code này ở site Bottom forum
<script language="javascript">
var qt=document.getElementsByClassName("quote");
for(var i=0;i<qt.length;i++){
x = qt[i.offsetHeight;
if(x>=200){
qt[i.classList.add('quote2');
qt[i.tabIndex = "0";
}
}
</script>
Copy code
var qt=document.getElementsByClassName("quote");
for(var i=0;i<qt.length;i++){
x = qt[i.offsetHeight;
if(x>=200){
qt[i.classList.add('quote2');
qt[i.tabIndex = "0";
}
}
</script>
Copy code
OK. Đó là tất cả. Chúc các bạn thành công!
View more: Share: Quote expand for Wapka - W.Code
WapkaInternational.Com
:
0 ♥