Bootstrap Snippet Follow Button using HTML 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
<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 ---------->
<div class="container">
    <div class="row">
        <div class="div-follow">
    <h4 class="lightweight jobs-rss">
        <i class="fa fa-rss"></i>
        <a target="_blank" class="invilink" href="/jobfeeds/seventechnology">Jobs RSS Feed</a>
    </h4>
    <form class="form-inline form-follow" role="form" action="/follow_client/" method="post" style="display:none;">
        <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="pnzWep0xyS0Xgi43LLvncs2jm3bac0Cq"></div>
        <div class="form-group">
            <label class="sr-only" for="follow_email">Email address</label>
            <input type="email" name="email" class="form-control" id="follow_email" placeholder="Enter your Email" required="required">
            <input type="hidden" name="client" required="required" value="u0dht">
        </div>
        <button type="submit" class="btn btn-default btn-follow-submit">Submit & Follow</button>
        <br><span class="form-follow-error" style="display:none;"></span>
    </form>
    <a data-original-title="Get email updates for new jobs at Seven Technology." data-placement="bottom" data-toggle="tooltip" class="btn btn-default btn-follow js-btn-follow" href="#">Follow</a>
</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
 $( function() {
        $( '.div-follow .btn-follow' ).on('click', function(e){
            e.preventDefault();
            div_follow = $(this).parents().find('.div-follow')[0];
            form_follow = $(div_follow).find('.form-follow')[0];
            $(this).animate({
                    'width':'0',
                    'padding-left':'toggle',
                    'padding-right':'toggle'
                }, function(){
                    $(this).hide();
                    $(form_follow).show();
                    $(form_follow).find('input[type=email]').focus();
                }
            );
        });
        $('[data-loading-text]').button();
        $('[data-loading-text]').on('click', function(){
            $(this).button('loading');
        });
        $('.btn-follow').tooltip();
        follow_div = $('.div-follow');
        follow_form = $('.form-follow');
        form_follow_error = $('.form-follow-error')
        follow_form.submit(function(e){
            $.ajax({
                url: follow_form.attr('action'),
                type: follow_form.attr('method'),
                data: follow_form.serialize(),
                dataType: 'json'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Follow Button"
Bootstrap 3.3.0 Snippet by MTaqi

Related: See More

Questions / Comments:

"Follow Button" Bootstrap 3.3.0 Snippet by MTaqi

Related: See More

Questions / Comments:

"Follow Button"
Bootstrap 3.3.0 Snippet by MTaqi