How to make a button work when touched using p5 code - javascript

I am making a game. In this a button goes to the next screen say from home screen to battle screen when clicked using a mouse.It works on computer/desktop but not on touchscreen device like mobile or tab.How do I make it work on touch screen devices ??? (It would be helpful if the answer is in p5 code, javascript or html). I can't afford to create button using HTML.
Currents I am using:
If(mousePressedOver(button)) {
gamesSate = "BATTLE";
battleScreen();
}
In above code battleScreen(); I am calling a function in function draw() named battleScreen.

I am a web developer. And click event works in all touch screen devices. And it works on every id, name, tag etc of html. you can try. Hope it will work
In javascript you can use addEventListener
document.getElementById("youId").addEventListener("click", function () {
//your action
// you can also use document.getElementsByClassName, document.getElementsByName, document.getElementsByTagName etc in the place of getElementById
})

Related

Jquery manipulate DOM on mobile only

I have a bootstrap column system, however the way they are stacked, on mobile I would like to move one of the elements to appear before another. I believe this can be done with .append().
Is it possible to move the element I want with append() but only on mobile?
Thanks
You can do it by first checking whether your device's browser supports touch events (e.g. desktop does not, mobile does)
If it does you can execute the append and if not, nothing will happen.
var isMobile = (function() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
})();
if(isMobile) {
your append action
}
http://detectmobilebrowsers.com/
Here you can get javascript/jquery file with the function based on regex for all the mobile/tablet devices.
If you select some of them and build two separate functions for the mobile/tablet you could do regex for tablet and for the mobile only.
Hope it helps :)

EaselJS: AS3 to Javascript conversion: on rollover of MC, gotoAndPlay frame 1 of that MC (Flash Canvas for HTML5)

This is a Javascript issue, for an HTML5 canvas project in Flash. I'm trying to get movieClip cta to act as a button, and once it's moused over to play this.cta.gotoAndPlay(1);. I'm using the code from the suggested snippets in Flash Canvas and I'm getting the following error on mouseover: TypeError: this.cta is undefined So how do I call cta from inside this function?
FYI, the alert works in the code below (when the MC is moused over), and this.cta.gotoAndPlay(1); works also when placed in the timeline by itself outside of this codeblock.
Here's the javascript flash(canvas) is suggesting in the code snippet.
var frequency = 3;
stage.enableMouseOver(frequency);
this.cta.addEventListener("mouseover", fl_MouseOverHandler);
function fl_MouseOverHandler()
{
alert("Moused over");
this.cta.gotoAndPlay(1);
}
Here's the old AS3.
cta.onRollOver = function(){
this.gotoAndPlay("start");
I figured it out. I added .bind(this) on the end of fl_MouseOverHandler in the EventListener. It works for me.
var frequency = 100;
stage.enableMouseOver(frequency);
this.cta.addEventListener("mouseover", fl_MouseOverHandler.bind(this));
function fl_MouseOverHandler()
{
this.cta.gotoAndPlay(1);
}
your event listener is not setup properly by the looks of it a mouse event should look like:
this.cta.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler);
unless you are listening to another customEvent then you will need to direct it to where it is listening to for the event.
also just to point out if you are looking at something within the same movieClip as long as it has an instance name in that same movieclip you do not need to put this at the start it can just be:
cta.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler);

Why doesn't dragging images using JavaScript work in Firefox?

I'm using the code below for dragging an image (#StndSoln1). It works perfectly in Chrome and all, but not in Firefox. Here startDrag() is the function which i attached to the mousedown event listener. Could anybody please help me.
function initialFunction(){
document.getElementById("StndSoln1").addEventListener('mousedown',startDrag,false);
document.getElementById("StndSoln1").addEventListener('mousemove',drag,false);
document.getElementById("StndSoln1").addEventListener('mouseup',stopDrag,false);
}
function startDrag()
{
if (!moveFlag){
currentTraget=document.getElementById("StndSoln1");
offsetX=currentTraget.offsetLeft;
offsetY=currentTraget.offsetTop;
ImgPlaced=false;
moveFlag=true;
x=window.event.clientX;
y=window.event.clientY;
event.preventDefault();
}
}
// Fn for drag the current target object...
function drag(){
if (moveFlag && !ImgPlaced){
currentTraget.style.left=(offsetX+window.event.clientX-x)+"px";
currentTraget.style.top=(offsetY+window.event.clientY-y)+"px";
}
}
I actually had a similar problem, so I can try to help even without the code you're using.
See, the Firefox developers had this bright idea of making it so that, when you drag an image, you can "move" it around and possibly drop it in an Explorer window to quickly and easily download it, or to the tab bar to open the image in a new tab. The obvious downside of this is that it results in a default behaviour that other browsers don't have.
The simple solution is to make sure that all your events are properly cancelling the default action (event.preventDefault, return false, that kind of thing). Should that fail too, then you should use a <div> element with a background-image instead of an <img> element.

UIWebView performance with JS onclick function

I have a rather large page showing in a UIWebView (around 150 <article>s with some text, separated in <section>s). I want to do something like this with JS (I use jQuery):
$('article').click(function() {alert('hi');});
The problem is, it takes forever to run that code (around 2 seconds from the tap, on an iPad 3).
How can I improve performance on this?
I'm using the latest version of XCode and iOS 5.1.
I used this answer's class SingleTapDetector, and the following code:
new SingleTapDetector(window, function(e) {
alert($(e.srcElement).text()); //show the text of the element that was tapped
});
Then it's easy to see if the element was an article, or even stuff like $(e.srcElement).closest('article') (because my articles have <p> paragraphs).
I suggest you to try to put a click event on the window object, and then verify if this is the <article> tag. Here's the example:
$(window).click(function(e){
var e = e || event;
if(e.srcElement.tagName==ARTICLE)
alert('hi');
});

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?
Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});
In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.

Categories