1

I'm using firefox 50.1.0 when I add fadeout or fadein jquery functions the twitter share button doesn't show up. The iframe is getting loaded but the button is not showing up. The button works fine in all browsers except FIREFOX. This my fiddle https://jsfiddle.net/trvh8r12/

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

</head>
<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
                <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
            <div class="row">
                    <div class="col-md-12 text-center message-color">
                            <h1>Congrats !!!!!....</h1>
                    </div>
                    <div class="col-md-12 text-align" style="display:block !important;">
                                <div class="gap"></div>

                        <a href="https://twitter.com/share" class="twitter-share-button btn-icon" data-text=" "
                     data-show-count="false"><i class="btn-icon"></i></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                 </div>
            </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script>
            $(document).ready(function(){
                    $('#message-id').hide();
                    $('#btn-submit').click(function(){
                            $('#message-id').fadeIn(2000);
                            $('#form-puzzle').fadeOut(2000);
                    });
            });
    </script>
</body>
</html>
Ishwar Deoolkar
  • 10
  • 6
Manoj Kadolkar
  • 717
  • 8
  • 22

1 Answers1

1

Generally, Keep your script references in the Head not the body. You need to include jQuery, Bootstrap css and Bootstrap js correctly to use it. This works by getting the widget script on click and then scanning the dom for the div with the widget code to execute solving the async problem with Firefox.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> Code Integration Close
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Home</title>
</head>

<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
            <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
        <div class="row">
            <div class="col-md-12 text-center message-color">
                <h1>Congrats !!!!!....</h1>
            </div>
            <div class="col-md-12 text-align" style="display:block !important;">
                <div class="gap"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#message-id').hide();
            $('#btn-submit').click(function() {
                $.getScript("https://platform.twitter.com/widgets.js")
                    .done(function() {
                        $('#message-id').show(function() {
                            $('#form-puzzle').fadeOut(2000);
                            twttr.widgets.load(
                                document.getElementById("#message-id")
                            );
                        });
                    })
            });
        });
    </script>

</body>

</html>
Ray Koren
  • 814
  • 14
  • 25
  • Could you expand on wht the code you've supplied solves the problem? – Tom Jan 03 '17 at 16:34
  • @ManojKadolkar I updated it to do it all for you. I just tested this. When you hit submit the Twitter button shows. – Ray Koren Jan 03 '17 at 18:34
  • twttr.widgets.load(); if this fucntion is before the $('#message-id').hide(); in the doc ready function it will load, but not be hidden. I am still hacking away at it. – Ray Koren Jan 03 '17 at 20:14