Search code examples
javascriptjqueryhtmlfancyboxhtml2canvas

why fancybox popup is appearing after second click on button?

Fancybox popup window is appearing after second click on the "capture me " button. The body part is not loaded for the first time. Also I move the script code section after button section. Samething appears.Tried with window.load function.Nothing change. Any suggestion for this.

I tried :

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }

        body {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
        <script type="text/javascript" src="html2canvas.js?rev032"></script> 
            <script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
        <script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
            <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
            <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <script type="text/javascript">
$(document).ready(
             function(){
                $('#inline').click(function() {
                alert("Hi");
                    html2canvas($('#testdiv'), {
                        onrendered: function (canvas) {
                            var img = canvas.toDataURL("image/png");
                            $('#image').attr('src', img).fadeIn(200);
                            $('a#inline').fancybox();
                            }
                    });

                });
            });
 </script>    
</head>
<body>  
<div id="testdiv">
   <h1>Testing</h1>
   <h4>One column:</h4>
   <table border="1">
     <tr>
       <td>100</td>
     </tr>
    </table>
    <br/>
</div>
<a href = '#showThisDiv' id='inline'><input type = "button" value = "Capture Me"></a>
<div style='display:none;'>
    <div id='showThisDiv' style='width:300px; height:300px;'>
        <img src="" id="image"/>
    </div>
</div>
</body>
</html>
Solution

  • This

    $('a#inline').fancybox();

    ... doesn't trigger fancybox, it just binds the selector #inline to fancybox but you still need to click on that selector to fire it; so if you do this

    $('#inline').click(function(){
    $('a#inline').fancybox();
});

    ... the first click only allows fancybox to be bound to #inline and only the second click will trigger it.

    What you could do is :

    $(document).ready(function () {
    $('#inline').click(function () {
        alert("Hi");
        html2canvas($('#testdiv'), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png");
                $('#image').attr('src', img).fadeIn(200);
            }
        });
    }).fancybox();
});