Bootstrap Snippet Auto load comment disqus using HTML CSS Javascript

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
/*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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
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();
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Auto load comment disqus"
Bootstrap 3.3.0 Snippet by Thomanphan

Related: See More

Questions / Comments:

"Auto load comment disqus" Bootstrap 3.3.0 Snippet by Thomanphan

Related: See More

Questions / Comments:

"Auto load comment disqus"
Bootstrap 3.3.0 Snippet by Thomanphan