CODEWITHSUNDEEP
htmlscrollbareaseljs
sathya
sathya

Reputation: 87

Vertical scroll bar for canvas with dynamic added content in html5

I have a canvas with height of 480. I am using Easeljs to load images in canvas . Each row contains 3 images. The images loaded beyond the height of canvas(480) are hidden. I need to add vertical scrollbar to view those images. How can i implement this.

thanks,
sathya

Upvotes: 1

Views: 10301

Answers (3)

Razan Paul
Razan Paul

Reputation: 13838

wrap the canvas with a div, then set a height for the div, and finally apply overflow-y:auto and overflow-x: hidden property to the div.

overflow-y:auto shows the vertical scrollbar when needed overflow-x: hidden hides the horizontal scrollbar

http://jsfiddle.net/V92Gn/3509/

   <div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
      <canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
    </div>

Upvotes: 1

markE
markE

Reputation: 105015

Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<style>
body{ background-color: ivory; }
div, canvas {
    position:absolute;
}
.wrapper {
    top:10px;
    left:10px;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    margin:30px 0 2;
    overflow: hidden;
    background-color:green;
}
.vertical-scroll {
    left:320px;
    top:10px;
    border: 1px solid green;
    width: 20px;
    height: 300px;
}
.vertical-scroll div.bar {
    left:0px;
    top:0px;
    width: 20px;
    background-color: blue;
    height: 20px;
}
#mycanvas {
    left:0px;
    top:0px;
}

</style>

<script>
    $(function(){

        var canvas=document.getElementById("mycanvas");
        var ctx=canvas.getContext("2d");

        var wrapper;
        var canvasHeight;
        var vScrollHeight;
        var canvasWrapperHeight=300;

        $(".bar").draggable({
            containment: "parent"
        });

        $(".bar").on("drag", function (event, ui) {
            var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
            canvas.style.top = ctop + "px"
        });

        var img=new Image();
        img.onload=function(){
          canvas.width=this.width;
          canvas.height=this.height;
          canvasHeight=this.height;
          vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
          document.getElementById("vbar").style.height=vbarHeight+"px";
          ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
        }
        img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";

    }); // end $(function(){});
</script>

</head>

<body>
    <div class="wrapper" id="wrap1">
        <canvas id="mycanvas" width="300px" height="300px" />
    </div>
    <div class="vertical-scroll" id="vscroll">
        <div class="bar" id="vbar"></div>
    </div>
 </body>
</html>

Upvotes: 4

Olaf Horstmann
Olaf Horstmann

Reputation: 16882

I don't know about any ScrollBar-Solutions for EaselJS and it's not possible to do this via HTML. So you would have to code your own scrollbar, if you have trouble with that, there should be a quite a few tutorials for that to be found online for ActionScript3 you can easily adapt those for EaselJS.

Another option would be to extend the height of the canvas itself and add a scrollbar to it's parent container, I'm not sure though if that'd be a very good solution.

Upvotes: 0

Related Questions