Click here to Skip to main content
14,384,553 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi Guys,

I'm currently developing a project but I have a problem. I'm trying to make the canvas responsive to when the browser is resized, yet I have a jQuery problem.

When I use the code below, the canvas draws what I included in the code behind but do not respond on resize.

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript">
        $(document).ready(function () {


            //Get the canvas & context 
            var c = $('#myCanvas');
            var ct = c.get(0).getContext('2d');
            var container = $(c).parent();

            //Run function when browser resizes
            $(window).resize(respondCanvas);

            function respondCanvas() {
                c.attr('width', $(container).width()); //max width
                //c.attr('height', $(container).height() ); //max height

                //Call a function to redraw other content (texts, images etc)
                $.ajax({
                    type: "POST",
                    url: "Test.aspx/ResizeCanvas",
                    data: JSON.stringify({ width: $(container).width() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        eval(data.d);
                    },
                    error: function (msg) {
                        alert(msg);
                    }
                });
            }

            //Initial call 
            respondCanvas();

        }); 
        </script>


And then, when I use the code below, the canvas resizes when the browser is resized, but does not draw anything.

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function () {


           //Get the canvas & context
           var c = $('#myCanvas');
           var ct = c.get(0).getContext('2d');
           var container = $(c).parent();

           //Run function when browser resizes
           $(window).resize(respondCanvas);

           function respondCanvas() {
               c.attr('width', $(container).width()); //max width
               //c.attr('height', $(container).height() ); //max height

               //Call a function to redraw other content (texts, images etc)
               $.ajax({
                   type: "POST",
                   url: "Test.aspx/ResizeCanvas",
                   data: JSON.stringify({ width: $(container).width() }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       eval(data.d);
                   },
                   error: function (msg) {
                       alert(msg);
                   }
               });
           }

           //Initial call
           respondCanvas();

       });
       </script>


Basically the difference between the two is the

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>


It resizes when the jQuery is not put in that script reference and when the jQuery in in that reference, it does not resize but it draws.

Any help would be much appreciated!
Thank you in advance.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100