滚动按钮在jQuery中不起作用

Question

I'm developing a timeline application like this .

For that purpose I created two buttons to scroll left and right. I had wrote this code in jQuery, but it is not working.

Here is my code:

<script>
        var ctx=document.getElementById('myCanvas').getContext('2d');       
        var years=1,hline =5;

    ctx.strokeStyle = "#7A7A52";    
    ctx.lineWidth = 1;

//Scale
ctx.fillStyle="white";
ctx.fillRect(0,150,1350,50);
var startYr=1890;
    do{
        ctx.beginPath();
        ctx.moveTo(hline,150);
        ctx.lineTo(hline,173);
        ctx.stroke();
            ctx.font = "12px Arial";
            ctx.fillStyle="#7A7A52";    
            ctx.fillText (startYr, hline-15, 190);  

        for (var i=0;i<10;i++)
        {
            ctx.moveTo(hline,150);
            ctx.lineTo(hline,160);
            ctx.stroke();
            hline = hline + 6;
        }
        years = years+10;
        startYr = startYr +10;
 }while(years<=1000);
//ScaleEnd
var i=0;
 $(".right").click(function(){
  $("#myCanvas").scrollLeft(i+=100);    
  });
 $(".left").click(function(){
  $("#myCanvas").scrollLeft(i-=100);    
  });

and my CSS code is:

#myCanvas
    {
        background-color: #C2C2BB;
        margin-left: 180px;
        overflow: hidden;
    }

But .right and .left buttons are not scrolling. Please suggest me wht i'm doing wrong!

Answer 1

First of all look into your javascript console for errors. If there aren't any errors, then it's okay. Secondly, you could post your code somewhere on the web, that we could test it. This would help us to answer your question. Third, as I see you have posted a javascript code, however, you haven't closed it with </script> tag. And the most important part: from my opinion you are doing it wrong, you shouldn't echo your all application on canvas element, try to use seperated div's, like the timeline.js. It would be much easier and better. Try to make a main div with fixed width, set the overflow to none and place some extra div's on that main div. For example:

<div id='timeline'> 
  <div id='first-event'></div>
  <div id='second-event'></div>
</div>

Then use jQuery function scrollTo, to scroll through your main div with arrows.