I've tried to disable click on the 'Spreader' button. Cant seem to stop it from closing. I have an onmousedown event i want to keep but i don't want to close the spreader. Anyone know the best way to disable click on spreader?
You can set the minPercent property to achieve your needs.
var wheel;
window.onload = function () {
wheel = new wheelnav("wheelDiv");
wheel.spreaderEnable = true;
wheel.createWheel(["This", "is", "custom", "spreader"]);
wheel.spreadWheel();
var wheelspreader = document.getElementById("wheelnav-wheelDiv-spreader");
var wheelspreadertitle = document.getElementById("wheelnav-wheelDiv-spreadertitle");
wheelspreader.onmousedown = function() {openSpreader();}
wheelspreadertitle.onmousedown = function() {openSpreader();}
};
var openSpreader = function() {
wheel.minPercent = wheel.maxPercent;
}
Here is a JS Bin for that.
Related
I've started using Wheelnav.js. Currently my Wheel is toogled on/off with pressing and releasing X. I also got some hover effects, my Problem is that my NavItems are Clickable.. if i click a item it is "selected" and i cant hover over it anymore.
https://gyazo.com/29f73fd2fb0f8bbf1f634931686c3ec6
In this example i clicked on Item1
You have to set the selected property to false and refresh the wheel.
window.onload = function () {
wheel = new wheelnav("wheelDiv");
wheel.createWheel();
wheel.animateFinishFunction = disableSelected;
};
var disableSelected = function () {
for (var i = 0; i < this.navItemCount; i++) {
if (this.navItems[i].selected) {
this.navItems[i].selected = false;
this.navItems[i].refreshNavItem(true);
}
}
}
Hi I'm creating a basic game and I need the most simple "PAUSE" menu in the world!!! I am using this:
pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {this.game.paused = true;},this);
game.input.onDown.add(function () {if(this.game.paused)this.game.paused = false;},this);
pauseButton.fixedToCamera = true;
I just want to see "Game Paused" when the pause button is pressed that's all! please just tell me the most simple code that will display "game paused" when i click on pause.
Thank you in advance!
Something along the lines of this:
var text;
var pauseButton = this.game.add.sprite(10, 10, 'pauseButton');
pauseButton.inputEnabled = true;
pauseButton.events.onInputUp.add(function () {
this.game.paused = true;
var style = {fill : '#FFF'};
text = game.add.text(game.width * 0.5, game.height * 0.5, "Game Over!", style);
text.anchor.set(0.5, 0.5);
}, this);
game.input.onDown.add(function () {
if (this.game.paused) {
this.game.paused = false;
text.destroy();
}
}, this);
pauseButton.fixedToCamera = true;
Added it right in your code, you may want to adjust what is a local variable and what is a field. You can include text properties in the style variable or you can set them later on via text.font, text.fontSize and so on, see the API documentation.
I am creating a simple app using Sencha Touch where I'm dynamically creating container with textfields, textareafields etc. when the user needs to add new container with components. The problem now is when the clear icon on the textareafield is tapped it clears the text, but I would like to know which textareafield has been cleared. Can anyone help me in this please?
This is how I created container .
var childObj2 = {};
childObj2.xtype = 'container';
var type = 'vbox';
var layout = {}
layout.type = type;
childObj1.layout = layout;
var txtarea= {};
txtarea.xtype = 'textareafield';
txtarea.id = "txt51";
txtarea.flex = 3;
txtarea.maxRows = 7;
txtarea.placeHolder = 'Type here';
txtarea.value = value['notes'];
txtarea.inputCls = 'txtareaStyle'
txtarea.clearicontap = "clearText";
How to add clearicontap listener to this?
When you you create a textfield simply add a listener to it for the clearicontap event and that callback will get executed for each of the fields.
For example:
var container = Ext.create('Ext.Container', {});
for (var i=1; i<=3; i++) {
var field = Ext.create('Ext.field.Text', {
id: 'textfieldnumber' + i,
listeners: {
clearicontap: function() {
alert("Tapped clear icon on text field number: " + i + "!");
}
}
});
container.add(field);
}
[EDIT]
I answer the question you make after your edit:
I am using the standard way of creating Sencha components through Ext.create(), and I would suggest you to switch to the same way. It is not clear by the code you posted how those Javascript objects are actually transformed into Ext components. Anyway, they are very likely components configurations, so I guess you could try:
txtarea.listeners = {
clearicontap: function() {
alert("Tapped clear icon on text field");
}
}
Is it possible to have many busyIndicators depending on context?
I tried with 4, but it doesn't work (only the last busyIndicator seems to be used, and can't be hidden):
Here's the code:
var myBusyIndicator1;
var myBusyIndicator2;
var myBusyIndicator3;
var myBusyIndicator4;
wlCommonInit(){
myBusyIndicator1 = new WL.BusyIndicator('content', {text : 'Loading data 1'});
myBusyIndicator2 = new WL.BusyIndicator('content', {text : 'Loading data 2'});
myBusyIndicator3 = new WL.BusyIndicator('content', {text : 'Loading data 3'});
myBusyIndicator4 = new WL.BusyIndicator('content', {text : 'Loading data 4'});
}
$('#myPage').on('showpage', function(e, ui){
myBusyIndicator1.show(); // 'Loading data 4' is displayed in modal window
//do some stuff
myBusyIndicator1.hide(); // modal window still, and app is not responsive anymore
});
"Busy indicator is a singleton. If you create several busy indicators, show them and then hide of them - all will be hidden." - Anton (source)
You could try to wrap it in your own "singleton", for example:
var Busy = (function () {
var busyObject;
var _show = function (message, options) {
//If you're using WL v6.0,
//see: https://stackoverflow.com/q/18501456/186909
WL.ClientMessages.loading = message;
//Others version of WL may not require
//the line above or the message parameter.
busyObject = new WL.BusyIndicator('content', options);
busyObject.show();
};
var _hide = function () {
if (busyObject !== null) {
busyObject.hide();
busyObject = null;
}
//else no busy indicator to hide
};
return {
show: _show,
hide: _hide
};
}());
//Usage:
Busy.show('message1', options1);
//Later...
Busy.hide();
//Later...
Busy.show('message2', options2);
//Later...
Busy.hide();
I did not test the code above, it's just meant to give the reader ideas, not to be copy/pasted into a project.
I am reading through titanium best practises and i was wondering why this doesnt appear to work can some one tell me whats changed with the api?
https://wiki.appcelerator.org/display/guides/Mobile+Best+Practices
ui/ToggleBox.js - A custom check box
function ToggleBox(onChange) {
this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});
//private instance variable
var active = false;
//public instance functions to update internal state, execute events
this.setActive = function(_active) {
active = _active;
this.view.backgroundColor = (active) ? 'green' : 'red';
onChange.call(instance);
};
this.isActive = function() {
return active;
};
//set up behavior for component
this.view.addEventListener('click', function() {
this.setActive(!active);
});
}
exports.ToggleBox = ToggleBox;
Sample usage in app.js
var win = Ti.UI.createWindow({backgroundColor:'white'});
var ToggleBox = require('ui/ToggleBox').ToggleBox;
var tb = new ToggleBox(function() {
alert('The check box is currently: '+this.isActive());
});
tb.view.top = 50;
tb.view.left = 100;
win.add(tb.view);
it doesn't seem to want to return the setActive method when called from the add event listener?
The "this" in your click listener isn't what you're expecting it to be. (It's probably the view.) Because your function is already the ToggleBox context, the easiest solution is to just use a direct reference to setActive. "this." is only necessary for the API you're exposing for other code.
function ToggleBox(onChange) {
var view = this.view = Ti.UI.createView({backgroundColor:'red',height:50,width:50});
//private instance variable
var active = false;
//public instance functions to update internal state, execute events
var setActive = this.setActive = function(_active) {
active = _active;
view.backgroundColor = (active) ? 'green' : 'red';
onChange.call(instance);
};
var isActive = this.isActive = function() {
return active;
};
//set up behavior for component
view.addEventListener('click', function() {
setActive(!active);
});
}
exports.ToggleBox = ToggleBox;