How can I arrange for the mouse to be able to set the stage position on my timeline?

I have a very wide image. The stage can view only a portion of this image. I have set my timeline so that the stage begins at the left of the image and over ten seconds moves along the image to the end. Easy-Peasy.

Along the bottom of the stage I have a bar. What I want to do is to arrange for this bar to control the position of the stage over the image: in other words, arrange for the position of the cursor on the bar to determine where the stage is on the timeline.

From a tutorial I got a vague idea. I created a function in the compositionReady handler of the stage:

Symbol.bindElementAction(compId, symbolName, "document", "compositionReady",

function(sym, e) {

         // insert code to be run when the composition is fully loaded here

         this.onmove=function(posX, posY){

         var num=17;

         var timelinecontrol = Number(posX)*num;

         console.log(timelinecontrol); //to see what value is being passed

         sym.stop(timelinecontrol);

         }

Then, in a mousemove handler of the bar, I called the function (passing it the cursors position):

  Symbol.bindElementAction(compId, symbolName, "${_RedSliderBar}", "mousemove", function(sym, e) {

         // insert code to be run when the mouse is moved over the object

         this.onmove(e.pageX,e.pageY);

      });

This worked in a way but not accurately. So, after a bit of experimenting while observing the numbers I was getting in the console, I modified this by introducing a bias on the X coordinate:

  Symbol.bindElementAction(compId, symbolName, "${_RedSliderBar}", "mousemove", function(sym, e) {

         // insert code to be run when the mouse is moved over the object

         var anotherNum = 300;

         this.onmove(e.pageX -anotherNum,e.pageY);

      });

This was perfect: allowing me to control which part of the image the stage was viewing.

Then, I changed the screen size of my browser. This completely messed up my viewing control. It needs a responsive design.

Now the tragedy is that I didn’t really understand what I was doing. I was just using a “suck it and see” strategy. Consequently, I have no idea how to fix this problem to make it responsive to screen size.

Can somebody help please. Preferably, I’d like to understand how it works as well.

Peter Small