Highlighted

Dragging works on browser, not on touchscreen

New Here ,
Apr 29, 2020

Copy link to clipboard

Copied

I've been working on a demo of an interactive "timeline" for a client. I'm very new to HTML5 Canvas and have been pulling the functionality together through folks here and around the internet.

The problem is that the user should be able to touch the timeline and drag it along to see events. It works OK on a browser, but the dragging does NOT work on a touch screen - which is ultimately how this project will be viewed.

Here is the demo currently. As you can see, you can click the timeline and drag it along.
https://dev.northeastcolor.com/PFTimeline/Timeline042720.html

Here is my code. Any help is much appreciated.

 

var that = this;
var pages;

that.start = function ()

{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	
	pages = that.timeline1;
	pages.on("mousedown",that.mouseDownHandler);
	
}

that.mouseDownHandler = function(e)
{
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	pages.on("pressmove",that.pressMoveHandler);	
	};
	
that.pressMoveHandler = function(e)
	{
		e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
	};
setTimeout(that.start,0);
	
that.timeline1.TL96.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.timeline1.TL96b.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.movieClip_1.on('click', function(){
that.movieClip_1.visible = false;
	that.darken1.visible = false;
});

 

 

TOPICS
ActionScript, Code

Views

194

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dragging works on browser, not on touchscreen

New Here ,
Apr 29, 2020

Copy link to clipboard

Copied

I've been working on a demo of an interactive "timeline" for a client. I'm very new to HTML5 Canvas and have been pulling the functionality together through folks here and around the internet.

The problem is that the user should be able to touch the timeline and drag it along to see events. It works OK on a browser, but the dragging does NOT work on a touch screen - which is ultimately how this project will be viewed.

Here is the demo currently. As you can see, you can click the timeline and drag it along.
https://dev.northeastcolor.com/PFTimeline/Timeline042720.html

Here is my code. Any help is much appreciated.

 

var that = this;
var pages;

that.start = function ()

{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	
	pages = that.timeline1;
	pages.on("mousedown",that.mouseDownHandler);
	
}

that.mouseDownHandler = function(e)
{
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	pages.on("pressmove",that.pressMoveHandler);	
	};
	
that.pressMoveHandler = function(e)
	{
		e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
	};
setTimeout(that.start,0);
	
that.timeline1.TL96.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.timeline1.TL96b.on('click', function(){
that.movieClip_1.visible = true;
that.darken1.visible = true;
});

that.movieClip_1.on('click', function(){
that.movieClip_1.visible = false;
	that.darken1.visible = false;
});

 

 

TOPICS
ActionScript, Code

Views

195

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 29, 2020 0

Have something to add?

Join the conversation