<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="https://apkupdate.com/templates/default/assets/js/jquery.cookie.js"></script>
<script id="dsq-count-scr" src="//apkupdate.disqus.com/count.js" async></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<h2>Auto load comment disqus , not load if don't click and remember button </h2>
<p>credit by <a href="http://apkupdate.com"> APKupdate</a></p>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Reviews for APK At APKupdate.com
<div class="floatright"><span class="hidden-xs hidden-md">Auto Load Comment ? </span>
<div class="material-switch pull-right">
<input id="comment_load" name="comment_load" type="checkbox" />
<label for="comment_load" class="label-success"></label>
</div>
</div>
</div>
<div class="panel-body">
<button class="show-comments btn btn-default btn-lg btn-block"> View comments <span class="disqus-comment-count" data-disqus-url="http://apkupdate.com/">(0)</span></button>
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
/*material-design-switch*/
.material-switch > input[type="checkbox"] {
display: none;
}
.material-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch > label::before {
background: rgb(0, 0, 0);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position:absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px;
}
.material-switch > label::after {
background: rgb(255, 255, 255);
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px;
}
.floatright{
float: right;
}
var disqusFunction = function () {
var disqus_shortname = 'apkupdate';
// ajax request to load the disqus javascript
$.ajax({
type: "GET",
url: "https://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
};
$("#comment_load").change(function () {
if (this.checked) {
$.cookie("comment_load", "1", {expires: 365, path: '/'}); // Sample 1
$('.show-comments').fadeOut();
disqusFunction();
} else {
$.cookie("comment_load", "0", {expires: 365, path: '/'}); // Sample 1
}
});
if ($.cookie("comment_load") == "1") {
setTimeout(function () {
if (document.querySelector('.show-comments') !== null) {
$('#comment_load').prop('checked', true);
$('.show-comments').fadeOut();
disqusFunction();
}
}, 3000);
}
$('.show-comments').on('click', function () {
disqusFunction();
// hide the button once comments load
$(this).fadeOut();
});
