I am new to createJS toolkit (Flash CS6), My concept is I have a multiple buttons on the stage, each button click will have different animations in different frames.
my code is
'/* js
this.stop();
this.btnname.onPress = function()
{ this.parent.gotoAndPlay("cone"); }
*/'
it is perfectly working in all browsers and android mobile, but in iPhone it is not working,
I am trying to click on the button but canvas is highlighting in iphone,
when I change my code to the following code,
'/* js
this.stop();
this.onPress = function()
{ this.gotoAndPlay("cone"); }
*/'
It is working in iPhone, but I have multiple button clicks, here is my major problem.
Please help me find a solution to this issue.
Use addEventListener and listen for the "click" or "mousedown" event instead of assigning an onPress function. Like this:
/* js
this.stop();
this.btnname.addEventListener("click", function(){
this.parent.gotoAndPlay("cone");
});
*/
You need to create a shape, cache it and use it as the hitArea of your button. john has answered your question here: http://community.createjs.com/discussions/easeljs/5663-touch-on-ios-only-seems-to-work-with-bitmaps
Related
I am new to ConverseJS Development. ConverseJS initialize() will set DEFAULT settings just once...I want to achieve the following : Play a sound only when browser window is not in focus and a new message arrives. Is there an option where I can ADD attributes like play_sounds to true when some event is triggered like we have in jQuery as follows :
$('#datePickerId').datepicker('option', 'minDate', '3');
For now my current code is as follows :
converse.listen.on('message', function (messageXML) {
if(false === document.hasFocus()){
console.log("Window is NOT in FOCUS");
converse.initialize({
play_sounds: true
});
}
});
But this is as good as setting play_sounds for all my messages...Is there a way I can TOGGLE play sounds to ON and OFF based on Window focus...
Any help would be great. Thanks !
Take a look at below link Converse js provide such a feature out of the box.
https://conversejs.org/docs/html/configuration.html#play-sounds
Sorry for posting it here rather than comment because i was not allowed to put comments on question.
I have been making a Phonegap / Cordova 2.0 app with backbone.js which has all been fine until I tried to build in a form. The form is displayed but the click events do not trigger the keyboard.
I played around with different events and found that adding ontouchstart="this.focus()" brought up the keyboard fine. I added a catchall in the view function to bring focus:
window.PageView = Backbone.View.extend({
initialize: function() {
this.template = _.template(tpl.get('page'));
},
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
$('input', $(this.el)).bind('touchstart',function(event) {
$(this).focus();
});
return this;
}
});
But even with this if I change bind('touchstart'... to 'click' it doesn't get triggered.
I have found a couple of other posts like: click event doesn't fire in an underscore template
which suggests it is to do with the underscore.js templating process but nothing is very clear.
I guess I could make a timer function on touchstart to simulate this but it's kindof mysterious so I want to know what's going on really.
Thanks.
Try this:
this.$(':input').bind(...)
It turns out it was iScroll causing the problem.
onBeforeScrollStart: function (e) { e.preventDefault(); },
Specifically. I just commented out the e.preventDefault(); and it worked a treat!
So I'm learning jQuery Mobile and I'm trying to run the following code below in my Android emulator. What I was trying to do is to use $.mobile.changePage() method to navigate to my Contacts page (contact.html). Obviously I'm doing something wrong, because I'm not even seeing the alert() call I placed into my JS.
I'm using jquery.mobile-1.0.min.css, jquery-1.6.4.min.js, and jquery.mobile-1.0.min.js in my html file.
I have an html5 button tag with an id of "html5Btn" in my code. I have wrapped that button in a "div" with a data-role='content' attribute.
Can someone explain...
What I'm doing wrong in my code?
How do I debug JS in Eclipse? I'm not seeing any errors in my LogCat? Is this where I even look for jQuery errors?
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").bind('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
try
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").live('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
For debugging, firebug is your friend! Also, I'm using intellij 11 ultimate... I must say the javascript debugger is nice!
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.
I'm trying to build a mobile-safari/iphone web-app using jQuery code I already wrote for the desktop version of the app. The problem I'm having is that when my phone goes to sleep with the web-app running, when I wake it up (slide to unluck) the JavaScript event handlers no longer function. In this case meaning when I click on a link that used to perform an AJAX update via an onclick event it actually follows the link by opening the page in a new Safari window, breaking the appearance of the native iPhone app.
The code that stops working:
$(function() {
var ajaxLoad;
var ajaxClick = function(e) {
e.preventDefault();
e.stopPropagation();
$("body").load( $(this).attr("href"), ajaxLoad );
}
ajaxLoad = function() {
$(this).find("a").click( ajaxClick );
}
$("a").bind( "click", ajaxClick );
});
When the code works the result of the link will open in the web-app frame, when it breaks, the code will open in a new safari window, breaking the look of an actual app.
Not tested - but would it help to add 'return false' to the end of the ajaxClick function so that the link does not activate.